We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Dialog box - add/edit records in grid

Thread ID:

Created:

Updated:

Platform:

Replies:

127505 Nov 20,2016 06:53 PM UTC Nov 25,2016 03:43 AM UTC ASP.NET Web Forms 5
loading
Tags: Grid
Pratheep
Asked On November 20, 2016 06:53 PM UTC

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 [Syncfusion]
Replied On November 21, 2016 01:02 PM UTC

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. 
 

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

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


Pratheep
Replied On November 22, 2016 05:04 AM UTC

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 [Syncfusion]
Replied On November 23, 2016 11:46 AM UTC

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. 


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
Replied On November 24, 2016 04:55 AM UTC

Hi Manisankar Durai.

Thank you for your support.Working fine.

Thanks
Pratheep

Mani Sankar Durai [Syncfusion]
Replied On November 25, 2016 03:43 AM UTC

Hi Pratheep, 

Thanks for you feedback. 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;