How to edit the value of an <input> without the native editor

[Arthur]

I have a grid which has three columns:

• The first one is just text, not editable.
• The second one is an <input>, should be editable.
• The third one is a kendoDropDownList, should be editable.

My dataSource, with the two fields I want to be editable marked as such:

var dataSource = new kendo.data.DataSource({
  // Omitted for brevity
  schema: {
    model: {
      id: 'row',
      fields: {
        row: { type: 'number', editable: false },
        type: { type: 'number', editable: false },
        description: { type: 'string', editable: false }, // First column
        quantity: { type: 'number', editable: true }, // Second column
        reason: { type: 'number', editable: true } // Third column
      }
    }
  }
});

My kendoGrid, with editable: 'incell':

$('#grid').kendoGrid({
  dataSource: dataSource,
  editable: 'incell',
  columns: [
    {
      title: 'Description',
      field: 'description'
    },
    {
      title: 'Quantity',
      field: 'quantity',
      editable: function (e) { return false; },
      template: '<input type="text" id="quantity_#= row #" class="k-textbox" value="#= quantity #" />'
    },
    {
      title: 'Reason',
      field: 'reason',
      editable: function (e) { return false; },
      template: '<select id="reason_#= row #" name="reason_#= row #" class="reasoncombo" />'
    }
  ]
  // Omitted for brevity
});

I set editable: function (e) { return false; } to both columns I want to edit so it doesn't use the native editor. 

The documentation reads The JavaScript function executed when the cell/row is about to be opened for edit. The result returned will determine whether an editor for the column will be created.

Now my issue is whenever I change the value of an <input> or select another value from a kendoDropDownList, those fields are not updated and marked as dirty in the dataSource.

I even tried to add `data-bind:"value:quantity"` to the template of my <input>, no luck.

Here is a working fiddle for test purposes.

Is there a way to edit fields without the native editor?

PS: I should add that if I change editable: function (e) { return false; } to return true instead, my <input> and kendoDropDownList get changed to the native editor when clicked and changing values in the editor works just fine, though this is not what I want.

[Tsvetomir]

Hi Arthur,

Thank you for the provided example. I have modified it accordingly - it is correct that you should use the data-bind attribute. However, you should do the actual binding explicitly in the DataBound event handler.

https://dojo.telerik.com/ahoYaVId

I have noticed that you are setting the data source of the DropDownList every time the mouseenter event is triggered. This is not a suitable event for setting the data source as it will be triggered very frequently. If you select an item you will notice that the correct value will be bound to the data item. However, the data source of the DropDownList will get changed and the actual selected value will not be present.

 

Regards,
Tsvetomir
Progress Telerik

[Arthur]

Hi Tsvetomir,

That's what I ended up doing, here is the new fiddle. I also changed the way the combos are populated.

Thanks for your answer.

[Tsvetomir]

Hi Arthur,

Thank you for sharing the updated sample that has resolved your case. Indeed, for the second column, you can initialize a NumericTextBox in the DataBound event handler. So that you get built-in validation and a better visual appearance than the plain textbox.

If you have any additional questions, let me know.

 

Kind regards,
Tsvetomir
Progress Telerik