open row for edit by js code in batch mode

[Ali]

 hi
i have grid in batch mode in last textbox of row i wont if press Enter select next row and open it for edit .i use get_batchEditingManager().openRowForEdit
in another button it works good but in key press of textbox it doesn't work
what should i do?

[Angel Petrov]

Hi Ali,

Actually in order to make things work you should subscribe to the grid key press event since it will be fired first.

ASPX;

<ClientSettings>
                <ClientEvents OnKeyPress="keyPress" />
            </ClientSettings>

JavaScript:

function keyPress(sender,args) {
            if (args.get_keyCode() === 13) {
                args.set_cancel(true);
                args.get_domEvent().stopPropagation();
                args.get_domEvent().preventDefault();
                var row = sender.get_batchEditingManager().get_currentlyEditedRow();
                if (row.nextSibling) {
                    sender.get_batchEditingManager().openRowForEdit(row.nextSibling);
                }
            }
        }

When including the above code in the project the new next row will be opened for edit once the user presses enter inside an editor in the edited row.

Hope the example provided proves helpful.

Regards,
Angel Petrov
Telerik

 

 

[Ali]

thanks angel
but i have a problem i want do this function in last column and not in all of row i can handle it by a flag but i want another solution

and i check your code i comment this lines
args.set_cancel(true);
args.get_domEvent().stopPropagation();
args.get_domEvent().preventDefault();
and it works too but if call this function in keydown of textbox and clear event from grid event not work cloud you   explanation for me why

i sorry for my poor english

[Angel Petrov]

Hi Ali,

You can accomplish the desired goal by subscribing to the KeyPress event of the input element used as an editor instead of the grid. For example if the last column has a definition similar to this.

ASPX:

<telerik:GridTemplateColumn DataField="SomeField" HeaderStyle-Width="210px" HeaderText="SomeField" SortExpression="SomeField"
                       UniqueName="SomeField">
                       <ItemTemplate>
                            <%# Eval("SomeField") %>
                       </ItemTemplate>
                      <EditItemTemplate>
                          <telerik:RadTextBox runat="server" ID="SomeFieldTextBox" ClientEvents-OnKeyPress="keyPress"></telerik:RadTextBox>
                      </EditItemTemplate>
                   </telerik:GridTemplateColumn>

you can open the next row by calling the below provided JavaScript.

JavaScript:

function keyPress(sender, args) {
                if (args.get_keyCode() === 13) {
                    args.set_cancel(true);
                    args.get_domEvent().stopPropagation();
                    args.get_domEvent().preventDefault();
                    var grid = $find('<%=RadGrid1.ClientID%>');
                    var row = grid.get_batchEditingManager().get_currentlyEditedRow();
                    if (row.nextSibling) {
                        grid.get_batchEditingManager().openRowForEdit(row.nextSibling);
                    }
                }
            }

Note that the example uses a RadTextBox as an editor but you should be able to achieve the same effect using other editor types as well.

As for the executing the provided logic in the KeyDown event of the text box probably a JavaScript error is thrown which is breaking the logic. A possible reason for this is that the event is raised too early. If however the KeyPress event is used you should not experience any problems.

Regards,
Angel Petrov
Telerik

 

 

[Bunyamin]

Thanks for this code. But after next row grid cancel change before cell value. how can submit for changed cell value?

[Angel Petrov]

Hi Bunyamin,

The problem may be related to the fact that the provided code opens the new but the editors value changing events are not fired before the cell closes. Please try modifying the code as demonstrated below and let us know if this helps you resolve the issue.

ASPX:

<telerik:GridTemplateColumn DataField="SomeField" HeaderStyle-Width="210px" HeaderText="SomeField" SortExpression="SomeField"
                      UniqueName="SomeField">
                      <ItemTemplate>
                           <%# Eval("SomeField") %>
                      </ItemTemplate>
                     <EditItemTemplate>
                         <asp:TextBox runat="server" ID="SomeFieldTextBox"  onkeypress="keyPress(this,event);"></asp:TextBox>
                     </EditItemTemplate>
                  </telerik:GridTemplateColumn>

