CODEWITHSUNDEEP
javascriptkendo-uikendo-grid
peterc
peterc

Reputation: 7883

Kendo Grid : how to use a column template so editor always available?

I am trying to create a grid that has a column where the editor is always available, so that editing the cell is a "one click" process. By this I mean rather than having to click on the cell to first switch to edit mode, and then select from the combo box, the user can straight away (using the mouse) click on the combobox down arrow to open it and select a value.

I thought I could do this using a column template (as opposed to editor) as follows...

function createComboTemplate(dataItem) {
   var tmpl = '<input style="width:100%" ' +
    'kendo-combo-box ' +
    'k-data-text-field="\'display\'" ' +
    'k-data-value-field="\'rego\'" ' +
    'k-data-source="getCarList()"' +
    'k-value="dataItem.rego"' +
    'k-on-change="handleDDLChange(kendoEvent, dataItem)"/>';

   return tmpl;
 }

Full code here

The above shows the combo box, however as soon as I click on it, the cell goes to a text edit field. So I thought that perhaps the cell going into edit mode was causing this, so I set the columns editable property to false , but this made no difference.

IF I set the whole grid's editable property to false, then when I click on the combo box, it stays there, however it is empty.

In this example, the combobox data source is via a function, I also tried setting directly to a global list object (incase it was the function call that was the problem), but this didn't work either.

So, I Have a couple of related questions here.

The first, is to do with the property names in the template. When I create a combobox in straight code, I have as follows (as in the above demo)

function createCombo(container, options, data) {
    var dataField = options.field.split('.');
    var fieldName = dataField[0];
    var input = $('<input/>')
    input.appendTo(container)
    input.kendoComboBox({
       autoBind: true,
       filter: "contains",
       placeholder: "select...",
       suggest: true,
       dataTextField: "display",
       dataValueField: "rego",
       dataSource: data,
       value: options.model[fieldName].rego,
       change: function (e) {
         var dataItem = this.dataItem();
         options.model[fieldName]['rego'] = dataItem.rego;
         options.model.set(fieldName + '.display', dataItem.display);
        }
     });
    }

So the above snippet has properties like "dataTextField", and "dataSource", etc, but when I created the template, from another example of templates I found, it seemed to use names like "k-data-text-field" and "k-data-source".

Is there any doco, or rules on how these field names map in the "markup" that is used in the templates (I could not find any)? It appear that the property names are prefixed with "k-data", and then the camelcase names converted to the "dash" syntax (similar to what angular does). IS this just the rules that we follow? If not then perhaps my problems are the syntax above is incorrect.

The other question is of course, what have I done wrong to cause the 2 problems

  1. The combobox disappears when I click on it (unless the whole, grid is set to non editable)

  2. Why the combo has no data

Or am I going about this the wrong way.

Thanks in advance for any help!

Upvotes: 1

Views: 3180

Answers (1)

Lars H&#246;ppner
Lars H&#246;ppner

Reputation: 18402

It appear that the property names are prefixed with "k-data", and then the camelcase names converted to the "dash" syntax (similar to what angular does). IS this just the rules that we follow?

Yes - the documentation is here.

The combobox disappears when I click on it (unless the whole, grid is set to non editable)

This is because the column is editable, so it gets replaced by the default editor. You can prevent this from happening using the technique I described here. I also used it in the demo.

Why the combo has no data

Your template doesn't work; it should be something like this:

  var tmpl = '<input style="width:100%" ' +
    'kendo-combo-box ' +
    'k-data-text-field="\'display\'" ' +
    'k-data-value-field="\'rego\'" ' +
    'k-data-source="dataItem.carSource"' +
    'k-value="dataItem.car.rego" />';

and for that to work, you need to give each data item a reference to the car data (you can't execute a function there, the template is evaluated against a kendo.data.Model instance).

(updated demo)

Upvotes: 2

Related Questions