[Solved] Can we use a widget as a display template (as well as in edit mode)

[Peter]

Hi team, I am looking into what I can do with the cell templates in the Kendo grid. So I can see that I can use the. I am using a kendoComboBox as the edit template, and I am using a function (comboDisplayTemplate) for the cell when it is in non edit mode, as shown below (complete example attached)...

columns: [
       { field: "ProductName", title: "Product Name" },
       { field: "Category", title: "Category", width: "180px",
          editor: categoryDropDownEditor,
          template: comboDisplayTemplate
       },
       { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
       { command: "destroy", title: " ", width: "150px" }
     ],

function comboDisplayTemplate(data){
       return '<div style="color: blue">' +  data.Category.description + '</div>';
   }

   function categoryDropDownEditor(container, options) {
     var input = $('<input name="' + options.field + '"/>');
     input.appendTo(container);
     input.attr("name", options.field);
     var combo = input.kendoComboBox({
       autoBind: true,
       filter: "contains",
       placeholder: "select...",
       suggest: true,
       dataSource: combo2Data,

       dataTextField: "description",
       dataValueField: "code"
     });

So the "display template" (ie the non edit template) returns some html which includes the cell value.

What I would like to be able to do, is have the kendoComboBox shown in the cell when in non edit mode, that way a user can 
1. See that this cell is editable (other cells may not be - though could get around this by coloring the cells)
2. Most importantly - using the mouse the user can use one click to go to a cell and open the already display combo box, as opposed to having to first put the cell into edit mode, and then select from the drop down (2 clicks instead of one)

Is there some way of doing this?

Thanks in advance for any help / suggestions

[Peter]

I forgot to add...

 or alternatively always have a cell in edit mode, so the combo always shows.

Cheers

[Vladimir Iliev]

Hello Peter,

There are several ways to do that and which one you would choose depends entirely on you and the exact setup that you have. For example you can define "rowTemplate" for the grid and list editors for all columns. Then you can use for example the "k-on-change" event of the editors to directly modify the target field in the "dataItem". 

e.g.:

$scope.gridOptions = {
     dataSource: gridData,
     rowTemplate: kendo.template(rowTemplate),
     columns: [
       { title: "Category", width: "180px" }],

function rowTemplate() {
  return'<tr data-uid="{{dataItem.uid}}">' +
              '<td>' +
                  '<input ' +
                        'kendo-drop-down-list ' +
                        'k-data-text-field="\'description\'" ' +
                        'k-data-value-field="\'code\'" ' +
                        'k-data-source="combo2Data"' +
                        'k-value="dataItem.CategoryID"' +
                        'k-on-change="handleDDLChange(kendoEvent, dataItem)"/>' +
              '</td>' +
          '</tr>';
}

$scope.handleDDLChange = function (kendoEvent, dataItem) {

    dataItem.CategoryID = kendoEvent.sender.value();

  };
$scope.combo2Data = combo2Data;

Regards,
Vladimir Iliev
Telerik