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

How can i do syncfusion modal dialog using angularjs with diffrent controllers

Thread ID:

Created:

Updated:

Platform:

Replies:

118406 Mar 5,2015 01:00 PM UTC Jun 10,2015 10:14 AM UTC JavaScript 15
loading
Tags: ejDialog
Gomtesh
Asked On March 5, 2015 01:00 PM UTC

How can i do following functionality using sybcfusion modal


app.controller('home_controller', function ($scope, $modal) {
    
    $scope.add_leave = function (size) {

         $scope.modalInstance = $modal.open({
            templateUrl: '../view/Add_leave.html',
            controller: 'add_leave_controller',
            size: size,
            resolve: {
                items: function () {
                    return $scope.items;
                }
            }
        });
    };
}



app.controller('add_leave_controller', function ($scope) {

//controller for modal 

// here i write functionality for modal 

}


//here modal html code

ng-controller="add_leave_controller" id="add_leave_modal">
   
       
           
               

Add Leave Information

           
       
       
           
               
                   
                   
                       
                   
               
                 
                     
                     
                         
                     
               
         
               
                   
                   
                       
                   
               

               
                   
                   
                       
                   
               
           
           
           
               
               
           
       
   

Harikrishnan P [Syncfusion]
Replied On March 9, 2015 04:45 AM UTC

Hi Gomtesh,

Query : How can i do syncfusion modal dialog using angularjs with diffrent controllers

You can use the modal dialog to update the form values. We have prepared a sample to showcase our modal dialog and updating its content through Angular. The sample can be downloaded from the following location.

Sample Location : Modal Dialog

In the above sample, we have used two different controllers. On clicking the “submit” button present inside the Modal Dialog, you can see that we call a service to expose its value in both the controllers. Please let us know whether the provided sample helps to you or not. If we have misunderstood your requirement, please get back to use with more information about your requirement or revert back the provided sample based on your application to showcase your requirement.

Regards,

HariKrishnan

Gomtesh
Replied On March 9, 2015 10:28 AM UTC

Thanks Harikrishnan,
but modal dialog opened using by ID , i dont want to use "ID"  is there any another way also i have call modal dialog from one controller and seperate controller for modal dialog

and the sample you have sent the modal dialog not close when click om submit and close buttons.

Sasikala Nagarajan [Syncfusion]
Replied On March 10, 2015 04:54 PM UTC

Hi Gomtesh,
Thanks for the update,
We have analyzed your query (“open the dialog without id”).We can use the class name also to access the dialog. Please refer the below code snippet

[script]

obj=$(".e-dialog.e-js").data("ejDialog");

    if(obj)

        obj.open();

We have modified the sample based on your requirement. Please get the sample from below location
Sample
Also, we have defined the dialog control’s element in another controller. So to communicate between the two separate controllers we have used $broadcast service. The broadcast service accessed using ‘$rootScope’. Please refer the below code snippet.

myApp.controller('basic_controller', function ($rootScope) {

            $rootScope.call_otherctrl = function () {

                $rootScope.$broadcast('Dialog_open');

            }

        });

modal dialog not close when click on submit

We can close the dialog in ng-click(submit button) event using our existing method “close” in dialog control. Please refer the below code snippet.

$scope.press = function (user) {

            obj=$(".e-dialog.e-js").data("ejDialog");

            if (obj)

                obj.close();

        }


Please check with the modified sample and let us know if you have further queries.
Regards,

Sasikala Nagarajan

gomtesh
Replied On March 12, 2015 10:55 AM UTC

Hi Sasikala,

as you send sample tha works fine but i you written modal code in same file where modal is called i wants below modal code in seperate html file



  <div class="control" ng-controller="Dialog_ctrl">
        <div id="basicDialog">
            <label>Name</label>
            <!--Angular is binded via model value "user.name"-->
            <input id="name1" type="text" ng-model="user.name" />
            <label>City</label>
            <!--Angular is binded via model value "user.city"-->
            <input id="address1" type="text" ng-model="user.city" />
            <table>
                <tr>
                    <td class="pad">
                        <!--On clicking the button updates the datasource-->
                        <input id="btn1" type="button" value="Submit" ej-button ng-click="press(user)" />
                    </td>
                    <td class="pad">
                        <!--On clicking the button close the dialog-->
                        <input id="btn2" type="button" value="Cancel" ej-button />
                    </td>
                </tr>
            </table>
        </div>
    </div>





Sasikala Nagarajan [Syncfusion]
Replied On March 13, 2015 11:29 AM UTC

Hi Gomtesh,

Thanks for the update.

We have analyzed your query (modal code in same file where modal is called but i wants modal code in separate html file). We can achieve your requirement using “ng-include” directive (ng-include directive used to insert the html content inside another html content). Please find the sample from below location

Sample

In this sample, we have maintained the model dialog controller in separate html file (“basicdialog.html”). Once the content is loaded successfully, we have created the dialog control in ‘$includeContentLoadedevent.$includeContentLoadedis an event which is emitted every time the ng-include is updated (content loaded). We can listen this event from other controller also. Also to communicate between the two different controllers(where one controller is included using ng-include directive), we have to define the $broadcast service after the content is loaded(i.e. within the $includeContentLoaded’) .

Please refer the below code snippet.

[script]

$ rootScope.$on('$includeContentLoaded', function () {

                $("#basicDialog").ejDialog({

                    width: 550,

                    height: 300,

                    showOnInit: false,

                    enableModal: true,

                    title: "User Information"

                });

         $rootScope.call_otherctrl = function () {

                    $rootScope.$broadcast('Dialog_open');

                }

         });

 
Please check with the given sample and let us know if you have further queries.
Regards,

Sasikala Nagarajan



Gomtesh
Replied On March 16, 2015 01:15 PM UTC

Hi sasikala,
thanks for reply,

1. i have use field leave ID in dialog i have auto increment that ID when i open dialog i.e. in Leave ID text box i have to get next number that should also work when i refresh the page

2. i have to store each leave information i.e json string to local storage in single array

3.when i click button for dialog open all field in dialog should blank


here i have send my code.....
<!DOCTYPE html>
<html >
<head>
    <title></title>

    <!--Contains the neccessary theme for our componets-->
    <link rel='nofollow' href="themes/default-theme/ej.widgets.all.min.css" rel="stylesheet" />

    <!--dependency script files-->
    <script src="scripts/jquery-1.10.2.min.js"></script>
    <script src="scripts/jquery.easing.1.3.min.js"></script>
    <script src="scripts/jquery.globalize.min.js"></script>
    <script src="scripts/angular.min.js"></script>
    <script src="scripts/ngStorage.js"></script>

    <!--contains the neccessary scripts to render all the web components-->
    <script src="scripts/ej.web.all.min.js"></script>
    <script src="scripts/ej.unobtrusive.min.js"></script>
    <script src="scripts/ej.widget.angular.min.js"></script>

</head>
<body ng-app="Dialog1">

    <div ng-controller="basic_controller">
        <input class="e-btn" e-size="small" type="button" ng-click="call_otherctrl()" id="btnOpen" value="Add Leave" ej-button e-click="dialogOpen" />
    </div>

    <div class="control" ng-controller="Dialog_ctrl">
        <div ng-include="'basicDialog.html'"></div>
    </div>


    <script type="text/javascript">
        var obj;
        // declaration

        var myApp = angular.module('Dialog1', ['ejangular', 'ngStorage']);

        myApp.controller('basic_controller', function ($scope, $log, $localStorage, $rootScope) {

            $rootScope.$on('$includeContentLoaded', function () {
                $("#basicDialog").ejDialog({
                    width: 520,
                    showOnInit: false,
                    enableModal: true,
                    title: "Add Leave Information"
                });
                $rootScope.call_otherctrl = function () {
                    $rootScope.$broadcast('Dialog_open');
                }

            });


        });



        myApp.controller('Dialog_ctrl', function ($scope, $localStorage) {
            $scope.leave = {};

            $scope.$on('Dialog_open', function (event) {
                obj = $(".e-dialog.e-js").data("ejDialog");
                if (obj)
                    obj.open();
            });

            $scope.leaveList = [];

            if (localStorage.getItem('leaveList') == null) {
                alert("Localstorage null");
                localStorage.setItem('leaveList', '[]');
            }


            $scope.press = function (leave) {

                $scope.leave.id = (JSON.parse(localStorage.getItem('leaveList')).length) + 1;

                angular.copy((JSON.parse(localStorage.getItem('leaveList'))), $scope.leaveList);

                $scope.leaveList.push(leave);

                alert((localStorage.getItem('leaveList')));


                localStorage.setItem('leaveList', JSON.stringify($scope.leaveList));

                if (obj)
                    obj.close();
            };

            $scope.cancel = function (leave) {
                if (obj)
                    obj.close();
            };

            $scope.minfrom = new Date();

            $scope.d1 = $scope.leave.fromdateValue;

            $scope.isClose = function () {
                $scope.leave.todatevalue = $scope.leave.fromdateValue;
                $scope.d1 = $scope.leave.fromdateValue;
                $scope.leave.leave_days = 1;

            }
            // $scope.leave.todatevalue = $scope.leave.fromdateValue;

            $scope.todate_close = function () {

                $scope.leave.leave_days = ((((new Date($scope.leave.todatevalue).getTime()) - (new Date($scope.leave.fromdateValue).getTime())) / (1000 * 60 * 60 * 24)) + 1);

            }

            $scope.noofdays = function () {

                if (($scope.leave.leave_days).length != 0) {

                    if ($scope.leave.leave_days % 1 != 0.5) {

                        $scope.todatevalue = (new Date((new Date($scope.leave.fromdateValue).getTime()) + ((1000 * 60 * 60 * 24) * ($scope.leave.leave_days - 1))));
                    }
                    else {
                        $scope.leave.todatevalue = (new Date((new Date($scope.leave.fromdateValue).getTime()) + ((1000 * 60 * 60 * 24) * ($scope.leave.leave_days))));
                    }
                }
                else {
                    $scope.leave.todatevalue = null;
                }

            }
        });

    </script>

</body>
</html>



and here is dialog code:::::basicDialog.html


<div class="control" ng-controller="Dialog_ctrl">
    <div id="basicDialog">
        <form class="form-horizontal">
            <div class="form-group">
                <label for="inputfirstname" class="col-xs-2 col-sm-2 col-lg-2 col-md-2 control-label">Leave ID</label>
                <div class="col-xs-4 col-sm-4 col-lg-4 col-md-4">
                    <input id="Text1" e-size="large" class="col-xs-12  col-sm-12 col-lg-12 col-md-12 ejinputtext syncfusion_textboxes_height" ng-model="leave.id" {{(JSON.parse(localStorage.getItem('leaveList')).length) + 1}}/>
                </div>
            </div>

            <div class="form-group">
                <label for="inputfromdate" class="col-xs-2 col-sm-2 col-lg-2 col-md-2 control-label">From Date </label>
                <div class="col-xs-4 col-sm-4 col-lg-4 col-md-4">
                    <input id="datepick" ej-datepicker e-dateformat="dd-MMM-yyyy" e-value="leave.fromdateValue" e-open='isOpen' e-close='isClose' e-change='isChange' e-mindate="minfrom" />
                </div>
            </div>
            <div class="form-group">
                <label for="inputtodate" class="col-xs-2 col-sm-2 col-lg-2 col-md-2 control-label">To Date </label>
                <div class="col-xs-4 col-sm-4 col-lg-4 col-md-4">
                    <input id="datepick1" ej-datepicker e-value="leave.todatevalue" e-close="todate_close" e-mindate="d1" e-dateformat="dd-MMM-yyyy" />
                </div>
            </div>

            <div class="form-group">
                <label for="inputfirstname" class="col-xs-2 col-sm-2 col-lg-2 col-md-2 control-label">No. of Days</label>
                <div class="col-xs-4 col-sm-4 col-lg-4 col-md-4">
                    <input id="numeric" e-size="large" class="col-xs-12  col-sm-12 col-lg-12 col-md-12 ejinputtext syncfusion_textboxes_height" e-change="noofdays()" ng-change="noofdays()" e-value="leave.leave_days" ng-model="leave.leave_days" e-incrementstep="0.5" e-decimalplaces="1" e-minvalue="0.5" valid-number />
                </div>
            </div>

            <div class="form-group">
                <label for="inputreason" class="col-xs-2 col-sm-2 col-lg-2 col-md-2 control-label">Reason</label>
                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                    <textarea class="form-control ej-textarea" rows="2" ng-model="leave.reason" ng-maxlength="500"></textarea>
                </div>
            </div>
        </form>
        <div class=" align_save_cancel" id="submit">
            <input id="btn1" type="button" e-size="small" value="Submit" ej-button ng-click="press(leave)" />

            <input id="btn2" type="button" e-size="small" value="Cancel" ej-button ng-click="cancel(leave)" />
        </div>
    </div>
</div>


Sasikala Nagarajan [Syncfusion]
Replied On March 19, 2015 01:01 PM UTC

Hi Gomtesh,

Thanks for the update,

Query 1: I have auto increment that ID when i open dialog i.e. in Leave ID text box i have to get next number

We can achieve your requirement by maintaining the scope variable in main controller and then increment its value on button click event (event that triggers the dialog to open) whenever we open the dialog.

Please refer the below code snippet.

[html]

<input type="text" id="LeaveID" ng-model="user" />

[_script]

var myApp = angular.module('DialogCtrl', ['ejangular']);

myApp.controller('basic_controller', ['$scope', function ($scope) {

$scope.user = "";

$scope.count = 0;

$scope.dialogopen = function (user) {

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

$scope.count++;

}

}]);

Query 2: Next number that should also work when i refresh the page

To maintain this textbox value even after the refreshing, we have to get and put the specified value (Count) from browser cookies using $cookies service in angular js. But if cleared the cookie or if we run the page in another browser then this valuewill not be maintained properly or the value will be lost. So to maintain the count value all the time, please use this Leave id as one ofthe fieldin your database.

Query 3: I have to store each leave information i.e json string to local storage in single array

We can convert the form fields values (json string) into array using jquery method serializeArray().

Please refer the below link to know more about serializeArray.

https://api.jquery.com/serializeArray/

Please let us know if you have further queries,

Regards,

Sasikala Nagarajan


Gomtesh
Replied On March 19, 2015 01:39 PM UTC

I my app if if click on butto that will open dialog prperly but if i go in another navigation tab and return back to dialog opening page and i click on button for dialog open it will opens the dialog but it contains previous entered values.

how can i resolve this problem
i have used code from your 13 march 2015 update

app.controller('home_controller', function ($scope, $modal, $log, $localStorage, $rootScope) {
   
    $rootScope.$on('$includeContentLoaded', function () {
        $("#basicDialog").ejDialog({
            width: 520,
            showOnInit: false,
            enableModal: true,
            title: "Add Leave Information"
        });
        $rootScope.call_otherctrl = function () {

            $rootScope.$broadcast('Dialog_open');
           // alert("Dialog_open -home");
        }
    });
    
});



app.controller('Dialog_ctrl', function ($scope, $rootScope, $localStorage) {
      
    $scope.$on('Dialog_open', function (event) {
      
        $scope.obj = $(".e-dialog.e-js").data("ejDialog");
        if ($scope.obj)
            $scope.obj.open();
    });

 $scope.press = function (leave) {
   
        if ($scope.obj)
            $scope.obj.close();
    };

});


i have taken in modal datepicker and other controls but datepicker works as simple textbox it will not render datepicker

Sasikala Nagarajan [Syncfusion]
Replied On March 20, 2015 12:22 PM UTC

Hi Gomtesh,

Thanks for the update,

Query 1: I click on button for dialog open it will opens the dialog but it contains previous entered values.

We have analyzed your query. To achieve this requirement, we need to empty the form fields manually before we open the dialog.

Please refer the below code snippet

app.controller('Dialog_ctrl', function ($scope, $rootScope, $localStorage) {

$scope.$on('Dialog_open', function (event) {

$scope.obj = $(".e-dialog.e-js").data("ejDialog");

if ($scope.obj)

$scope.leave.todatevalue = "";

$scope.d1 = "";

$scope.leave.leave_days = "";

$scope.obj.open();

});

$scope.press = function (leave) {

if ($scope.obj)

$scope.obj.close();

};

});

Query 2: i have taken in modal datepicker and other controls but datepicker works as simple textbox it will not render datepicker

We suspect that the reported issue may be caused due to missing of any dependent script file. Also Datepicker control have localization support so we have to refer the “jquery.globalize” file to render the Datepicker control.

Please refer below code snippet to know the dependent script file.

<!--Dependent Scripts for Essential JavaScript Components-->

<script src="Scripts/jquery-1.10.2.min.js"></script>

<script src="Scripts/jquery.easing.1.3.js"></script>

<!—Please include below two scripts for Essential JavaScript Components which have localization support-->

<script src="Scripts/jquery.globalize.min.js"></script>

<script src="Scripts/jquery.globalize.cultures.min.js"></script>

<!--Dependent Scripts for all componets-->

<script src="Scripts/ej/ej.web.all.min.js"></script>

Also, please make use of our online documentation, to create our components.

http://help.syncfusion.com/web - This link is the common user guide for getting started with JavaScript, ASP.NET MVC and ASP.NET components

Please let us know if you have further queries,

Regards,

Sasikala Nagarajan


Gomtesh
Replied On March 20, 2015 12:54 PM UTC

Hi Sasikala,

$scope.leave.todatevalue =
"";

$scope.d1 = "";

$scope.leave.leave_days = "";


the above solution works correctly when i am in same controller or when i am in same HTML web page  but when i switch to another navigation tab i.e. in other HTML web page or other controller then that modal contain previous values and not render the date-picker it is simple textbox also not closing modal when i click on submit button or when click on cancel button

I have already included following files then also this issue is occured

<script src="Scripts/jquery.globalize.min.js"></script>
<script src="Scripts/jquery.globalize.cultures.min.js"></script>



Sasikala Nagarajan [Syncfusion]
Replied On March 23, 2015 01:04 PM UTC

Hi Gomtesh,

Sorry for the inconvenience caused,

We have analyzed your query. We are unable to reproduce the reported issues(when i switch to another navigation tab i.e. in other HTML web page or other controller then that modal contain previous values and not render the date-picker it is simple textbox) in our side.

Please provide more details on your query or else can you please reproduce the issue in the sample (which is given by us in previous updates) and revert us the modified sample and that will be helpful for us to provide the prompt solution.

Please let us know if you have further queries,

Regards,

Sasikala Nagarajan


gomtesh
Replied On March 24, 2015 10:38 AM UTC

following code works fine while im on same page but 
when i switch to another navigation tab i.e. in other HTML web page or other controller then that modal contain previous values and not render the date-picker it is simple textbox

app.controller('Dialog_ctrl', function ($scope, $rootScope, $localStorage) {
    $scope.leave = {};

    $scope.$on('Dialog_open', function (event) {
        obj = $(".e-dialog.e-js").data("ejDialog");
        if (obj) {
            $scope.leave.from_date = "";
            $scope.leave.to_date = "";
            $scope.leave.no_of_days = "";
            $scope.leave.reason = "";
            obj.open();
        }
    });




app.controller('home_controller', function ($scope, $modal, $log, $localStorage, $rootScope) {

    $rootScope.$on('$includeContentLoaded', function () {
        $("#basicDialog").ejDialog({
            width: 520,
            showOnInit: false,
            enableModal: true,
            title: "Add Leave Information"
        });
        $rootScope.call_otherctrl = function () {
            $rootScope.$broadcast('Dialog_open');
        }
    });



In home.html page i have written:
<div ng-controller="home_controller">
........

<div>
                <input class="e-btn" e-size="small" type="button" ng-click="call_otherctrl()" id="btnOpen" value="Add Leave" ej-button e-click="dialogOpen" />
</div>
......
.
....
</div>

<div class="control" ng-controller="Dialog_ctrl">
    <div ng-include="'partial/basicDialog.html'"></div>
</div>


and Dialog code..

<div class="control" ng-controller="Dialog_ctrl">
    <div id="basicDialog">

 <input id="datepick" ej-datepicker e-dateformat="dd-MMM-yyyy" e-value="leave.from_date" e-open='isOpen' e-close='isClose' e-change='isChange' e-mindate="minfrom" required />

 <input id="datepick1" ej-datepicker e-value="leave.to_date" e-close="todate_close" e-mindate="d1" e-dateformat="dd-MMM-yyyy" required />

 <textarea class="form-control ej-textarea" rows="2" ng-model="leave.reason" ng-maxlength="500" required></textarea>

            <input id="btn1" type="button" e-size="small" value="Submit" ej-button ng-click="press(leave)" />

            <input id="btn2" type="button" e-size="small" value="Cancel" ej-button ng-click="cancel(leave)" />
   </div>
</div>


Saranya CJ [Syncfusion]
Replied On March 26, 2015 07:24 AM UTC

Hi Gomtesh,

Thank you for sharing code example.

As per our support guidelines; we offer only limited and basic support through forums widely.

Since your request for “Syncfusion modal dialog with datepicker,textboxes using angular js with different controllers” seems to be issue fix which is beyond our support limit consigned for a forum.

Hence, we are requesting you to create an incident through Direct trac. If you face any issues availing support through Direct Trac, please contact salessupport@syncfusion.com for further assistance.

You can login to the Direct-Trac and create an incident in the following link:

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

As always we are happy to assist you.

Regards,

Saranya


Gomtesh
Replied On June 8, 2015 01:35 PM UTC

Is possible to decide dynamically form columns with alignment, width, format in syncfusion grid using angularjs

I have to do columns in syncfusion grid should dynamically create with all its parameters using syncfusion grid by passing json data contains all information about to form grid
<div id="Grid" ej-grid e-datasource="data">

in above code all information to form a grid passing through $scope.data = dataforgrid;


Sasikala Nagarajan [Syncfusion]
Replied On June 10, 2015 10:14 AM UTC

Hi Gomtesh,
The same query has been addressed in forum 119343. Please follow that forum for further updates related to this query.
Regards,
Sasikala Nagarajan

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

;