Custom Editor with Checkbox

[Tony]

Hi.

 I am trying to build a kendo grid with a custom editor. My grid has 2 checkboxes that have custom designs. I was able to create a template to handle the custom checkboxes. However, I am having difficulty with having that same custom design working in the edit mode. I have posted below my code which includes how I intended the custom checkboxes to be built: 

<div id="grid" class="settings-grid patient-settings"
               data-columns='[{title: "", width: "15px", attributes: {"class": "indent-cell"}},

               {field: "select", title: "select", width: "40px", template: "#if (select) { # <div class=\"checkbox\"><label class=\"check-label\"><input type=\"checkbox\" name=\"check\" class=\"check\" checked=\"true\" disabled=\"true\"/> <span></span></label></div> # } else { # <div class=\"checkbox\"><label class=\"check-label\"><input type=\"checkbox\" name=\"check\" class=\"check\"  disabled=\"true\"/> <span></span></label></div> # } #"},

               {field: "description", title: "Description", attributes: {"class": "desc"}},

               {field: "active", title: "Active", width: "63px",  template: "# if (active) { # <span class=\"icon_check\"></span> # } #"},

               {command: [ { name: "edit", text: {edit:"", update:"", cancel:""}}, {name: "destroy", text: "" }], title: "Actions", width: "15%"}]'>

 <script type="text/javascript">
var dataSource = new kendo.data.DataSource({
            data: [
                {
                    id: 1,
                    select: 0,
                    description: "Option text goes and so forth ...",
                    active: 0
                }, {
                    id: 2,
                    select: 1,
                    description: "Option text goes right here and so forth ...",
                    active: 1
                }, {
                    id: 3,
                    select: 1,
                    description: "Option text goes right here ...",
                    active: 1
                }, {
                    id: 4,
                    select: 1,
                    description: "Option text goes here ...",
                    active: 1
                }
            ],
            pageSize: 7,
            schema: {
                model: {
                    id: "id",
                    fields: {
                        select: {
                            type: "boolean",
                            editable: true,
                            nullable: false
                        },
                        description: {
                            type: "string",
                            editable: true ,
                            nullable: false
                        },
                        active: {
                            type: "boolean",
                            editable: true ,
                            nullable: false
                        }
                    }
                }
            }
        });

    // Create an observable object.
    var vm = kendo.observable({
        settings: dataSource
    });

    kendo.bind($("#grid"), vm);
</script>

[Kiril Nikolov]

Hello George,

 

I would suggest to check this demo in our CodeLibrary which demonstrates how to create a template column which displays checkboxes for a boolean value and how to change the underlying model with a single click.

Regards,
Kiril Nikolov
Telerik

 

 

[Tony]

This has been a little help. I am also trying to use the custom edit method. However, when going into edit mode, the checkboxes are not ticked even though the property is set to true. I have created a dojo so you can see. I cannot seem to understand why this is happening.

http://dojo.telerik.com/OpAZA

 ​

[Kiril Nikolov]

Hello George,

 

Thanks for the Dojo!

 

You need to make sure that the checkbox is added after the Grid is fully rendered, you can use a simple timeout for that. Please check the following example:

 

http://runner.telerik.io/fullscreen/OpAZA/2

 

Regards,
Kiril Nikolov
Telerik

 

 

[Tony]

Getting close. However, i'm noticing my code and the code in the dojo is not setting the change and updating the data source-- meaning...after confirming the change, and going back to edit it, it looks like things resorted back. 

 

Please advise!

[Kiril Nikolov]

Hello George,

You do not have any transport settings defined in your dataSource, so the data is persisted. I would suggest you to check the following how-to article that shows how to implement CRUD operations with local data:

http://docs.telerik.com/kendo-ui/web/grid/how-to/grid-localstorage-crud

Regards,
Kiril Nikolov
Telerik