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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid new row gets cleared on dialog open and dialog closes immediately

Thread ID:

Created:

Updated:

Platform:

Replies:

148911 Nov 7,2019 04:37 PM UTC Nov 8,2019 01:30 PM UTC ASP.NET Web Forms 1
loading
Tags: Grid
Satya Prakash
Asked On November 7, 2019 04:37 PM UTC

Hi
I am having a grid and in one column I want to display a button and on click of that button I want to open a dialog
here are the codes
_______________________
                   <ej:Grid ID="GridSpecialConditions" ClientIDMode="Static" runat='server' AllowFiltering="True" AllowGrouping="True" AllowPaging="True" AllowReordering="True" AllowResizeToFit="True"  AllowResizing="True"
                            AllowScrolling="True" AllowSearching="True" AllowSorting="True" AllowTextWrap="True" CssClass="" DataSourceCachingMode="None"
                            EnableLoadOnDemand="False" EnableResponsiveRow="True" EnableToolbarItems="True" IsResponsive="True" DataSourceID="SqlDataSourceSpecialConditions"
                            OnDataBound="GridSpecialConditions_DataBound" OnServerAddRow="GridSpecialConditions_ServerAddRow" >
                            <toolbarsettings showtoolbar="True" toolbaritems="add,edit,delete,update,cancel"></toolbarsettings>
                            <EditSettings AllowAdding="True" AllowDeleting="True" AllowEditing="True" EditMode="Batch" ShowDeleteConfirmDialog="True" RowPosition="Bottom"/>
                            <filtersettings filtertype="Excel"></filtersettings>
                            <Columns>
                                <ej:Column Field="SpecialConditionID" DataType="number" AllowEditing="False" IsIdentity="True" IsPrimaryKey="True" Visible="False"></ej:Column>
                                <ej:Column Field="CId" DataType="number" Visible="False"></ej:Column>
                                <ej:Column Field="RowOrder" DataType="number" Visible="False"></ej:Column>
                                <ej:Column Field="ExcemptionCategoryID" DataType="string" EditType="DropdownEdit" Width="10%" HeaderText="Excempt For"></ej:Column>
                                <ej:Column Field="ExcemptionSubCategoryID" DataType="string" EditType="DropdownEdit" Width="10%" HeaderText="Excempt On"></ej:Column>
                                <ej:Column Field="TargetValueID" DataType="string" EditType="DropdownEdit" Width="10%" HeaderText="Target"></ej:Column>
                                <ej:Column Field="CustomValue" DataType="string" Width="10%" HeaderText="New Value"></ej:Column>
                                <ej:Column Field="CustomValueType" DataType="string" EditType="DropdownEdit" Width="10%" HeaderText="Type"></ej:Column>
                                <ej:Column Field="ConfirmationRulesID" DataType="number" Visible="False"></ej:Column>
                                <ej:Column Field="CalculationRulesID" DataType="number" Width="12%" HeaderText="Add/Edit Rules" TextAlign="Center" AllowEditing="False" Template="#columnTemplate">
                                </ej:Column>
                                <ej:Column Field="RulesSummary" DataType="string" Width="23%" HeaderText="Summary"></ej:Column>
                                <ej:Column Field="ExonorateItemsListID" DataType="string" EditType="DropdownEdit" Width="15%" HeaderText="Exonorated Items">
                                    <DropDownEditOptions ShowCheckbox="true"/>
                                </ej:Column>
                            </Columns>
                        </ej:Grid>
_______________________
            <script type="text/x-jsrender" id="columnTemplate">
                <button class='btn btn-lg btn-primary col-xs-12' style='font-size:small;' onclick='javascript:onClickAddDetail(this)'><span class='glyphicon glyphicon-pencil pull-left'></span>  Add Details</button>
            </script>
_______________________
            function onClickAddDetail(args) {
                    var dialogObj = $("#commanddialog").data("ejDialog");
                    dialogObj.open();
                }
