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

[Satya Prakash]

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]

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 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SAMPLE~1-328977773.zip 

  

If we misunderstood your query, please get back to us 

  

Regards, 

Dinesh Rajendiran