Kendo Grid - Edit mode when templated column is clicked

Question

I am using a template for the edit popup. I am trying to force the grid to go into edit mode and show the edit template popup when a link within one of the columns is clicked.

I tried using a command but I am unable to data bind the hyperlink's text to a field declared in the model, in this case to 'CourseType'. Is data binding supported within command columns?

columns: [
     { 
        command: [
          { 
            id: "edit", 
            title: "School Item",    
            template: '<a href="\\#">#=CourseType#</a>',  
            width: 120
          }
       ]
     }
]

If data binding is not supported within a command column, then how do I put the grid into edit mode when the templated field is clicked?

columns: [
  { 
    field: "CourseType", 
    title: "School Item",  
    template: '<a href="\\#">#=CourseType#</a>'
  }
]

OnaBai OnaBai · Accepted Answer · 2013-02-12T23:44:56

I'm not sure why do you want to define the cell as an HTML anchor but there is no problem on making it enter on popup edit mode when clicking on the anchor.

1) Add to your template a class that would allow us to find those cells. Something like:

columns: [
    {
        field: "CourseType",
        title: "School Item",
        template: '<a href="\\#" class="ob-edit-popup">#=CourseType#</a>'
    }
]

where I have include class="ob-edit-popup" to the template.

2) add to your grid definition the option editable: "popup".

3) add the following JavaScript code after the initialization.

$(".ob-edit-popup", grid.tbody).on("click", function (e) {
    var row = $(this).closest("tr");
    grid.editRow(row);
})

Where grid is the result of:

var grid = $("#grid").kendoGrid({...}).data("kendoGrid");

Kendo Grid - Edit mode when templated column is clicked

1 Answers