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. Image for the cookie policy date

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

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

1 Reply

DR Dinesh Rajendiran Syncfusion Team 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 


Loader.
Live Chat Icon For mobile
Up arrow icon