I am using a kendoDropDownList in cell edit mode. User can select the value of the drop down list through keyboard. When they press Enter, the new value is saved back to the dataSource.
From here, two things I am trying to do. One is additional keyboard support for using left and right arrow to submit the new value too. Another one is pressing a key to cycle through all options begin with that key.
Eg. if it's a list about cities in U.S., pressing C will select Cleveland, pressing C again will select Colorado Springs etc.
What I done is hook up a downDown event to the kendoDropDownList during the grid edit event handler.
In the event handler, I figured out the next value to select, then I ran a problem. I don't know how to get this value saved back to the dataSource. I tried a couple of ways like.
In the debugging, I can see kendroDropDownList.value() does give me the newValue. But that is just changed at the drop down list, the underlying dataSource is not changed. so when I do grid.closeCell(), or grid.SaveRow(), the old value is populated back to the drop down list.
There must be a step in between that will make the grid commit changes to its dataSource, please help.
Thank you
From here, two things I am trying to do. One is additional keyboard support for using left and right arrow to submit the new value too. Another one is pressing a key to cycle through all options begin with that key.
Eg. if it's a list about cities in U.S., pressing C will select Cleveland, pressing C again will select Colorado Springs etc.
What I done is hook up a downDown event to the kendoDropDownList during the grid edit event handler.
edit:
function
(e) {
var
input = e.container.find(
'input'
);
var
currentValue = input.val();
if
(e.container.find(
'.k-dropdown'
).length > 0) {
input = e.container.find(
'.k-dropdown'
);
currentValue = e.container.find(
'.k-input'
).text();
}
input.off(
'keydown'
, handleKeyDown);
input.on(
'keydown'
,
null
, { input: input, value: currentValue, isDropDownList: (e.container.find(
'.k-dropdown'
).length > 0) }, handleKeyDown);
},
$(el).find(
'input'
).data(
'kendoDropDownList'
).select(selectedIndex + 1);
$(el).find(
'input'
).data(
'kendoDropDownList'
).value(newValue);
$(el[0]).find(
".k-input"
).text(newValue);
There must be a step in between that will make the grid commit changes to its dataSource, please help.
Thank you