kendo incell editable grid column template issues on tab navigation in Kendo UI for jQuery

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

kendo incell editable grid column template issues on tab navigation

10 Answers 240 Views

Grid

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

10 Answers, 1 is accepted

answered on 03 Sep 2018, 05:49 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

answered on 03 Sep 2018, 06:44 AM

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.

answered on 03 Sep 2018, 07:55 AM | edited on 29 Jul 2021, 04:15 PM

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.

answered on 04 Sep 2018, 06:40 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Accepted

answered on 05 Sep 2018, 06:37 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.