Checkbox column template and edit

[Kaan]

Hello!

Could you please provide this Kendo UI for jQuery example implemented with ASP.NET Core tag helpers? https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Templates/grid-with-checkbox-column

For some reason I can't get it to work properly. Does this work with batch editing and inline editing?

 

Best regards,

Kaan

[Alex Hajigeorgieva]

Hi, Kaan,

Please see the example using TagHelpers instead as requested. In case you would like to see a version with the styled Kendo UI checkboxes, just let me know and I will get one for your reference. It looks much better(in my opinion) and the checkboxes match the current theme.

@{
    ViewData["Title"] = "Home Page";
}

@addTagHelper *, Kendo.Mvc
<kendo-grid name="grid" height="550">
    <datasource type="DataSourceTagHelperType.Custom" page-size="20" batch="true">
        <transport parameter-map="parameterMap">
            <read url="https://demos.telerik.com/kendo-ui/service/Products" datatype="jsonp"/>
            <update url="https://demos.telerik.com/kendo-ui/service/Products/Update" datatype="jsonp"/>
        </transport>
        <schema>
<model id="ProductID">
</model>
</schema>
    </datasource>
    <editable enabled="true" mode="incell"/>
    <pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20 }">
    </pageable>
    <filterable enabled="true" />
    <toolbar>
<toolbar-button name="save"></toolbar-button>
</toolbar>
    <columns>
        <column template="#=dirtyField(data,'Discontinued')#<input type='checkbox' #= Discontinued ? checked='checked' : '' # class='chkbx'/>"> </column>
        <column field="ProductName" title="Product Name" width="240" />
        <column field="UnitPrice" title="Unit Price" />
        <column field="Discontinued"  />
    </columns>
</kendo-grid>
<script>
    function dirtyField(data, fieldName) {
        var hasClass = $("[data-uid=" + data.uid + "]").find(".k-dirty-cell").length < 1;
        if (data.dirty && data.dirtyFields[fieldName] && hasClass) {
            return "<span class='k-dirty'></span>";
        }
        else {
            return "";
        }
    }

    function parameterMap(options, operation) {
        if (operation !== "read" && options.models) {
            return { models: kendo.stringify(options.models) };
        }
    }

    $(document).ready(function () {
        $("#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>

Finally, this approach is usually used in batch editing scenarios along with a header checkbox for quick updates., however, it is possible to use it in inline editing scenarios as well with some custom logic to handle the updates, depending on the desired objective.

Let me know in case you have further questions.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Kaan]

Hi Alex,

I changed the column configuration of your example:

<columns>
    @*<column template="#=dirtyField(data,'Discontinued')#<input type='checkbox' #= Discontinued ? checked='checked' : '' # class='chkbx'/>"> </column>*@
    <column field="ProductName" title="Product Name" width="240" />
    <column field="UnitPrice" title="Unit Price" />
    <column field="Discontinued" template="#=dirtyField(data,'Discontinued')#<input type='checkbox' #= Discontinued ? checked='checked' : '' # class='chkbx'/>"/>
</columns>

 

When I click a little bit outside of a checkbox, the checkbox next to the click position jumps to the right. When I click again a little bit outside of the same checkbox, it jumps again back to its original position.

How can I fix that?

 

Best,

Kaan

[Alex Hajigeorgieva]

Hi, Kaan,

The example that we have been discussing uses a template column, not a bound column. The difference in the change that is made is a major one. When a bound column is clicked and editable, it would automatically generate an editor for the boolean field, which is a checkbox. So there are two checkboxes at the moment - one in the template, an another on click which is automatically generated.

- Either use a template column as discussed so far and handle the rest programmatically (a column without a field declaration)

OR

- Use a bound column following the example in the knowledge base at:

https://docs.telerik.com/kendo-ui/knowledge-base/grid-bound-checkbox-editable-column

Kind Regards,
Alex Hajigeorgieva
Progress Telerik