This is a migrated thread and some comments may be shown as answers.

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

3 Answers 59 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Arthur
Top achievements
Rank 1
Veteran
Iron
Arthur asked on 03 Jul 2020, 02:39 PM

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.

3 Answers, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 07 Jul 2020, 10:28 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Arthur
Top achievements
Rank 1
Veteran
Iron
answered on 08 Jul 2020, 11:26 AM

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.

0
Tsvetomir
Telerik team
answered on 10 Jul 2020, 08:50 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Arthur
Top achievements
Rank 1
Veteran
Iron
Answers by
Tsvetomir
Telerik team
Arthur
Top achievements
Rank 1
Veteran
Iron
Share this question
or