tabbing to new row goes to first required field

[Alex]

Using this as a template: http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/add-row-when-tabbed-out-of-last-row

I have made it so I can tab into the next row. But I noticed that it will always select the first required column based on data annotation, instead of the first column. Is this by design, or is there a way to set it to so that it goes to the first column always?

[Viktor Tachev]

Hi Alex,

I tested the behavior in the sample and noticed that the second in the new row was edited initially. The reason for that is that the Tab key press executed at the same time as adding the new row.

Please check out the modified sample below that works as expected on my end. It opens the first cell in the new row by default. Let me know how it works for you.

• http://dojo.telerik.com/OPuGe

Regards,
Viktor Tachev
Telerik by Progress

[Alex]

I made a small change so that it only goes to the next row when you hit Enter or Tab, as I want them to be able to enter a value in the last column. But, when I tab to the new row the value is lost and just reverts to the default value (Today's date).

Do I need to somehow save the data before I create the new row or something?

 

 

[Marin]

Hello,

No, saving data prior to creating a new row is not necessary.
Can you share in a dojo example the small change that you made so we can investigate the problem on our side? I'm not able to replicate the issue in this dojo: http://dojo.telerik.com/OPuGe

Regards,
Marin
Telerik by Progress

[Alex]

I updated the example(below) so that it only goes to the next line if you press enter or tab. If while in the last column, you change the default data, and then press tab or enter, or will just use the default value for the last column.

http://dojo.telerik.com/ucaNA

[Marin]

Hello,

The data is saved automatically but it happens on the blur event of the input editor. So if you call grid.addRow() before the blur is triggered the editor will not have a chance to persist the new value.
That's why I would suggest calling .addRow on blur of the input editor to see if this will improve the behavior and bring the desired result.

Regards,
Marin
Telerik by Progress

[Alex]

Is there a blur event for just the cell? I don't have any direct access to the editor control for that specific cell.

[Marin]

Hi,

You can use the edit event which gives access to the cell (in e.container) from where you can access the editor:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-edit

Regards,
Marin
Telerik by Progress

[Alex]

I don't think that helps me too much, because even with access to the cell, which I did have before, but in an indirect way I don't know how to attach the event to the editor via the cell, unless I know exactly what kind of editor I'm looking for.

I want to do something like

 

cell.editor.on('blur',function(e){
    grid.addRow();
});

 

But the editor might be a textbox, it might be a numeric editor, or any other type of kendo control. IS there a way to just get whatever editor is there and attach the event without knowing exactly what I'm looking for?

[Marin]

Hello,

I'm afraid there is no universal way to attach the blur event to any kind of editor.
All kendo widgets do expose a common API providing access to the HTML element on which the widget is built, so you can use this a starting point to attach the event.
http://docs.telerik.com/kendo-ui/intro/widget-basics/wrapper-element

Regards,
Marin
Telerik by Progress

[Alex]

I've decided to just brute force this (try getting the editor for every single type of kendo control I might have on the grid, i.e. textbox, numeric textbox, dropdown, etc), but still need your help:

 

I want to do something like

var cell = $(e.target).closest('td');
var numericTextBox = cell.data("kendoNumericTextBox");

var winElement4 = cell.element;
var winWrapper2 = cell.wrapper; // returns div.k-window as a jQuery object

var cell2 = $(e.target).closest('td.k-widget');
var numericTextBox = cell2.data("kendoNumericTextBox");


numericTextBox.bind("blur", function(e){
    alert("happening")
});

 

but trying to use the kendo javascript objects just shows as undefined. Is there something I'm doing wrong

[Marin]

Hello,

You have to access the correct element for which the widget is initialized - normally it has a name attribute with the name of the column and a specific role attribute (for example role="numerictextbox", name="UnitPrice"). This is an inner input element inside the .k-widget span. If you call .data("kendoNumericTextBox") on this input element you will get the correct widget instance.

Regards,
Marin
Telerik by Progress

[Alex]

the blur event is never firing. I tab to the last column, change the value there and try tabbing off and it just never tabs off.

http://dojo.telerik.com/OMIKO

Can you please provide a working sample of how I can make an edit in the last column, tab off of it, create a new line and save my changes. I feel this is a reasonable request.

[Marin]

Hi,

Instead of calling
  e.preventDefault();
          e.stopPropagation();

which also prevents the keypress event of the grid to fire properly and save the current entered value (which causes the issue)

We can simply call addRow with a timeout to resolve the problem:
setTimeout(function () {
grid.addRow();
}, 0);

Here is the dojo: http://dojo.telerik.com/ulOdU

Regards,
Marin
Telerik by Progress