open row for edit by js code in batch mode

10 posts, 0 answers
  1. Ali
    Ali avatar
    21 posts
    Member since:
    Jan 2014

    Posted 24 Jun 2014 Link to this post

     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?
  2. Angel Petrov
    Admin
    Angel Petrov avatar
    1006 posts

    Posted 26 Jun 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ali
    Ali avatar
    21 posts
    Member since:
    Jan 2014

    Posted 29 Jun 2014 Link to this post

    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
  5. Angel Petrov
    Admin
    Angel Petrov avatar
    1006 posts

    Posted 02 Jul 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Bunyamin
    Bunyamin avatar
    3 posts
    Member since:
    Jul 2013

    Posted 05 Jul 2014 in reply to Angel Petrov Link to this post

    Thanks for this code. But after next row grid cancel change before cell value. how can submit for changed cell value?
  7. Angel Petrov
    Admin
    Angel Petrov avatar
    1006 posts

    Posted 10 Jul 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Ali
    Ali avatar
    21 posts
    Member since:
    Jan 2014

    Posted 09 Oct 2014 Link to this post

    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?
  9. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 13 Oct 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  10. Andy
    Andy avatar
    54 posts
    Member since:
    Jun 2009

    Posted 30 Jun Link to this post

    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!

  11. Andy
    Andy avatar
    54 posts
    Member since:
    Jun 2009

    Posted 02 Jul Link to this post

    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");
                          }
                      }
              }

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017