kendo incell editable grid column template issues on tab navigation

[Paulraj]

Hi,

I am using kendo v2018.1.221. I have column template in kendo incell editable grid. On keyboard navigation the template column changes and doesn't persist the template on focusing of the cell. I wanted to keep the column template as it is on navigation event. I couldn't skip the cell since i have some calculations based on the changed value. 

I have created the sample in this below url, 

https://dojo.telerik.com/AxUyacus

Unit Price column contains the template on load of the screen but it changes to normal input box on navigation event.

[Stefan]

Hello, Paulraj,

Thank you for the example.

I noticed that the template is making an input using some of the NumericTextBox attributes. Please have in mind that this is a visual template that is used only for representing the data. When the data should be editable, the editor has to be used when the cell is clicked.

Could you please share the desired end result, so we can suggest the recommended approach to achieve it. The current approach is interfering with the Grid internal logic as its "presentation" mode is used with a custom editor.

I will be expecting the additional details and gladly assist further.

Regards,
Stefan
Progress Telerik

[Paulraj]

Hi Stefan,

Thanks for your reply. I have applied numerictextbox attributes inside column template because i wanted to always display the input box on grid loading and similarly i wanted to display dropdownbox and checkboxes sometimes. 

If i dont apply the column templates and use editor feature, when i try to use grid's addrow method to create new row, then grid's dirty fields are lost their changes. I wanted to retain the changes of the grid before creating new row. My desired end results are,

* Grid should always display the editable input textboxes (and/or dropdownbox, combobox, checkboxes).

* When i use addrow method to create new row, the dirty fields should not loose its changes.

I have tried below forum posts to fix the issues but didnt help.

https://www.telerik.com/forums/inserting-rows-to-grid-does-not-set-the-dirty-flag-to-true

https://www.telerik.com/forums/grid-editing-issue-with-template-columns

Thanks.

[Stefan]

Hello, Paulraj,

Thank you for the clarification.

If the desired result is to have aways visible editors and to handle the binding programmatically. I can suggest setting the column editable to false, to ensure that both editings will not create a conflict:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.editable

https://dojo.telerik.com/AxUyacus/2

Regards,
Stefan
Progress Telerik

[Paulraj]

Hi Stefan,

The grid looks fine, but still it doesn't solve my issues. 

* The navigation event doesn't focus on the input box (Unit price) rather it focuses on the td element.

* Grid is rebinding on change of the input field (I agree since the datasource needs to be updated), but how do i focus on the next element post rebind of the grid from editable field. Right now onchange of the input loses its focus to next element and the focus goes to start cell of the grid. 

Any fixes for this ?

Thanks.

[Stefan]

Hello, Paulraj,

Both issues will require an additional code to be resolved.

1) The navigation event doesn't focus on the input box (Unit price) rather it focuses on the td element. - This will require attaching an event listener to the td element on the dataBound event. Once the element is focused, the input inside has to be programmatically clicked(focused).

2) The reference to the current edit cell has to be saved and on re-bind to be focused again. This will be required keeping the row and column index of the cell and setting that cell in edit once the Grid is rebound.

I do understand that this requires additional code, but the Grid has a built-in edit mode, and combining the built-in editing with a custom edit requires a lot of additional code as the developer has to handle all of the cases that are internally handled by the Grid.

If you need more details on this, we will be happy to assist.


Regards,
Stefan
Progress Telerik

[Paulraj]

Hi Stefan,

Thanks for the response. Since the above conditions are required for my requirement, Can you provide me with some examples achieving this ?

 

[Stefan]

Hello, Paulraj,

I looked at the example and try to make modifications in order to cover the listed requirements:

1) The editor is a client template, that will stay after tab. I noticed that the editor is bound in the dataBound event. If the same logic is used on the cellClose event than the editor will stay after tab.

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/cellclose

cellClose: function() {
  var rows = this.tbody.children();
  var dataItems = this.dataSource.view();
  setTimeout(function(e){
    for (var i = 0; i < dataItems.length; i++)  {
      kendo.bind(rows[i], dataItems[i]);
    }
  })
}

2) Tap to the next cell instead of the first - as we know which column has the editor, we automatically know the cell index. We can take the row index by attaching an event listener on the input. Then on the dataBound event, we set the next cell in edit using the editCell method based on the index:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/editcell

dataBound: function(e) {
  var rows = this.tbody.children();
  var dataItems = this.dataSource.view();

  for (var i = 0; i < dataItems.length; i++)  {
    kendo.bind(rows[i], dataItems[i]);
  }

  if(isUnitPriceEdited){
    var cell = $("tr:eq(" +(currentRowIndex + 1) +") td:eq(" + currentCellIndex +")")
    isUnitPriceEdited = false
    setTimeout(function(e){
      $(cell).click()
    })
  }
},

This is the full example:

https://dojo.telerik.com/AxUyacus/11

Please have in mind that this is an additional functionality, which may behave differently in the real application.

If you need further assistance in implementing this in the application I can recommend our Professional Service team as they can assist with making the feature to work in the exact real case as required:

https://www.progress.com/services/outsourcing/feature-customization

Regards,
Stefan
Progress Telerik

[Paulraj]

Hi Stefan,

Thanks for the examples. I will try implementing the same in my application. One last question, How do i remove spinners in the editable numerictextbox cell upon editing ?

[Stefan]

Hello, Paulraj,

In order to remove the spinner or change any of the options of the NumericTextBox a custom editor has to be used as this allows changing the editor widget options:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.editor

The editor has to be made a NumericTextBox with the spinners option set to false.

Regards,
Stefan
Progress Telerik

[Paulraj]

Hi Stefan,

I will try this. Thanks.