Custom button in grid

7 posts, 0 answers
  1. Shea
    Shea avatar
    58 posts
    Member since:
    Feb 2013

    Posted 24 Sep 2013 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 26 Sep 2013 Link to this post

    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!
  3. Shea
    Shea avatar
    58 posts
    Member since:
    Feb 2013

    Posted 26 Sep 2013 Link to this post

    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?
  4. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 27 Sep 2013 Link to this post

    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!
  5. Shea
    Shea avatar
    58 posts
    Member since:
    Feb 2013

    Posted 27 Sep 2013 Link to this post

    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.
  6. reb
    reb avatar
    3 posts
    Member since:
    Feb 2018

    Posted 13 Apr 2018 Link to this post

    Hi,

     

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

     

  7. Georgi
    Admin
    Georgi avatar
    673 posts

    Posted 17 Apr 2018 Link to this post

    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.
Back to Top