_______________________
<ej:Dialog ID="commanddialog" ClientIDMode="Static" runat="server" Width="450" Title="Excepmtion Rule Details" ShowOnInit="False" EnableModal="True"
                EnableResize="True" Target="#GridSpecialConditions">
                <DialogContent>
                    <div class="container-fluid">
                    <div class="row">
                    <div class="col-md-12">
                                <ej:RadioButton ID="RadioButton1" runat="server" Name="Time Based" Text="Time Based"></ej:RadioButton>
                    </div>
                    </div>
                    <div class="row">
                    <div class="col-md-12">
                            <ej:RadioButton ID="RadioButton2" runat="server" Name="Incident Count Based" Text="Incident Count Based"></ej:RadioButton>
                    </div>
                    </div>
                        <div class="row">
                    <div class="col-md-12">
                                <ej:Grid ID="Grid1" ClientIDMode="Static" runat='server' AllowFiltering="True" AllowGrouping="True" AllowPaging="True" AllowReordering="True" AllowResizeToFit="True" AllowResizing="True" AllowScrolling="True" AllowSearching="True" AllowSorting="True" AllowTextWrap="True" CssClass="" DataSourceCachingMode="None" EnableLoadOnDemand="False" EnableResponsiveRow="True" EnableToolbarItems="True" IsResponsive="True" DataSourceID="SqlDataSourceRuleDetails" MinWidth="0">
                                    <toolbarsettings showtoolbar="True" toolbaritems="add,edit,delete,update,cancel"></toolbarsettings>
                                    <EditSettings AllowAdding="True" AllowDeleting="True" AllowEditing="True" EditMode="Batch" ShowDeleteConfirmDialog="True" RowPosition="Bottom"/>
                                    <filtersettings filtertype="Excel"></filtersettings>
                                    <Columns>
                                        <ej:Column Field="RuleID" DataType="number" IsPrimaryKey="True" Visible="False"></ej:Column>
                                        <ej:Column Field="RuleRowOrder" DataType="number" IsPrimaryKey="True" Visible="False"></ej:Column>
                                        <ej:Column Field="TypeStart" DataType="string"></ej:Column>
                                        <ej:Column Field="TypeEnd" DataType="string"></ej:Column>
                                    </Columns>
                                </ej:Grid>
                    </div>
                    </div>
                    </div>
                </DialogContent>
            </ej:Dialog>
_______________________
Now the problem is when I add a new row in GridSpecialConditions grid and click on the button in CalculationRulesID column
the dialog shows up but immediately closes and the new row in GridSpecialConditions that I was editing disappears 

Can you please help me with this, is this the right way to achieve it?

Best regards
Satya

Dinesh Rajendiran [Syncfusion]
Replied On November 8, 2019 01:30 PM UTC

Hi Satya Prakash, 
  
Thanks for contacting Syncfusion support. 
  
Query: “The dialog shows up but immediately closes” 
  
We can reproduce the mentioned issue in our sample. Based on your code example we found that you have render the button using Button tag. When you click on Button tag it will send postback to server and the Grid page will refreshed due to the form submit. As the Grid page is refreshed, the dialog gets closed. 
  
To avoid the postback, we suggest you to render the button using input element with type as button.  
  
Find the code example:  
  
<div> 
         <ej:Grid ID="FlatGrid" ClientIDMode="Static" runat="server" AllowFiltering="true" AllowGrouping="true" AllowPaging="true" AllowReordering="true" 
             AllowResizeToFit="true" AllowResizing="true" AllowScrolling="true" AllowSearching="true" AllowTextWrap="true" 
             CssClass="" EnableLoadOnDemand="false" EnableResponsiveRow="true" IsResponsive="true"> 
  
     --------------------------------- 
        </ej:Grid> 
</div> 
  
---------------------------------------------- 
  
<script type="text/x-jsrender" id="columnTemplate"> 
           <input type="button" class='btn btn-lg btn-primary col-xs-12' value="Add Detail" style='font-size:small;' onclick='onClickAddDetail()'></input> 
       </script> 
  
For your convenience we have attached the sample and please download the sample from the following link 
  
  
If we misunderstood your query, please get back to us 
  
Regards, 
Dinesh Rajendiran 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

Live Chat Icon For mobile
Live Chat Icon