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!
Related
I am doing an inline add using Kendo Grid, but on the server side I am actually creating multiple records. The DataSourceRequest sends back all the newly created rows, but only one is added to the grid. The other added records may not show up in the grid at all until the grid is forced to query for the data again.
Is there a way for me to add multiple rows at once?
If not, is there a way to re-query the data and put all newly added models at the top?
In my controller function that creates the new records, I am returning the following. "models" contains all of the newly created records:
return this.Json(models.ToDataSourceResult(request, this.ModelState), JsonRequestBehavior.AllowGet);
I also have a similar issue when updating a row since the server may actually update multiple rows. Since "models" contains multiple models, the first one in the list may or may not be the actual model selected to be updated, so sometimes a different edited model will replace the model that was selected to be updated in the grid.
Thanks,
Rob
I ended up using the kendo grid datasource insert method to add any records returned by my controller that were not already in the grid. I did this in the RequestEnd event for the datasource.
In order for this to work for inline adds, I needed to make sure the first model in the list returned by the controller was always the model being added by the grid. For some reason the initial model being added does not have an ID until the dataBinding event is reached which occurs after the RequestEnd event. So on adds, I simply ignore the first model in the results because it is already in the grid.
Also, when editing rows that are manually inserted into the datasource and then cancelling the edit, the grid removes them from the datasource. I had to block this using the preventDefault() function in the DataBinding event when a "remove" action was encountered directly after editing a row that I manually inserted into the datasource.
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()
}
});
})
I am creating a custom transport for KendoUI that would connect Kendo to a number of cool data sources like webSQL. My Kendo Grid problem is that when I implement the delete/destroy command I am not able to prevent the grid from the actual remove row to happen, even if the data source layer has responded with an error.
I get called via the RemoteTransport.destroy method. The input parameter contains an error and a success callback, but even if I call the error callback, or try to return a "false", or try to return a $.Deferred that I eventually reject: the grid row is gone. Actually it's gone before I get called.
I believe you would want the cancelChanges method on the grid.
http://docs.kendoui.com/api/web/grid#cancelchanges
A response from the KendoUI forum helps decoupling the UI part from the data layer part
In the RemoteTransport
call the rejection handler this will cause an exception in the
DataSource. In the DataSource definition place an error handler that
call the actual cancelChanges or whatever rollback method the control
will have. Still inperfect - but at least doable.
Telerik Experts, I need your help guys!
In my grid, data gets bound on the client, through .ClientEvents .OnDataBinding.
I just call grid.dataBind(customData). Data gets displayed, but grouping, filtering, sorting don't work. Is it possible to group or filter stuff after grid.dataBind call?
Right now it just moves my columns around and doesn't do any grouping. Sorting and filtering fails also.
Can you show me a simple example of grouping without any server calls please?
You may want to consider using the Operation Mode feature, which was released in the recent Q2 2011 release.
Client operation mode - This new mode allows operations like sorting,
paging, filtering or grouping to be performed purely on the client, by
making a single initial call to the server to retrieve all data.
Client Mode Implementation:
Html.Telerik().Grid(Model)
.Name("YourGrid")
.DataBinding(dataBinding => dataBinding
.Ajax()
.OperationMode(GridOperationMode.Client) // Set to Client
.Select("Select", "Home")
)
Otherwise, to manually group using javascript, as follows:
<script type='text/javascript'>
function yourGrid_onDataBinding(e){
//Grabs your Grid
var yourGrid = $("#yourGrid").data("tGrid");
//Removes any existing groupings
yourGrid.groups = [];
//Ensure the column you wish to group by is EXACTLY as it appears in the Grid
yourGrid.group("yourColumnName");
}
</script>
Here are a few useful threads from the Telerik MVC forum that might help you solve your issue if this isn't a viable solution for you:
Client-Side Grouping | Has a great deal of code for client-side grouping operations
Client-Side dataBinding | More client-side code, talks about ClientSideGroupHeaderTemplates
Grouping with OperationMode.Client | If you have any issues with OperationMode.Client
As I know you couldn't do it without any hit to the server again.
But you can do it by Ajax throw JavaScript.
All you need to do is and these methods will rebind your grid :
// For filtering
grid.filter("propName~eq~youValue");
// For grouping
grid.group("column Title");
And take care this is column title not property name so if your property is "CustomerName" and your column title is "Customer Name" the you should pass the column title.
Anyway this will make an Ajax call to the controller to rebind Grid again.
Update:
Your grid should set .EnableCustomBinding(true) and you should decorate controller method that get your Ajax grid with [GridAction(EnableCustomBinding = true)] Attribute.
Hope this helped
I'm doing the exact same thing in my grid. I'm using 2011.2.629, jQuery 1.6.2. I'm actually doing this for external filtering--so I don't use the built in filtering--but grouping and sorting both work for me.
We need some code, man.
As someone else mentioned, make sure you have the following set:
dataBinding.Ajax().OperationMode(GridOperationMode.Client)
Is your grid bound at runtime? If not, bind it to an empty viewModel that's the same as the one you're using in the dataBind(). Also, how are you binding to the new list? It could be something in your onDataBinding().
I have an ExtJS editor grid which has some columns inside. I want to modify data on a record and auto save data to DB. But I just need save data after I complete editing all cells at the current row. I've used the event "afteredit" but it fired the event right after one cell was changed.
How can I keep that event not to fire until I've completed modifying all cells? Or could you please suggest another way to do this, not use the "afteredit" event?
Thank you so much.
You might take a look at Ext.ux.grid.RowEditor. It has an afteredit event that fires when the row is done being edited.
You can find the working example at http://dev.sencha.com/deploy/dev/examples/grid/row-editor.html
Here is my question back: Do you edit all the cells in a row? A better solution would be to use a "save" button to send the updated data back to the server and save it into DB.
Now, if you insist that all cells at a row will be modified, you can do the following:
In afteredit event handler:
Get the record being edited (you can get it by event.record)
Check if all the fields have been modified in the record. This can be done by inspecting the public property modified.
If all the fields are modified, proceed with sending the updated record to server for saving into DB.
When edit event has been fired, you should check modified config to check whether all of grid columns have been modified or not. After modifying, you can send them to your back end.
I think in your case it would be easier to have a button that you click to save the grid. you could access all the modified records by calling grid.store.getModifiedRecords() and send that to your backend service and do a mass update instead of updating a single row at a time.
You could use the rowdeselect event on the selection model (assuming that you use a Ext.grid.RowSelectionModel. Inside the event handler you can check if the record has been modified and react accordingly.
var grid = // your grid
grid.getSelectionModel().on("rowdeselect", function(selModel, rowIndex, record) {
if (record.dirty) {
// record has been modified
}
});