This is a migrated thread and some comments may be shown as answers.

Custom button in grid

6 Answers 645 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Shea
Top achievements
Rank 1
Shea asked on 24 Sep 2013, 11:32 PM
Hello,

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. 

What is the easieast way to accomplish this? Is there a way to do this using CustomCommand column? Or do I have to use a client template for the button, then write my own javascript to call the action in the backend,and refresh the grid?

Thanks,
~S

6 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 26 Sep 2013, 11:02 AM
Hello Shea,

The desired behavior can be achieved by using the Grid API, the Grid dataSource API and the Kendo UI Model API.

Grid API
http://docs.kendoui.com/api/web/grid

Kendo UI DataSource API
http://docs.kendoui.com/api/framework/datasource

Kendo UI Model API
http://docs.kendoui.com/api/framework/model

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.

You can achieve the above behavior with both a custom command button, or a template button. In both cases you will write custom Javascript and the implementation will be practically the same.

Custom command button demo
http://demos.kendoui.com/web/grid/custom-command.html

Column template configuration API
http://docs.kendoui.com/api/web/grid#configuration-columns.template

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Shea
Top achievements
Rank 1
answered on 26 Sep 2013, 11:40 PM
Is there a way to have the text of the custom command button based on a field in the model?

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:
olumns.Bound(c => c.IsFieldCapUser).Title("Active").ClientTemplate("#= EmployeeGrid.activateColumnTemplate(data) #");
<script type="text/html" id="activateColumnTemplate">
    # if (IsActive) { #
        <button
            onclick='EmployeeGrid.activateEmployee(false, #= UserID #, "#= FirstName #", "#= LastName #", this, event)'
            class='hightlightButton k-button' title='This user is able to log into App.'>Active</button>
    # } else { #
        <button
            onclick='EmployeeGrid.activateEmployee(true, #= UserID #, "#= FirstName #", "#= LastName #", this, event)'
            class='k-button' title='Click to activate this user.'>Invite</button>
    # } #
</script>
<script type="text/javascript">
    EmployeeGrid = {
        activateColumnTemplate: kendo.template($('#activateColumnTemplate').html()),
 
        activateEmployee: function (enable, userId, first, last, t, e) {
            if (!confirm((enable ? 'Activate ' : 'Deactivate ') + first + ' ' + last + '?')) {
                return;
            }
 
            //was using ajax to set employee active/inactive here, then calling read() on dataSource.
           //how do I get access to the data model here, like i did on the custom command?
           //i.e. var model = this.dataItem($(e.currentTarget).closest("tr"));
          // does not work here.
        },
    };
</script>
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?
0
Dimo
Telerik team
answered on 27 Sep 2013, 11:48 AM
Hello Shea,

>> 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.

http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-TreeWalker
(see Methods)

http://api.jquery.com/category/traversing/
(see closest() )

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Shea
Top achievements
Rank 1
answered on 27 Sep 2013, 03:28 PM
Dimo,

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.

Thanks,
~Shea M.
0
reb
Top achievements
Rank 1
answered on 13 Apr 2018, 05:31 PM

Hi,

 

Is there a way to disable a custom button in OnDataBound() event and enable the button on Change () event of grid

 

0
Georgi
Telerik team
answered on 17 Apr 2018, 10:26 AM
Hello Reb,

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.

e.g.
// custom command button
 
 columns.Command(x => x.Custom("Custom").Text("Custom button").HtmlAttributes(new {@class= "custom-disabled" }));
 
// CSS
 
    .custom-disabled{
        opacity:0.5;
        pointer-events:none;
    }
 
    .k-state-selected .custom-disabled {
        opacity: 1;
        pointer-events:auto;
    }

For your convenience I am attaching a sample which demonstrates the above approach.


Regards,
Georgi
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Shea
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Shea
Top achievements
Rank 1
reb
Top achievements
Rank 1
Georgi
Telerik team
Share this question
or