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. Image for the cookie policy date

How to Pass Value to ejDialog , Show on center of screen, Close dialog on save click ,Return Value Back to main call

Dear Sir

$("#mainDialog").ejDialog({ title: caption, position: { X: 100, Y: 10 }, width: 800, height: 500, contentType: "ajax", contentUrl: "xx.html", enableModal: true });

xx.html is look like in attach file.

-How to put default value or Default date value to some element (design in xx.html)
-Show dialog on center of screen
-Close dialog on click "save button"
-Return Value Back to main call 

Please advise in JQuery or/and angular
Thk

Attachment: modal_3cd71271.zip

6 Replies

SN Sasikala Nagarajan Syncfusion Team February 6, 2015 12:37 PM UTC

Hi Krittikorn,

Thanks for using Syncfusion Products.

We have analyzed your query and prepared sample based on your requirements using angularjs.

Please find the sample from below location

Sample

Query 1: Set the default value in textboxes

We can set the initial values for textboxes using anugular js scope method. Please find the below code snippet to set the initial values of textboxes.

[script]

angular.module('EditCtrl', ['ejangular'])

           .controller('EditorsCtrl', function ($scope) {

               $scope.name = "name";

               $scope.phone = "9999-999";

               $scope.email = "email id";

               $scope.company = "company";

           });

Query 2: Show dialog on center of screen

Normally our EJ dialog will render only in center of the screen. If we want to change the position of that dialog we can achieve this requirement using our existing API “position”. We can set the X axis and Y axis values in this API. Dialog will render based on the given values. Please find the below code snippet.

[script]

$("#sampledialog").ejDialog({

        enableModal: true,

        enableResize: false,

        position: { X: 500, Y: 150 },

        close: "onDialogClose"

    });

Query 2: Close dialog on click "save button"

This can be achieved using our client side event “close”. Please find the below code snippet to close the dialog.

[script]

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

In the attached sample we have used above code in save button click event. So it will close the dialog when we click save button

Return Value Back to main call 

We can achieve your requirement using both angular js and JQuery. In our sample we have showcased both methods.

Using angular:

In this sample the values entered in dialog text boxes will automatically bind in textboxes that are html page. So we can get the values from these textboxes after we close the dialog. We have achieved this using angularJS.

Please check the given sample let us know if it helps. If we misunderstood your queries, please provide more details about the requirement that will be easy for us to provide the exact solution

Please let us know if you have further queries,

Regards,

Sasikala Nagarajan




KD Krittikorn Deeraksa replied to Sasikala Nagarajan February 7, 2015 10:00 AM UTC

Hi Krittikorn,

Thanks for using Syncfusion Products.

We have analyzed your query and prepared sample based on your requirements using angularjs.

Please find the sample from below location

Sample

Query 1: Set the default value in textboxes

We can set the initial values for textboxes using anugular js scope method. Please find the below code snippet to set the initial values of textboxes.

[script]

angular.module('EditCtrl', ['ejangular'])

           .controller('EditorsCtrl', function ($scope) {

               $scope.name = "name";

               $scope.phone = "9999-999";

               $scope.email = "email id";

               $scope.company = "company";

           });

Query 2: Show dialog on center of screen

Normally our EJ dialog will render only in center of the screen. If we want to change the position of that dialog we can achieve this requirement using our existing API “position”. We can set the X axis and Y axis values in this API. Dialog will render based on the given values. Please find the below code snippet.

[script]

$("#sampledialog").ejDialog({

        enableModal: true,

        enableResize: false,

        position: { X: 500, Y: 150 },

        close: "onDialogClose"

    });

Query 2: Close dialog on click "save button"

This can be achieved using our client side event “close”. Please find the below code snippet to close the dialog.

[script]

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

In the attached sample we have used above code in save button click event. So it will close the dialog when we click save button

Return Value Back to main call 

We can achieve your requirement using both angular js and JQuery. In our sample we have showcased both methods.

Using angular:

In this sample the values entered in dialog text boxes will automatically bind in textboxes that are html page. So we can get the values from these textboxes after we close the dialog. We have achieved this using angularJS.

