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

[Gomtesh]

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

           

       

       

           

               

                    From Date

                   

                       

                   

               

                 

                      To Date

                     

                         

                     

               

         

               

                    No. of Days

                   

                       

                   

               

               

                    Reason

                   

                       

                   

               

           

           

           

                Submit

                Cancel

           

       

   

[Harikrishnan P]

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]

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]

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]

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]

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 ‘$includeContentLoaded’ event. ‘$includeContentLoaded’ is 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]

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]

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]

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]

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]

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]

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]

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]

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 [e-mail] 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]

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]

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