Dialog Submit in UpdatePanel not working

[Pratura]

Hi,

I have a dialog in the updatepanel but it is still refreshing the entire page.

The dialog is in the MainContent but hidden in a div.

Can you please point me to the right direction.

This is the code (I have removed much of the table elements since they are not relevant):

 <asp:UpdatePanel ID="Update" runat="server" UpdateMode="Always">

        <ContentTemplate>

    <div id="dlg" style="visibility:hidden">

                <ej:Dialog ID="dialog" Title="Input" ShowOnInit="false" runat="server">

        <DialogContent>

                <table id="Input1" border="0" style="width:100%" runat="server" class="gg">

                <tbody>

               

                <tr>

                    <td style="vertical-align:central;width:220px;height:35px"><label style="font-size:medium">xxxxxx</label></td>

                    <td style="vertical-align:top"><ej:CheckBox ID="xxxxxx" runat="server" Size="Medium"></ej:CheckBox></td>

                </tr>

                    </tbody>

            </table>   

                    <hr class="style-one"/>             

            <ej:Button ClientIDMode="AutoID" runat="server" Text="Spremi" OnClick="saveButton_Click" ID="saveButton" CssClass="buttonSave" Type="Button" Size="Small" ShowRoundedCorner="true" ContentType="TextAndImage" PrefixIcon="e-save" />                                       

        </DialogContent>

    </ej:Dialog>  

    </div>

      </ContentTemplate>    

    </asp:UpdatePanel>

I am opening the dialog from the toolbar customitem:

function openDialog() {

            $(".dlg").show()

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

        }

[Narayanasamy Panneer Selvam]

Hi Pratura, 

  

Thanks for Contacting Syncfusion support. 

 

We can achieve your requirement by using “Asynchronous post back trigger” element in Update Panel. By using this you can update more than one controls at the same time without refreshing the whole page. Please refer the code sample which we have shared you, Find the sample in the below link.  

Example Code: 

<asp:UpdatePanel ID="Update" runat="server" UpdateMode="Always"> 

            <ContentTemplate> 

 

                <div id="dlg" style="visibility:hidden"> 

 

                    <ej:Dialog ID="dialog" Title="Input" ShowOnInit="false" runat="server"> 

                        <DialogContent> 

                            <table id="Input1" border="0" style="width: 100%" runat="server" class="gg"> 

                                <tbody> 

 

                                    <tr> 

                                        <td style="vertical-align: central; width: 220px; height: 35px"> 

                                            <label style="font-size: medium">xxxxxx</label></td> 

                                        <td style="vertical-align: top"> 

                                            <ej:CheckBox ID="xxxxxx" runat="server" Size="Medium"></ej:CheckBox> 

                                        </td> 

                                    </tr> 

 

                                </tbody> 

                            </table> 

                            <asp:Label runat="server" ID="Label1" Visible="false"></asp:Label> 

                            <hr class="style-one" /> 

                            <ej:Button ClientIDMode="AutoID" runat="server" Text="Spremi" OnClick="saveButton_Click" ID="saveButton" CssClass="buttonSave" Type="Button" Size="Small" ShowRoundedCorner="true" ContentType="TextAndImage" PrefixIcon="e-save" /> 

                        </DialogContent> 

                    </ej:Dialog> 

                </div> 

            </ContentTemplate> 

            <Triggers> 

                <asp:AsyncPostBackTrigger ControlID="dialog" /> 

            </Triggers> 

        </asp:UpdatePanel> 

 

Sample link: http://www.syncfusion.com/downloads/support/forum/124578/ze/Dialogupdate11257681302  

 

Regards, 

Narayanasamy P.

[Pratura]

Works perfect!

Thank you.

That button click inserts the data into an sql table.

And now it works with the update panel without refreshing the page.

I would like to refresh the grid after update but it doesn't refresh it.

This is the code:

 Protected Sub saveButton_Click(Sender As Object, e As Syncfusion.JavaScript.Web.ButtonEventArgs)

        Dim CMD As New SqlCommand("Insert")

        CMD.Parameters.Add("@ID", SqlDbType.Int)

        CMD.Parameters("@ID").Value = 1

       

        db.ExecuteStoredProcedure(CMD)

        Page.ClientScript.RegisterStartupScript(Me.[GetType](), "Script", "refreshGrid", True)

    End Sub

<script>

        function refreshGrid() {

            $(".Grid1").refreshContent()

        };    

<script>

The refreshGrid function works fine if I call it like a ClientSideOnClick="refreshGrid"

And it works without updatepanel like OnClick="refreshGrid".

But not in this scenario.

Any help appreciated.

[Ragavee U S]

Hi Pratura, 

 

We have analyzed the reported query and we are able to reproduce the reported error with the provided code. The code is incorrect such that the “refreshGrid” method is not triggered upon postback. 

 

So we suggest you to use the below code example in your sample in order to call the javascript function from code behind. 

 

Protected Sub saveButton_Click(Sender As Object, e As Syncfusion.JavaScript.Web.ButtonEventArgs) 

 

        . . .  

 

        Page.ClientScript.RegisterStartupScript(Me.[GetType](), "Script", "refreshGrid();", True) 

 

    End Sub 

 

We have modified the previously updated sample by invoking the refreshGrid method upon postback action of the button click event. 

 

Sample Link: https://www.syncfusion.com/downloads/support/forum/124578/ze/Dialogupdate471404514 

 

Regards, 

Ragavee U S. 

[Semper]

Hi,

after updating to the latest 14.2 version the sub updates the whole page again.

It worked in previous version without refreshing.

I removed the Page.ClientScript.RegisterStartupScript(Me.[GetType](), "Script", "refreshGrid", True): and the button only inserts records in the db but refreshes the page regardless of the trigger.

Protected Sub saveButton_Click(Sender As Object, e As Syncfusion.JavaScript.Web.ButtonEventArgs)

        Dim CMD As New SqlCommand("Insert")

        CMD.Parameters.Add("@ID", SqlDbType.Int)

        CMD.Parameters("@ID").Value = 1    

        db.ExecuteStoredProcedure(CMD)

    End Sub

[Ragavee U S]

Hi Pratura,  

   

We are unable to reproduce your issue in the specified version (14.2). We suspect that the issue might be due to missing MSAjax script files in your application. Please check whether you have any console errors on missing Ajax script files. If yes, then please refer those files in your application. We have modified our sample with 14.2.0.26 version DLLs which is available in the following link:  

https://www.syncfusion.com/downloads/support/directtrac/124578/ze/DialogupdatePanel-1890567028   

If you are facing problem with post back in update panel, please share us issue reproducible sample so that we can help you out better.  

   

Regards,  

Ragavee U S.    

[Pratura]

Yes, it was the missing MSAjax script files.

It works now.

Thank you very much for your help.

[Ragavee U S]

Hi Pratura, 

  

Thanks for your update. 

  

We are happy that your issue is resolved. 

  

Regards, 

Ragavee U S.