Please check the given sample let us know if it helps. If we misunderstood your queries, please provide more details about the requirement that will be easy for us to provide the exact solution

Please let us know if you have further queries,

Regards,

Sasikala Nagarajan



Dear Sasikala Nagarajan
Thank you for answer but may not clear on my question.

on Q1.
-I load data in form  from another html file not in same html file
-I create angular factory (fac.js) to reuse it  main start in angular factory and open dialog (confirmDialog.html (desgin dialog),confirmDialog.js(angular controller) ) 
after click save on dialog (will close dialog)and return value from dialog to factory and  factory return value to any angular controller that call this factory.

on Q2
this is fix position (i know this) but i mean  auto center in any size on screen. (or i must detect size of screen and calculate minus haft of dialog size to fill it x , y )

on Q3
I tried this before ask you.   ($("#sampledialog").ejDialog("close");)

in conformDialog.html and binf ng-click to save button , and controldialog.js have controller but  event not fire

please advice


KD Krittikorn Deeraksa February 11, 2015 02:14 PM UTC

Hello ?


SN Sasikala Nagarajan Syncfusion Team February 12, 2015 04:37 PM UTC

Hi Krittikorn,

We deeply regret for delay.

We have analyzed your requirement and prepared the sample based on your requirement. Please get the sample from below location.

Sample

I load data in form from another html file not in same html file  and after click save on dialog (will close dialog)and return value from dialog to factory and  factory return value to any angular controller

In given sample we have loaded the dialog data from another html file (formdata.html) in main html file (angularsupport.html). In save button click event (“onsubmit()”), we get the values of fields using the jquery val() method and pass that values to factory function and closed the dialog. In that factory function we have sets the value to scope variables.

Please check with the given sample and let us know whether it meets your requirement. If we have misunderstood your requirement, please provide more details on the requirement or else can you please reproduce the issue in the given sample and revert us the modified sample and that will be helpful for us to provide the prompt solution.

auto center in any size on screen i must detect size of screen and calculate minus haft of dialog size to fill it x , y

EJ dialog will render only in center of the screen based on the current size of screen there is no need to set position manually. Please check with given screenshot.

conformDialog.html and bind ng-click to save button , and controldialog.js have controller but  event not fire

If we load the data using AJAX then all binded events will be unbind. so it will not trigger. So we have used normal button click event to save the data and close the ejDialog. Please check with the sample.

Please let us know if you have further queries,

Regards,                                                                           

Sasikala Nagarajan




KD Krittikorn Deeraksa February 15, 2015 07:25 AM UTC

Dear Sasikala Nagarajan

Thank you for your sample, it helpful. but a little bit different from my requirement.

-Show dialog on center of screen is OK . I did use calculate inside my factory (screen size detect) and to it this pass.
-for read design dialog from outside this ok pass it (it do the same in your sample).

Come to see your last sample. something not match my requirement.

1.your factory touch the name  ('mycontr' ) of body is not match for me about factory.  The factory don't known  how call it.
PS: 'button11' not start dialogOpen direct, button11 call factory and get value return from factory only , factory start dialog and all contain all  function in next caption inside factory.
(Look Link Web components) because it reuse many times in same controller and many times in another controller.
see attach file diagram.

2.all there function it outside factory it place on main original controller , not good to share this dialog. it make a lot of duplicate code, nearly close my requirement it must inside factory.
onsubmit()
dialogOpen()
dialogclose()

I will try to edit your last sample from there 2 comments., if your can correct there 2 comments please advise.
(this is very important to me becuase it a lot of library to do like this. for example   choose product dialog, choose customer dialog, choose employee dialog, ... it reuse many time.)






Attachment: factoryComponents_b3b9de36.zip


SN Sasikala Nagarajan Syncfusion Team February 16, 2015 05:04 PM UTC

Hi Krittikorn

We have analyzed your query. We are currently working in custom sample preparation based on your requirement.

Support incident has been created under your account to track the status of your requirement and also  to get the custom sample. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Please let us know if you have further queries,

Regards,                                                                           

Sasikala Nagarajan



Loader.
Up arrow icon