JavaScript:

function keyPress(sender, args) {
                if (args.keyCode === 13) {
                    args.stopPropagation();
                    args.preventDefault();
                    var grid = $find('<%=RadGrid1.ClientID%>');
                    var row = grid.get_batchEditingManager().get_currentlyEditedRow();
                    if (row.nextSibling) {
                        var nextRow = row.nextSibling;
                        grid.get_batchEditingManager()._tryCloseEdits(document.body);
                        setTimeout(function myfunction() {
                            grid.get_batchEditingManager().openRowForEdit(nextRow);
                        }, 10);
                    }
                }
            }

Regards,
Angel Petrov
Telerik

 

 

[Ali]

hi angel
thank  you for your answer
I have problem like Bunyamin I lose my value and  your code don't work for me
what should i do?

[Eyup]

Hello Ali,

You can add the following script on your page to make the Enter key to function just as Tab:

Copy Code

Copy Code

Telerik.Web.UI.GridBatchEditing.prototype._handleKeyboardNavigationOrg =
    Telerik.Web.UI.GridBatchEditing.prototype._handleKeyboardNavigation;
Telerik.Web.UI.GridBatchEditing.prototype._handleKeyboardNavigation = function (e) {
    if (e.keyCode == 13) {
        e.keyCode = 9;
    }
    this._handleKeyboardNavigationOrg(e);
};

Hope this helps.

Regards,
Eyup
Telerik

 

 

[Andy]

Hi,

I'm trying to get the same functionality, but for some reason when I call openRowForEdit of batchEditingManager, it throws exception

ScriptResource.axd?d=NTwIlNkcPTCNaLryRlXgiipyAr_jUOonE04EQqz7c4MCDcI8IH9FX0KACOcLfjX5pPJjrvXzFX87JF…:235 Uncaught TypeError: Cannot read property '_data' of undefined

Here is the js code, and exception is thrown on v._data._batchEditingSettings.highlightDeletedRows

openRowForEdit:function(u,w){var x=this;
var o;
var n;
var q;
var r;
var s=null;
var p;
var v;
if(typeof u==="string"){u=$get(u);
}if(b.DomElement.containsCssClass(u,g)){return;
}if(x._currentlyEditedRow===u||(u.className.indexOf("rgRow")===-1&&u.className.indexOf("rgAltRow")===-1)){return true;
}if(!x._validate()){return true;
}o=u.children;
for(var t=0;
t<o.length;
t++){n=o[t];
if(!s){q=x._getCellDataToOpenEdit(n);
}if(q){v=q.tableView;
p=x._getColumn(v,n);
if(p&&p.Display&&v._isColumnEditable(p,u)){q.cell=n;
q.column=p;
r=x._openCellInEditMode(q);
if(!s||n===w){s=r;
}}}}if(s){x._focusControl(s);
x._currentlyEditedRow=u;
x._hideValidators();
}if(v._data._batchEditingSettings.highlightDeletedRows){x._adjustBatchDeletedRows();
}return true;
}

 

Thanks!

[Andy]

Ok, actually found a way around myself, maybe it'll help somebody. The idea is to trigger click event on the cell you want to switch to. Here's javascript function which is called from keyDown handler. 

It takes two arguments:

step - index of next row to edit relative to the current row. so if you need to set into edit mode the next row after current row, step is 1, if next row above current it should be (-1)

cellName - unique column name of cell which will get focus.

 

          function switchRow(step, cellName)
          {
              var grid = $find('<%=gvSales.ClientID%>');
                  var masterView = grid.get_masterTableView();
                  var currentRow = masterView.get_selectedItems()[0];
                  if (currentRow) {
                      var rowIndex = currentRow.get_itemIndex();
                      var nextRow = masterView.get_dataItems()[rowIndex + step];
                      if (nextRow) {
                          var cell = nextRow.get_cell(cellName);
                          $(cell).trigger("click");
                      }
                  }
          }