Custom close buttons

[Catalina Vatuiu]

Hello

I opened a dialog box, for custom editing a record from a grid, which contains two buttons: Save and Close.

 

How can I close the dialog when the user clicks these buttons? 

This is the code used to open the dialog window: 

        $("#dialog").ejDialog({
            closeOnEscape: true,
            contentType: "iframe",
            contentUrl: url,
            close: function (args) { window.location.reload(); }           
        });

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

Thanks,

Catalina

[Balaji Marimuthu]

Hi Catalina,
Thanks for using Syncfusion products,
Your requirement is achieved using the “close” method of the dialog control. Refer to the Help Document and code example as below.
Help Document: http://help.syncfusion.com/js/api/ejdialog#methods:close

function onDialogClose(args) {        

            $("#lognForm").ejDialog("close");

        }

We have created a simple dialog sample in jsplayground link. Please refer to the below link.
http://jsplayground.syncfusion.com/jxauvqrp
We have created a sample using dialog control in ASP.NET MVC. You can get this sample in below location,
http://www.syncfusion.com/downloads/support/forum/123327/ze/SyncfusionMvcApplication1-821016937
Please let us know if you have any queries,
Regards,
Balaji Marimuthu

[Catalina Vatuiu]

Hello, 

I'm sorry but my scenario is a little bit different, the examples you gave me are simpler and I've studied those already on your demo site.

I have a view with a grid, and a partial view with the edit controls for a record. Inside the partial view I have the Save and Cancel buttons. 

Is there a way to close the dialog from within the partial view, when I click on Save/Cancel? Or to attach some event from the parent view to the buttons inside the partial view?

I don't want to put all my controls in the same view (grid and edit record). 

Thanks,

Catalina

[Catalina Vatuiu]

Hello again,

If there is no way of accomplishing this using the Syncfusion dialog control, I have another question about an workaround.

I tried using the jquery modal dialog, opening it from inside the Syncfusion MVC grid.  The dialog opnes and closes as desired, but the grid doesn't work anymore, I get a javascript error (ejtoolbar not initialized before the plugin is loaded ... or something similar) and the grid header and toolbar are loaded more than once in the view. 

Any way of solving this problem (either using the jquery modal dialog or the Syncfusion dialog) is ok with me,

Thanks,

Catalina

[Balaji Marimuthu]

Hi Catalina,

We need to attach an event to the button for close the dialog and solved the reported issue using Syncfusion Dialog. We have created a sample using the partial view and render the edit controls, save & cancel button. Refer to the sample and code example as below.

Sample: PartialView-Dialog

[PartialView]

@model SyncfusionMvcApplication51.OrdersView

<div>

    <div>

        @Html.Label("OrderID")

    </div>

    <div>

        @Html.TextBox("OrderID", Model.OrderID.ToString(), new { @readonly = "readonly" })

    </div><br />

   

   . . . .

    <div class="col-md-3">

        @(Html.EJ().Button("save").Text("Save").ClientSideEvents(eve => eve.Click("onClose")))  @*bind an event to button*@

    </div>

    <div class="col-md-3">

        @(Html.EJ().Button("cancel").Text("Cancel").ClientSideEvents(eve => eve.Click("onClose")))  @*bind an event to button*@

    </div>

    <br />

    <br />

</div>


[View.cshtml]

function onClose(args) {

        $("#partialgrid").ejDialog("close");  //close dialog
    }

We have rendered the partialview in Grid RecordDoubleClick event and opened the dialog.

function recordDblClick(args) {

        var records = this.getSelectedRecords()[0];  //getSelected records value

        $.ajax({

            url: "/Grid/GetData",

            type: "POST",

            contentType: "application/json",

            data: JSON.stringify({ value: records }),

            success: function (data) {

                $("#partialgrid").html(data);

                ej.widget.init($("#partialgrid"));  //initialize the ejwidgets

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

            },

            error: function (xhr) {

                alert('error');

            }

        });

    }

Kindly check the attached sample and get back to us if you need any further assistance.


Regards,
Balaji Marimuthu

[Catalina Vatuiu]

Thanks for your reply, I tried your solution but it's not working either. 

I am not able to open the ejDialog control, because I'm getting the errors attached in the file. 

thanks 

Catalina

Attachment: EJToolbar_error_95f6e242.zip

[Balaji Marimuthu]

Hi Catalina,

We are sorry for the inconvenience.

Query: 1 ejDialog Error. 

