Close of the Dialog control - fire ASP.Net function

[Paul Yanzick]

Hello,

I am using the Dialog control for a wizard, and have added cancel buttons throughout.  These tie into an event that clears the values in the wizard and resets the panels to default state (there are several panels in there).  The problem is when someone clicks the X in the corner, it causes it to just close the dialog, not reset.  Can I somehow call the same ASP.Net event when that X is clicked as the cancel button is doing?

Thanks!

[Ezhil S]

Hi Paul,

Thank you for contacting Syncfusion support.

The X icon in the Dialog box control will trigger the Close event for the Dialog control. So that we suggest you to call the same function, that is defined for Cancel button Click event to clear the values in dialog to ClientSideOnClose event of Dialog control. This will clear the values in the Dialog panel based on the Cancel button click function and closes the Dialog. We have prepared a sample with a Textbox whose value will be cleared on Cancel click and also on X icon click that clears the values and close the Dialog. Please refer the following code snippet,
<code>
[ASPX]

<div class="row">

<ej:Button ID="btnOpen" Type="Button" CssClass="e-btn" Text="Click to open dialog" ClientSideOnClick="btnclick" runat="server" ClientSideOnCreate="onButtonCreate"></ej:Button>

<ej:Dialog ID="Dialog1" Title="Sample" runat="server" ClientSideOnClose="ClearData">

<DialogContent>

<div>

<br />

Your dialog contents here

<br />

<ej:NumericTextBox runat="server" ID="num1"></ej:NumericTextBox>

<br />

<ej:Button runat="server" ID="button1" Text="OK"></ej:Button>

<ej:Button runat="server" ID="button2" Text="Cancel" ClientSideOnClick="ClearData"></ej:Button>

</div>

</DialogContent>

</ej:Dialog>
</div>
[Script]

<script type="text/javascript">

function ClearData() {

$("#<%=num1.ClientID%>").ejNumericTextbox({ value: null }); // Clears the value in numeric text box

var dialogObj = $("#<%=Dialog1.ClientID%>").data("ejDialog");

if (!dialogObj.isOpened())

$("#<%=btnOpen.ClientID%>").show(); // shows button to open the dialog after closed

}

function btnclick() {

var dialogObj = $("#<%=Dialog1.ClientID%>").data("ejDialog");

dialogObj.open();// opens the dialog and hides the button

$("#<%=btnOpen.ClientID%>").hide();

}

function onButtonCreate(e) {

$("#<%=btnOpen.ClientID%>").hide();

}
</script> </code>

For further references on events available in Dialog control refer the link below:
http://help.syncfusion.com/UG/JS_CR/ejDialog.html#Events

Sample prepared can be downloaded from the following link:
http://www.syncfusion.com/downloads/support/forum/118886/Dialog_f118886894316687.zip

Please let us know if you have any other queries.

Regards,
Ezhil S

[Paul Yanzick]

So in short, the best way to do this is to call a Javascript function instead of a .Net function?

[Ezhil S]

Hi Paul,

Thanks for the update.

Query: call a Javascript function instead of a .Net function

We are unable to understand your query. As you have mentioned as .Net function does that means you want to clear the values using a server side function on closing the dialog? As per the initial query you have mentioned as clearing the values using button click event and do you want to call the same code behind function on closing the Dialog control? Please share us more details on how you are using the Dialog control and clearing the values using button click. So that we can provide you a solution.

Please let us know if you have any other queries.

Regards,
Ezhil S

[Paul Yanzick]

Hello,

As mentioned, I am using the Dialog control as a pop-up wizard of sorts.  Multiple panels are there, with a few buttons to cancel or move to the next panel.  If someone clicks the Cancel button, a code behind function is called which will clear all of the fields in the wizard, and set the first panel as being active again.  This way when the Dialog is opened again, it will show as being visible on the first panel again.

When I click the X in the corner of the Dialog, I want it to call the same code as clicking the Cancel button, which is in the code behind.  I had to use I believe the Content tag to allow the code behind to work with the buttons I have added.

Thanks
Paul

[Muralishankar Sundaram]

Hi Paul,

Thanks for the update.

For your requested use case scenario, we suggest you to use manual ajax call & web method for callingserver side method on closing the dialog since we don’t have inbuilt server side event on closing the dialog. Kindly give a try with below code and let us know if you face any other issues.

<code>

[CS]

[System.Web.Services.WebMethod]

public static string CallIt(string one)

{

return "sample Content From The Server";

}

[ASPX]

<script type="text/javascript">

function onDialogClose(args) {

$.ajax({

type: "POST",

url: "Default.aspx/CallIt",

data: '{one:"SampleData" }',

contentType: "application/json; charset=utf-8",

dataType: "json",

success: OnSuccess,

failure: function (response) {

alert(response.d);

}

});

}

function OnSuccess(data) {

$("#data1").html(data.d);

}

</script>

</code>

Note: you can call the same method which was mapped in cancel event in dialog close too by changing the URL in Ajax post.

We have prepared thesample and attached it in a below:

http://www.syncfusion.com/downloads/support/forum/118886/Datepicker-655621615.zip​

Please let us know if you have any other concerns .

Regards,

Muralishanakar S.

[Paul Yanzick]

Hello,

I have it a shot, it isn't firing.  What I have is below...  sorry I don't know Javascript all that well.  I don't get the text in the div like your sample, nor do I get an alert.

Dashboard.aspx

<script type="text/javascript">
    function onDialogClose(args) {
        $.ajax({
            type: "POST",
            url: "Dashboard.aspx/ClearForm",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            failure: function (response) {
                alert(response.d);
            }
        });
    }
    function OnSuccess(data) {
        $("#data1").html("IT WORKED");
    }
</script>
<div id="data1"></div>

<ej:Dialog ID="dlgAddCRMA" runat="server" Content="#masterForm" Visible="false" Title="Add New CRMA" ShowHeader="true" ClientSideOnClose="onDialogClose">

The Code Behind Method:

[WebMethod]
private void ClearForm()

[Paul Yanzick]

Note, I made the ClearForm method public in case that was it, same result.

[Ezhil S]

Hi Paul,

Thanks for the update.

The reported issue with not firing the WebMethod in your sample is because you need to define the web method in static type. Only static web method can be triggered from client side script. However your requirement on clearing the values inside the dialog on closing couldn’t be achieved using WebMethod because in static method you will not be able to access the page instance and their objects. So that the controls are inaccessible from the web method in code behind. So that we have confirmed this as an issue and have logged defect report regarding this. A support incident to track the status of this defect has been created under your account. Please log on to our support website to check for further updates

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents

Please let us know if you have any questions.

Best,
Ezhil S

[Lizette Korsbæk Andersen]

Hi

I have Faced the same problem and I found that the easyest solution is to clear all values in the wizard in the click event connected to opening the wizard in the first place, because then you have access to the all controls and you dont have any problems with it not being cleared when clicking the X because the values will always be cleared when the wizard is started.

Just a suggestion.

best regards 

Lizette

[Ezhil S]

Hi Lizette,

Thanks for your suggestions.

We would like to inform you that we have provided server side event for Dialog close from Essential Studio service pack release 1 for volume 1, 2015(version 13.1.0.30). In the server side close event handler you can clear the values inside Dialog on closing the window.

Please let us know if you have any other queries.

Regards,
Ezhil S