Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
235
How to use Row Editing Template to add new row.
posted

I have a RowEditingTemplate that is being used to edit the row. How can I use the same templte to add a row?

I've checked http://forums.infragistics.com/forums/p/60144/305361.aspx#305361 but that solution requires commiting the record first.

I need to display the RowEditingTemplate when the user wants to add new row and based on OK buttion of the RowEditingTemplate commit the record.

 

 

 

  • 49378
    posted

    Hi akhavany,

    Thank you for posting in the community.

    I am attaching a sample demonstrating how the Row editing template may be used for adding new rows in the grid by handling the template closed event of the template along with displaying the RET upon clicking on the AddRow selector. Below is the relevant javascript code used:

    Code Snippet
    1. function WebDataGrid1_RowEditing_TemplateClosed(sender, eventArgs)
    2. {
    3.     ///<summary>
    4.     ///
    5.     ///</summary>
    6.     ///<param name="sender" type="Infragistics.Web.UI.WebDataGrid"></param>
    7.     ///<param name="eventArgs" type="Infragistics.Web.UI.EditRowEventArgs"></param>
    8.  
    9.     //check if the row to be updated is the new row (always returns index of -1)
    10.     if (eventArgs.get_row().get_index() == -1) {
    11.         ig_controls.WebDataGrid1.get_behaviors().get_editingCore().get_behaviors().get_rowAdding()._commitRow();
    12.         //Add code to handle your event here.
    13.     }
    14. }
    15.  
    16.  
    17. function WebDataGrid1_Grid_Click(sender, eventArgs)
    18. {
    19.     ///<summary>
    20.     ///
    21.     ///</summary>
    22.     ///<param name="sender" type="Infragistics.Web.UI.WebDataGrid"></param>
    23.     ///<param name="eventArgs" type="Infragistics.Web.UI.ItemEventArgs"></param>
    24.  
    25.     //check if the clicked item is the AddRow selector
    26.     if ((eventArgs.get_item().get_index() != null) && (eventArgs.get_item().get_index()==-1)) {
    27.         //debugger;
    28.         var RET = ig_controls.WebDataGrid1.get_behaviors().get_editingCore().get_behaviors().get_rowEditingTemplate();
    29.         RET.enterEditMode(eventArgs.get_item());
    30.  
    31.     }
    32.  
    33. }

    Please let me know if this helps.

    • 235
      posted in reply to [Infragistics] Petar Ivanov

      Thank you very much. Works perfectly.

      On a separate note, it seems most of the older sample links in Infragistics.com are broken.

      For example

      https://www.infragistics.com/samples/aspnet/data-grid/dropdown-editors

      Whishc is refered to in:

      http://community.infragistics.com/forums/p/43644/265048.aspx

      • 5
        posted in reply to [Infragistics] Petar Ivanov

        Hi Peter,

        We have used the solution offered by you for WHDG. The popup came when we click on the Add Button, but if we do anything on the page like scrolling, etc the pop up disappears.

        We have added the RowClick event & added the following code there...

        function UltraWebGrid1_Click(sender, eventArgs) {
        if ((eventArgs.get_item().get_index() != null) && (eventArgs.get_item().get_index() == -1)) {
        //debugger;
        // var RET1 = $get('<%=UltraWebGrid1.GridView.ClientID%>').get_behaviors().get_editingCore().get_behaviors().get_rowEditingTemplate();
        var RET = ig_controls.ctl00_ContentPlaceHolder1_UltraWebGrid1_ctl00.get_behaviors().get_editingCore().get_behaviors().get_rowEditingTemplate();
        // var RET = $get('<%=UltraWebGrid1.GridView.Behaviors.EditingCore.Behaviors.RowEditTemplate%>');
        RET.enterEditMode(eventArgs.get_item());

        }
        }

        Any help on this is highly appreciated.

        • 49378
          posted in reply to Yousef

          Hi akhavany,

          Thank you for your reply.

          If you have any further questions regarding this matter, please feel free to contact me.

          • 235
            posted in reply to [Infragistics] Petar Ivanov

            Thank You very much. Very helpful.

            • 49378
              posted in reply to [Infragistics] Petar Ivanov

              Hi akhavany,

              Please feel free to contact me if you have any further questions regarding this matter.

              • 49378
                posted in reply to Yousef

                Hi akhavany,

                Thank you for your reply.

                Disabling the rowAdding behavior in this scenario would be impractical as the RowEditingTemplate needs to be displayed for an existing grid row object. I have therefore created a small sample illustrating how the adding row may be hidden through CSS (note that the footing area would still be visible) and how a new row may be added using a button and the template. When the adding button is clicked, it accesses the adding row object through the grid behaviors.

                Please let me know if you have any questions.

                WebDataGridRowAddingTemplate.zip
            • 49378
              posted

              Hi akhavany,

              Thank you for posting in the community.

              I am attaching a sample demonstrating how the Row editing template may be used for adding new rows in the grid by handling the template closed event of the template along with displaying the RET upon clicking on the AddRow selector. Below is the relevant javascript code used:

              Code Snippet
              1. function WebDataGrid1_RowEditing_TemplateClosed(sender, eventArgs)
              2. {
              3.     ///<summary>
              4.     ///
              5.     ///</summary>
              6.     ///<param name="sender" type="Infragistics.Web.UI.WebDataGrid"></param>
              7.     ///<param name="eventArgs" type="Infragistics.Web.UI.EditRowEventArgs"></param>
              8.  
              9.     //check if the row to be updated is the new row (always returns index of -1)
              10.     if (eventArgs.get_row().get_index() == -1) {
              11.         ig_controls.WebDataGrid1.get_behaviors().get_editingCore().get_behaviors().get_rowAdding()._commitRow();
              12.         //Add code to handle your event here.
              13.     }
              14. }
              15.  
              16.  
              17. function WebDataGrid1_Grid_Click(sender, eventArgs)
              18. {
              19.     ///<summary>
              20.     ///
              21.     ///</summary>
              22.     ///<param name="sender" type="Infragistics.Web.UI.WebDataGrid"></param>
              23.     ///<param name="eventArgs" type="Infragistics.Web.UI.ItemEventArgs"></param>
              24.  
              25.     //check if the clicked item is the AddRow selector
              26.     if ((eventArgs.get_item().get_index() != null) && (eventArgs.get_item().get_index()==-1)) {
              27.         //debugger;
              28.         var RET = ig_controls.WebDataGrid1.get_behaviors().get_editingCore().get_behaviors().get_rowEditingTemplate();
              29.         RET.enterEditMode(eventArgs.get_item());
              30.  
              31.     }
              32.  
              33. }

              Please let me know if this helps.

              WebDataGridShowRowAddTemplate.zip