I have a user grid (ajax binding), where users have a boolean status of active or not active. I would like to display a button that says 'Activate' if the user is non-active, and 'Deactivate' if the user is active.
When the button is clicked, it should trigger a server action (via ajax/post), and then refresh that row to update the new status.
6 Answers, 1 is accepted
The desired behavior can be achieved by using the Grid API, the Grid dataSource API and the Kendo UI Model API.
Kendo UI DataSource API
Kendo UI Model API
When the user clicks on a button, you can retrieve the button element via the event arguments. From the button element you can retrieve the table row via DOM traversing. From the table row you can retrieve the data item (Kendo UI Model instance) via the Grid's dataItem method. From the data item you can toggle the user's active state via the Model's set method. Finally, you can syncronize the local datasource with the remote one by executing the dataSource's sync method.
Custom command button demo
Column template configuration API
Currently I am using a template, and in my template I create a button, and text based on the model. I use an ajax call to modify the data on the server, and then call read() for the dataSource, to reflect the change in my grid.
Changing the model via 'set', and then calling sync is likely more efficient. But how can I get access to the model via the button click event in my template? My code currently is something like this:
If I can get at the data model here, I can set() the value and then call sync. I assume that I need to have an Update() in my data source for the call to sync() to work?
>> Is there a way to have the text of the custom command button based on a field in the model?
I am afraid not, because the Command column is not databound. You can only hard-code the button text:
columns.Command(command => command.Custom(...).Text("text"));
>> how can I get access to the model via the button click event in my template
I see that you include a this parameter in the event arguments, which is the button element. You can retrieve the table row from the button element reference using standard DOM / jQuery traversing.
(see closest() )
This did the trick. from my button I was able to get the model using mygrid.dataItem($(button).closest('tr')). Then set() the active column, and call sync(). For the record, for sync to work, the Update() action must be implemented as I suspected.
Is there a way to disable a custom button in OnDataBound() event and enable the button on Change () event of grid
Based on the provided information I assume that the requirement is to add a custom button to each row which is initially disabled and enable it when the row is selected. Please correct me if I am wrong.
A possible solution is to disable/enable the buttons via CSS.
For your convenience I am attaching a sample which demonstrates the above approach.