Browser: IE 9
Context: An editable, sortable(server side) KendoUI grid is populated.
Issue: The objective is to pop up a message if there are any unsaved changes.
User clicks on a cell
User edits the text in the cell
User clicks on the column header
The grid’s datasource does not catch the edit. Dirty property of the data item is false.
Kendo UI grid always sorts the column. I have been unable to find a way to intercept the sort event and warn the user and cancel the sort event.
Any help is appreciated.
Version: kendoui.aspnetmvc.2013.2.716
In order to cancel the sort event, call event.preventDefault() in the requestStart event of the datasource.
hasChanges() method of the datasource returns false if
Grid columns are reorderable. (.Reorderable(r => r.Columns(true))
//Kendo htmlhelper code)
Sorting is done on the server
User edits the text in a cell and click on the column header
If you remove the Reorderable setting, hasChanges() method of datasource returns true.
Opening a support ticket for this issue.
In the meantime, if you would like to catch the edit with hasChanges() method when user edits the cell and clicks the column header do not set the Reorderable to true.
Here is a video demonstrating the KendoUI Grid issue
Response from Telerik
Basically this is happening because when reordering the event that is used is the mousedown event.
When the mousedown event is triggered the model is still not updated.
As a work-around I can suggest you the following resolution:
Put this in a script block after initializing the Grid. This way if the Grid is still in edit mode, no matter if you have made a change or not the Dragging will be prevented.
$(function () {
var gr = $('#Grid').data().kendoGrid;
gr.thead.on('mousedown', function (e) {
if (gr.tbody.find('.k-edit-cell').length) {
e.stopImmediatePropagation()
}
});
})
Related
I am using Kendo UI TreeList & Grid for jquery. I want to hide a command button based on row values. In grid, I attached dataBound event to evaluate the model value and show/hide command button, below codes works fine
dataBound:function(e){
var delButton = e.container.find(".k-grid-Delete");
if (...) delButton.hide();
}
For TreeList, the same code seems also fine. However, when I add inline edit featrue, the same codes works differently.
When click "Edit" or "Add", the grid stay the original visible status, but treelist show all the button.
When click "Cancel", I triggered dataBound event in cancel event so the UI can be refreshed, then the grid show correctly but treelist still show all the buttons even if the dataBound is executed with correct logic.
Does anybody know how to resolve this issue?
Thanks,
Ziff Dai
I have Kendo grid as empty. Then I add one row, entering values and call saveRow() method. This will call controller and returns message, based on message I want to clear added(newly) record. I have used the code is: grid.dataSource.data([]); this code calling data bound event two times. I want this to be called only ONCE or I don't want to call Data bound event.. but I have to empty the grid.
Please advise.
Hello you can try and use the requestEnd event of the dataSource - check that message which you return, prevent the next dataBinding of the Grid and set the data again to empty array.
e.g.
function onRequestEnd(e){
if()//some condition basedo on the e.response
{
$('#grid').data().kendoGrid.one('dataBinding',function(e){
e.preventDefault();
this.dataSource.data([]);
})
}
}
You could add a filter to your datasource. Make it so that it filters away everything that the server sends it and you should be able to get the behaviour that you are looking for. Then you wont have to mess about with events too much or delete rows manually.
This page contains some info about filtering datasources: kendo datasources
Hope this helps!
i want to change the data in the gridview on a button click by binding it with a different List<> object on server side, It binds the data successfully but since its a post back on button click the grid view gets loaded with the old data which was initialized to it in the page_load method.
how can i avoid calling the page load method after binding the grid with fresh data in the onclick event of my button.
i tried using (!isPostBack) but it dose not help.
Have your button event set a grid parameter that posts back to your server control that indicates that you are changing which datasource feeds the grid, then reload the grid. It should only be now showing the new dataset.
Example:
$('#gridName').jqGrid('setGridParam', { postData: { ChangeGridDataSet: true} }).trigger('reloadGrid', [{ page: 1}]);
I have been following this example, http://www.ok-soft-gmbh.com/jqGrid/DependendSelects2.htm, as it is just what I need. I have got it working but it doesnt work when scrolling through records. If you bring up the form and scroll from a UK record to a US record, the list doesnt change. The onChange event only fires when the user selects from the select drop down.
Is there a way around this?
Thanks for your help.
James
My old demo uses 'change' event handler defined in the dataEvents property of the editoptions. In the dataEvents array one can define other event handlers.
You need just bind keyup to the column exactly like it's described in the answer. In the body of the event handler you can do the same actions as in the body of the 'change' event handler (you can place the code in a function and call it from the both handlers). In the way you should be able to solve the problem.
UPDATED: I updated the old answer and another one which was origin for the demo which you used. The new demo support the navigation buttons (the buttons to edit the 'next' or the 'previous' row) in the editing form.
I am using jqgrid 3.8. I have a grid which is having some editable columns.I also have an update button to save the grid contents on the server.
If user clicks on editable cell and changes the content and then clicks on update button, i am doing the following things.(after clicking on cell user directly clicks on update button)
first i am calling jqGrid 'savecell' method with iRow, iCol.
here the cell is being saved/ showing popup for validations.
but i want a callback to know whether cell is saved/not so that i can stop or continue my save functionality.
my sample code is like this
function updateGrid(){
// i have iRow, iCol references in beforeEditCell event as grideditRow, grideditCol.. these values r not getting modified nowhere else..
$(gridid).jqGrid('saveCell', grideditRow, grideditCol);
//logic to get grid data using getchangedcells and send ajax call to server.
var changedCells = $(gridid).jqGrid('getChangedCells', 'dirty');
}
how can i stop update logic after saveCell call if savecell is failed. saveCell is returning only jqgrid element.
is there any mechanism to get true/false from savecell or can i pass some callback to savecell?
There are afterSaveCell and errorCell events. One of the events will be called after saving the cell on the server. If you implement the corresponding event handler, you will be notified whether the saving of the new cell value was successful or not.