We checked the attached screenshots and could you please ensure that you have rendered the dialog initially before calling the ejDialog open method? 

Because in the last update, we have provided code for dialog open and hide, and have not mentioned the dialog rendering code. But in the sample, we have rendered the dialog initially and opened the dialog in AJAX success event.

Refer to the modified code example as below.

function recordDblClick(args) {

        var records = this.getSelectedRecords()[0];  //getSelected records value

        $.ajax({

            url: "/Grid/GetData",

            type: "POST",

            contentType: "application/json",

            data: JSON.stringify({ value: records }),

            success: function (data) {

                $("#partialgrid").html(data);

                ej.widget.init($("#partialgrid"));  //initialize the ejwidgets

                $("#partialgrid").ejDialog(

                   {

                       enableResize: false,

                       width: 300,

                       width: 300,

                       close: "onDialogClose"

                   });

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

            },

            error: function (xhr) {

                alert('error');

            }

        });

    }

Query:2 ejToolbar error

We were unable to reproduce the issue from our side. So, kindly share the following information to find the cause of issue and provide a better solution at the earliest.

1.     Essential Studio version and Browser version details.

2.     Sample if possible or modify the attached sample as issue reproducible.

Sample: Sample-123346

3.     Share scenario to reproduce the issue.

4.     In previous update, you have mentioned when using the jQuery modal dialog the ejToolbar error is occurred. Are you using the jQuery modal dialog or Syncfusion dialog? When did you face this issue?

Regards,
Balaji Marimuthu

---

CV Catalina Vatuiu March 11, 2016 03:47 PM UTC

Hi,

The first error is solved after the fix you gave me, and the close buttons are working.

I'm still getting the second error, I am using the EJDialog control and an ajax call (as in your example), and I get the error in both IE and Chrome browsers.

The Syncfusion controls have this version: Syncfusion.AspNet.Mvc4.13.2.0.34 and  the jquery library has 2.1.1 version.

I wasn't able to reproduce the error on your sample, so I will update both Syncfusion an Jquery to the latest version to see if the problem is fixed and I will come back with a feedback. 

Catalina

---

BM Balaji Marimuthu Syncfusion Team March 14, 2016 09:27 AM UTC

Hi Catalina,

Thanks for the update.

We have checked with the mentioned versions of Syncfusion and jQuery library. But we were unable to reproduce the reported issue. So we will wait until we hear back from you.

Regards,

Balaji Marimuthu

---

CV Catalina Vatuiu March 17, 2016 07:36 AM UTC

Hi, 

I managed to make the dialog work (at least the part I asked about, closing it using the save/cancel buttons). After I updated to the latest version of Syncfusion and JQuery, the problem wasn't solved either.

But I found the error - I was including the scripts in the partial view either.

After I removed the scripts, everything worked fine.

Thanks again for your help,

Catalina

---

BM Balaji Marimuthu Syncfusion Team March 18, 2016 07:31 AM UTC

Hi Catalina,

We are happy to hear that your issue is resolved. Please get back to us if you need any further assistance.

Regards,
Balaji Marimuthu

Need More Help?

Get personalized assistance from our support team.

Contact Support

SIGN IN To post a reply.

[Catalina Vatuiu]

Hi,

The first error is solved after the fix you gave me, and the close buttons are working.

I'm still getting the second error, I am using the EJDialog control and an ajax call (as in your example), and I get the error in both IE and Chrome browsers.

The Syncfusion controls have this version: Syncfusion.AspNet.Mvc4.13.2.0.34 and  the jquery library has 2.1.1 version.

I wasn't able to reproduce the error on your sample, so I will update both Syncfusion an Jquery to the latest version to see if the problem is fixed and I will come back with a feedback. 

Catalina

[Balaji Marimuthu]

Hi Catalina,

Thanks for the update.

We have checked with the mentioned versions of Syncfusion and jQuery library. But we were unable to reproduce the reported issue. So we will wait until we hear back from you.

Regards,

Balaji Marimuthu

[Catalina Vatuiu]

Hi, 

I managed to make the dialog work (at least the part I asked about, closing it using the save/cancel buttons). After I updated to the latest version of Syncfusion and JQuery, the problem wasn't solved either.

But I found the error - I was including the scripts in the partial view either.

After I removed the scripts, everything worked fine.

Thanks again for your help,

Catalina

[Balaji Marimuthu]

Hi Catalina,

We are happy to hear that your issue is resolved. Please get back to us if you need any further assistance.

Regards,
Balaji Marimuthu