Dialog box - add/edit records in grid

[Pratheep]

Hi

open dialog box select customer and fill txtcustomer  after that  add / edit  OrdersGrid (main grid) records

 

Issue is

after add /edit records Ordergrid  not display in the page but Dialogbox displaying (no need to show Dialogbox  in page)

 

<input type="text" class="form-control" id="txtcustomer" runat="server" readonly="true" style="background-color: #fff;" placeholder="customer here" />

  <button id="btn" type="button" class="btn btn-info">...</button>

 

 

          <ej:Dialog ID="Dialog" ClientIDMode="Static" ClientSideOnBeforeOpen="open"  ActionButtons="close,search" ShowOnInit="false" EnableModal="true" Target="#OrdersGrid" runat="server" Title="SearchGrid">

                       

                        <DialogContent>

                            <ej:Grid ID="PopupGrid" runat="server"  ClientIDMode="Static" >

                                <PageSettings PageSize="3" />

                                <Columns>

                                    <ej:Column Field="CustomerName" HeaderText="Customer name" />

                                    <ej:Column Field="CustomerCode" HeaderText="Customer ID">

                              

                            </ej:Column>

                                </Columns>

                                <ClientSideEvents RowSelected="rowSelected" />

                                 <ToolbarSettings ShowToolbar="True" ToolbarItems="search"></ToolbarSettings>

                            </ej:Grid>

                        </DialogContent>

                    </ej:Dialog>

 

             $("#btn").ejButton({

                    text: "...",

                    click: function (args) {

                        $("#Dialog").ejDialog("open");

                    }

                })

 

 

   function open(args) {

                $("#PopupGrid").ejGrid({ allowPaging: true });

            }

            function rowSelected(args) {

                $("#ContentPlaceHolder1_txtcustomer").val(args.data.CustomerName).text(args.data.CustomerName);

                $("#Dialog").ejDialog("close");

            }

Thanks
Pratheep

Attachment: WebApplication1_cc36928f.rar

[Mani Sankar Durai]

Hi Pratheep, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and found the root cause of an issue. The main cause of an issue is, in your application you have closed the PopUpGrid dialog and maintain the selected value in the text box in the RowSelected event of grid which is inside the dialog.  

Initially it works properly but if you select any record in the PopUpGrid and perform any CRUD operation (Add, Update, Delete) in the main grid then the entire page get refreshed. While refreshing the entire page the selectedRowIndex of the PopUpGrid is not cleared, so again the RowSelected event of PopUpGrid is triggered and in that you have tried to close the dialog but JQuery plugin was not created for dialog (i.e. not rendered) and throws script error. 

To avoid this we suggest you to clear the selection before the dialog gets closed using clearSelection method in grid. 

Please refer the below code example. 

function rowSelected(args) { 

$("#ContentPlaceHolder1_txtcustomer").val(args.data.CustomerName).text(args.data.CustomerName); 

                var gridObj = $("#PopupGrid").data("ejGrid"); 

 

                gridObj.clearSelection(args.rowIndex); 

                        $("#Dialog").ejDialog("close"); 

            } 

If you need to maintain the selection for the PopUpGrid after add, edit or delete operation please refer the below suggestion instead of using clearSelection method. 

function rowSelected(args) { 

                if ($("#Dialog").data("ejDialog") ){ 

                    $("#Dialog").ejDialog("close"); 

                } 

            } 

From the above code example you can maintain the selection which is performed for PopupGrid. Also we suggest you to render the OrdersGrid before the Dialog rendering in view page. 

We have also modified your sample that can be downloaded from the below link. 

Link: http://www.syncfusion.com/downloads/support/forum/127505/ze/WebApplication11501777008 

 

Please refer the documentation link to know about clearSelection method in grid. 

Link: https://help.syncfusion.com/api/js/ejgrid#methods:clearselection 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai. 

[Pratheep]

Hi Manisankar Durai.

Thank you for your support.Working fine but another issue

After add/edit /delete OrdersGrid records

if apply Triggers 

 

            <Triggers>

                <asp:AsyncPostBackTrigger ControlID="OrdersGrid" />

            </Triggers>

open Dialog customer search grid (PopupGrid) customer details not showing  there



if not apply Triggers working fine but every time page is refreshing.

Thanks
Pratheep
 

Attachment: WebApplication1_589fb2d7.rar

[Mani Sankar Durai]

Hi Pratheep, 

We have checked the provided sample and modified the sample to achieve your requirement. Please downloaded the modified sample from the below link. 

Link: http://www.syncfusion.com/downloads/support/forum/127505/ze/WebApplication1-50805977 

In the above sample we have rendered the dialog which contains grid outside the update panel. Since you have prevented the post back only for OrdersGrid. So it is enough to maintain the main grid alone within the update panel. 

 

Also it is not necessary to call again the datasource for PopupGrid (rendered inside the dialog) in server side again if post back occurs while performing CRUD operation in main Grid. 

 

Please refer the below code example. 

[frmship.aspx] 

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 

                            <ej:Grid ID="OrdersGrid" ClientIDMode="Static" runat="server" AllowPaging="True" AllowFiltering="false" OnServerEditRow="EditEvents_ServerEditRow" 

                    OnServerAddRow="EditEvents_ServerAddRow" OnServerDeleteRow="EditEvents_ServerDeleteRow"> 

                        ... 

         <Triggers> 

                <asp:AsyncPostBackTrigger ControlID="OrdersGrid" /> 

            </Triggers> 

 

        </asp:UpdatePanel> 

 

         <ej:Dialog ID="Dialog" ClientIDMode="Static" ClientSideOnBeforeOpen="open" ActionButtons="close,search" ShowOnInit="false" EnableModal="true" runat="server" Title="SearchGrid"> 

                <DialogContent> 

                    <ej:Grid ID="PopupGrid" runat="server" ClientIDMode="Static"> 

                        ... 

                    </ej:Grid> 

                </DialogContent> 

            </ej:Dialog> 

 

[frmship.aspx.cs] 

 

  protected void Page_Load(object sender, EventArgs e) 

        { 

             

               if(!IsPostBack) BindcustomerSource();   //DataSource for PopupGrid 

                BindDataSource(); 

                BindshipSource(); 

            

            Session["DialogDataSource"] = order; 

        } 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai. 

[Pratheep]

Hi Manisankar Durai.

Thank you for your support.Working fine.

Thanks
Pratheep

[Mani Sankar Durai]

Hi Pratheep, 

Thanks for you feedback. 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai.