Custom button in grid

[Shea]

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

[Dimo]

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

[Shea]

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?

[Dimo]

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

[Shea]

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.

[reb]

Hi,

 

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

 

[Georgi]

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