How to dynamically add columns to kendo grid with inline edit option

Question

I have a column array object which is bound to columns property of kendo grid. If I add a command in the array, the button appears but the edit event is not firing.

Also in edit mode I need to make the checkboxes in each column as enabled and update it based on the column name.

I am adding the columns using below code and biding to columns property of kendo grid.

  var titleDefs = [
        "User Name", "Admin", "Print"
    ];
    // Field Definition
    var fieldDefs = [
        "UserName", "Admin", "Print"
    ];
    var columnDefs = [];

    for (var i = 0; i < titleDefs.length; i++) {
        if (i == 0)
            columnDefs.push({
                title: titleDefs[i], field: fieldDefs[i],
            });

        else
            columnDefs.push({
                title: titleDefs[i], field: fieldDefs[i], template: '<input id=chk' + fieldDefs[i] + ' name=chk' + fieldDefs[i] + ' type="checkbox" #=  ' + fieldDefs[i] + ' ? "checked=checked style=display:block disabled=disabled" : " style=display:none" #  ></input>',
            });
    }
    columnDefs.push({ command: "edit", title:"", width:"100px"});

Please help me in this.

I have resolved the first issue using kendo grid property- editable: { mode: "inline" }. But the second issue where I need to edit multiple columns with checkboxes seems to be difficult as I need to create a template for each column with checkbox and in databound I need to disable all checkboxes and enable it on edit. — user3202524
hey a single template can work for all the columns having same type. — user3040830
ok got this to work. There is one more issue in my grid, when I click edit then all checkboxes are enabled even the "checked" one's but I want the "checked" one's to be disabled during edit, please let me know how can I achieve this? — user3202524
If you can provide the way you are creating the template it will be easy to give you a solution — user3040830

Unknown Unknown · Accepted Answer · 2014-03-14T08:10:14

While defining the column in the column list, you will be having the property in your datasource based on what you will be making it editable ie YourProperty,using this property you can bind the checked property like below.

columnList = [{ title: "", width: "30px", template: "<input class='chkEmail' id='chk_#= DocumentGUID #' type='checkbox'  data-bind='checked: YourProperty' #= YourProperty? checked='checked' : '' #/>", groupable: false}]

How to dynamically add columns to kendo grid with inline edit option

1 Answers