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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Custom close buttons

Thread ID:

Created:

Updated:

Platform:

Replies:

123346 Mar 8,2016 03:19 PM UTC Mar 18,2016 07:31 AM UTC ASP.NET MVC 10
loading
Tags: Grid
Catalina Vatuiu
Asked On March 8, 2016 03:19 PM UTC

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 [Syncfusion]
Replied On March 9, 2016 02:18 PM UTC

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
Replied On March 9, 2016 02:39 PM UTC

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
Replied On March 9, 2016 03:27 PM UTC

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 [Syncfusion]
Replied On March 10, 2016 10:59 AM UTC

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
Replied On March 10, 2016 02:52 PM UTC

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 [Syncfusion]
Replied On March 11, 2016 10:48 AM UTC

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

Catalina Vatuiu
Replied On 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

Balaji Marimuthu [Syncfusion]
Replied On 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


Catalina Vatuiu
Replied On 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

Balaji Marimuthu [Syncfusion]
Replied On 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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;