checkbox column that calls javascript, how to pass the row object

3 posts, 0 answers
  1. BitShift
    BitShift avatar
    115 posts
    Member since:
    Aug 2014

    Posted 18 Jan 2018 Link to this post

    Say I want to have a column within my grid that displays a checkbox as in this example.  This grid is a child of a parent grid.
    When I click the checkbox, I want to call a javascript function that not only updates a few fields of the row that the checkbox is on, but the parent row as well.

    Using Kendo UI MVC 2015 (yes I know its dated)

    So, looking at this example:
    https://docs.telerik.com/aspnet-mvc/helpers/grid/faq#how-to-display-checkboxes-in-ajax-bound-grids

    How then, could I call a javascript function that passes a reference to the row that contains the checkbox, which then is used to get a reference to the parent of that row?  If I can get a reference to the row of the checkbox, then I can do something like this:

    var row = e.Row.Parent as GridViewRowInfo;
    if (row != null)
    {
        row.Cells["Cost"].Value = (int)row.Cells["Cost"].Value + newChildCost - oldChildCost;
    }

     

  2. BitShift
    BitShift avatar
    115 posts
    Member since:
    Aug 2014

    Posted 18 Jan 2018 in reply to BitShift Link to this post

    I see an example like this, but is there a razor-friendly equivalent?

    https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Templates/grid-with-checkbox-column

     

  3. Stefan
    Admin
    Stefan avatar
    2475 posts

    Posted 22 Jan 2018 Link to this post

    Hello,  Randal,

    The Razor syntax is similar.

    The code used inside the template property was to be used inside the ClientTemplate() property of the Grid. You could add the specific class in the template and then use the same on click logic place inside a script tag:

    https://docs.telerik.com/aspnet-mvc/helpers/grid/faq#how-to-display-checkboxes-in-ajax-bound-grids

    <script>
    $("#grid .k-grid-content").on("change", "input.chkbx", function(e) {
            var grid = $("#grid").data("kendoGrid"),
                dataItem = grid.dataItem($(e.target).closest("tr"));
     
            dataItem.set("Discontinued", this.checked);
          });
    </script>

    I hope this is helpful.

    Regards,
    Stefan
    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