Custom checkbox editor for boolean values

2 posts, 1 answers
  1. Daniel
    Daniel avatar
    7 posts
    Member since:
    Apr 2016

    Posted 16 Jan Link to this post

    Hello,

    I tried to create a custom cell editor for boolean values in a grid by adding the k-checkbox style to a checkbox.
    Unfortunately it doesn't seem to work. When clicking on the styled checkbox, the cell just closes the edit mode, but doesn't change the value.

    Is there a solution for this problem?

    Thank you for your help,
    Daniel

  2. Answer
    Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    193 posts

    Posted 18 Jan Link to this post

    Hello Daniel,

    The recommended approach for checkbox templates within the Kendo UI Grid is to keep them in a template column without binding them to the boolean field from the model.

    To keep the data source updated, attach an event handler to the change event of the checkboxes. Then, in the event handler function, update the relevant dataItem with a call to the set() method:

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

    I have modified one of our demos to feature the styled checkboxes for your convenience at:

    http://dojo.telerik.com/Ufoca

    Regards,
    Alex Hajigeorgieva
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 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