I am using a WebGrid with EnableF2="False" and EnableOnKeyPress="True".
I have users that need to type values on rows of some colum in a WebGrid.
Is there a way for the user to type a value in a cell and then just pressing downArrow key, move the focus to the cell below, saving the data?
With the settings I am using now, after typying the value, I have to press ENTER and only after that I can press downArrow to move the focus.
I do not want to press ENTER, I just want to press downArrow key.
You can see this behavior at this link:
http://wijmo.com/demo/explore/?widget=Grid&sample=Editing
Try to change the value of DISCOUNT column and then press downArrow, note that the value is saved and the focus moved to the cell below,
Another nice issue is: try to click in the QUANTITY HEADER, note that the focus moves to the first cell
Is there a way to have these behaviors using WEBGRID?
Thanks!
Edson
Hello Edson,
Thank you for posting in our forum.
Are you using the UltraWebGrid controls or the WebDataGrid one?
Generally the two properties you’ve set seems to be from the WebDataGrid’s CellEditing behavior under the EditModeActions so I presume that the control you’re using.
Generally the grid would keep the focus inside the cell by default until you hit enter or click on another cell. You could add some custom logic to handle the cases when the key up or down have been hit and manually change the cell that’s in edit mode. For example:
function WebDataGrid1_Grid_KeyUp(sender, eventArgs)
{
if (eventArgs.get_browserEvent().keyCode == "40") {
//down
var cellEditing = sender.get_behaviors().get_editingCore().get_behaviors().get_cellEditing();
var currentCell=cellEditing.get_cellInEditMode();
var rowInd=currentCell.get_row().get_index()+1;
cellEditing.exitEditMode(true);
if (rowInd < sender.get_rows().get_length()) {
var nextCell = sender.get_rows().get_row(rowInd).get_cell(currentCell.get_index());
cellEditing.enterEditMode(nextCell);
}
if (eventArgs.get_browserEvent().keyCode == "38") {
//up
var currentCell = cellEditing.get_cellInEditMode();
var rowInd = currentCell.get_row().get_index() - 1;
if (rowInd > 0) {
Let me know if that would work for your scenario.
Best Regards,
Maya Kirova
Developer Support Engineer II
Infragistics, Inc.
http://ko.infragistics.com/support
Maya,
Thanks for your reply!
I am using WebGrid Infragistics4.Web.v12.2, Version=12.2.20122.2054 downloaded a month ago for trial.
The event is not firing when the cell is in edit mode.
It's only firing when I navigate through the grid with up and down keys.
I have two columns Int32 type and I disabled the spin function in the first one, setting SpinDelta=0 just for testing.
In the first column with spin disabled the up and down keys are not working, nothing happens.
In the second column the up and down keys only changes the values of the cell according to SpinDelta.
Check if these informations are useful to find a solution.
Regards,
Hello ,
I’m just following up to see if you’ve been able to resolve your issue. If you have any questions or concerns or if you need further assistance please let me know.
Developer Support Engineer
The element is found by its client id. If the grid is nested in other container controls it’s possible that isn’t its client id.
You could get the client id dynamically for example:
var grid = $find("<%=WebDataGrid1.ClientID%>");
Let me know if that helps.
Yes, I am using the Numeric Editor like you said.
I put the code you sent, but the var grid is setting with a null value.
I am sure the WebDataGRid ID is correct, in my case the ID is "WebDataGridNotas".
What do you think can be wrong?
Are you setting an editor providers for those columns?
I presume you have a NumericEditorProvider in those columns. When you have editors their keydown events will be fired instead of the grid’s one so you could apply the same logic in the editor’s keydown events to handle the navigation. For example add an event handler for the editor’s keyup event:
<ig:NumericEditorProvider ID="numericEditor">
<EditorControl SpinDelta="0">
<ClientEvents KeyUp="Editor_KeyUp" />
</EditorControl>
</ig:NumericEditorProvider>
And apply the same logic:
function Editor_KeyUp(sender, eventArgs) {
var grid = $find("WebDataGrid1");
var cellEditing = grid.get_behaviors().get_editingCore().get_behaviors().get_cellEditing();
var rowInd = currentCell.get_row().get_index() + 1;
if (rowInd < grid.get_rows().get_length()) {
var nextCell = grid.get_rows().get_row(rowInd).get_cell(currentCell.get_index());
if (rowInd >= 0) {
Let me know if you have any questions.