This is a migrated thread and some comments may be shown as answers.

Custom Editor with Checkbox

5 Answers 329 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tony
Top achievements
Rank 1
Tony asked on 07 Aug 2015, 06:54 PM

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>

5 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 11 Aug 2015, 08:50 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Tony
Top achievements
Rank 1
answered on 11 Aug 2015, 07:15 PM

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

 ‚Äč

0
Kiril Nikolov
Telerik team
answered on 13 Aug 2015, 07:34 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Tony
Top achievements
Rank 1
answered on 21 Aug 2015, 10:09 PM

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!

0
Kiril Nikolov
Telerik team
answered on 24 Aug 2015, 06:56 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Tony
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Tony
Top achievements
Rank 1
Share this question
or