while editing row in grid min date is not set with e-editparams-mindate and after selecting "from_date" that selected date should be min date in "to_date" datepicker

[Gomtesh]

     <div ej-grid id="Grid" e-width="500px" e-datasource="data" e-allowpaging="true" e-selectedrowindex="selectedRow" e-editsettings-allowadding="true"

        e-editsettings-allowdeleting="true" e-editsettings-allowediting="true" e-editsettings-showconfirmdialog="false" e-editsettings-editmode="mode"

        e-toolbarsettings-showtoolbar="true" e-toolbarsettings-toolbaritems="tools">

        <div e-columns>

            <div e-column e-field="leave_id" e-headertext="Sr. No." e-isprimarykey="true" e-textalign="center"></div>

            <div e-column e-field="from_date" e-headertext="From Date" e-textalign="center" e-format="{0:dd-MMM-yyyy}" datepicker-popup="{{format}}" e-edittype="datepicker" e-editparams-mindate="03/04/2015" close-text="Close"></div>

            <div e-column e-field="to_date" e-headertext="To Date" e-textalign="center" e-format="{0:dd-MMM-yyyy}" datepicker-popup="{{format}}" e-edittype="datepicker"></div>

            <div e-column e-field="no_of_days" e-headertext="No. of leave days" e-textalign="center"></div>

            <div e-column e-field="reason" e-headertext="Reason" e-textalign="center"></div>

            <div e-column e-field="status" e-headertext="Status" e-edittype="dropdownedit" e-datasource="leave_status" e-textalign="center"></div>

        </div>

    </div>

[Gomtesh]

     <div ej-grid id="Grid" e-width="500px" e-datasource="data" e-allowpaging="true" e-selectedrowindex="selectedRow" e-editsettings-allowadding="true"

        e-editsettings-allowdeleting="true" e-editsettings-allowediting="true" e-editsettings-showconfirmdialog="false" e-editsettings-editmode="mode"

        e-toolbarsettings-showtoolbar="true" e-toolbarsettings-toolbaritems="tools">

        <div e-columns>

            <div e-column e-field="leave_id" e-headertext="Sr. No." e-isprimarykey="true" e-textalign="center"></div>

            <div e-column e-field="from_date" e-headertext="From Date" e-textalign="center" e-format="{0:dd-MMM-yyyy}" datepicker-popup="{{format}}" e-edittype="datepicker" e-editparams-mindate="03/04/2015" close-text="Close"></div>

            <div e-column e-field="to_date" e-headertext="To Date" e-textalign="center" e-format="{0:dd-MMM-yyyy}" datepicker-popup="{{format}}" e-edittype="datepicker"></div>

            <div e-column e-field="no_of_days" e-headertext="No. of leave days" e-textalign="center"></div>

            <div e-column e-field="reason" e-headertext="Reason" e-textalign="center"></div>

            <div e-column e-field="status" e-headertext="Status" e-edittype="dropdownedit" e-datasource="leave_status" e-textalign="center"></div>

        </div>

    </div>

I have done in jquery but i want to do it all in Angular

 <div ej-grid id="Grid" e-width="500px" e-datasource="data" e-allowpaging="true"   e-columns="col"   e-selectedrowindex="selectedRow" e-editsettings-allowadding="true"

       e-editsettings-allowdeleting="true" e-editsettings-allowediting="true" e-editsettings-showconfirmdialog="false" e-editsettings-editmode="mode"

        e-toolbarsettings-showtoolbar="true" e-toolbarsettings-toolbaritems="tools">

   $scope.col = [

              { field: "leave_id", headerText: "leave_id", isPrimaryKey: true, width: 50, textAlign: ej.TextAlign.Center },

              { field: "from_date", headerText: "From_date", textAlign: ej.TextAlign.Center, format: "{0:dd-MMM-yyyy}", editType: ej.Grid.EditingType.DatePicker, editParams: { minDate: new Date(), 

 select: selectedStartDate } },

              { field: "to_date", headerText: "To_date", textAlign: ej.TextAlign.Center, format: "{0:dd-MMM-yyyy}", editType: ej.Grid.EditingType.DatePicker, editParams: { select: selectedEndDate } },

              { field: "no_of_days", headerText: "no_of_days", textAlign: ej.TextAlign.Center, editType: ej.Grid.EditingType.Numeric, editParams: { decimalPlaces: 1, change: change_value, minValue: 0.5, incrementStep: 0.5 } },

              { field: "reason", headerText: "reason", textAlign: ej.TextAlign.Center },

              { field: "status", headerText: "status", textAlign: ej.TextAlign.Center, editType: ej.Grid.EditingType.Dropdown, dataSource: $scope.leave_status }

    ];

  function selectedStartDate(sender) {

        $scope.selDate = new Date(sender.value);                        // mentions the selected date.

        $scope.minDatepicker = $("#Gridto_date").data("ejDatePicker");  // creating DatePicker object

        $scope.minDatepicker.setModel({ "minDate": $scope.selDate });   // setting minDate property through setModel of DatePicker object.

   }

 

    function selectedEndDate(sender) {

        $scope.maxDatepicker = $("#Gridfrom_date").data("ejDatePicker");

         $scope.leave_days = (((new Date(sender.value).getTime()) - (new Date($scope.maxDatepicker._dateValue).getTime())) / (1000 * 60 * 60 * 24)) + 1;

        $("#Gridno_of_days").ejNumericTextbox({

            value: $scope.leave_days,

            minValue: 1,

        });

}




above functionality i have to done in Angularjs

[Ragavee U S]

Hi Gomtesh,

Thanks for your interest in Syncfusion products.

We are glad to let you know that we have achieved your requirement to bind the minDate for the “to_Date” datePicker based on the value selected in “from_Date” datepicker using AngularJS.

Please refer the below code snippets.

<div id="Grid" ej-grid e-editsettings-editmode='dialogtemplate' e-editsettings-dialogeditortemplateid="#template" e-actionComplete="complete"></div> 

    <script id="template" type="text/x-jsrender">

        . . . . .

            <tr>

                <td style="text-align: right;">

                    From Date

                </td>

                <td style="text-align: left">

                    <input id="from_Date" ej-datepicker e-value="dateVal" e-select="change" /><!--Rendering the datePicker for FromDate-->

                </td>

                <td style="text-align: right;">

                    To Date

                </td>

                <td style="text-align: left">

<!—Assigning the value of from Date as mindate of to date-->

                    <input id="to_Date" e-value="date" ej-datepicker e-mindate="dateVal" /><!--Rendering the datePicker for ToDate-->

                </td>

            </tr>

    </script>

  

In the above code snippet, we have enabled dialogTemplate as the editMode for the grid. In the Template, we have defined the from_Date and to_Date for ejDatePicker control.

For loading dynamically created dialog template items, we have used “$compile” services of angular that can be referred in your controller by using following code

.controller('PhoneListCtrl', function ($scope, $compile) {

Also for dynamic compilation of template HTML element, we have added an util function in the controller scope.

//Function to compile the newly generated elements

$scope.compile = function (el) {

   $compile(el)($scope);

}

Using the scope variables, we have bound the values to the datepicker controls. Please refer the below code snippets.

<script>

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

        .controller('PhoneListCtrl', function ($scope, $compile) {

            . . . . .

            $scope.date = "03/14/2011";

            $scope.dateVal = "01/01/2011";

//Select event of the fromDate datePicker

            $scope.change = function (args) {               

                var scope = angular.element($(".gridform")).scope();

                $("#from_Date").ejDatePicker("destroy");

                scope.compile($(".gridform"));              

            }

//Function to compile the newly generated elements

            $scope.compile = function (el) {

                $compile(el)($scope);

            }

//ActionComplete event of the grid

            $scope.complete = function(args){

                if (args.requestType == "beginedit") {

//Getting the fromDate value of the edited record and binding to scope

                    $scope.dateVal = args.model.currentViewData[args.rowIndex].OrderDate;

//Getting the toDate value of the edited record and binding to scope

                    $scope.date = args.model.currentViewData[args.rowIndex].RequiredDate;

//Getting scope of the #Grid element

                    var scope = angular.element($("#Grid")).scope();

//Compiling the generated grid form.

                    scope.compile($(".gridform"));                          

                }

            }

        });

    </script>         

 

For your convenience, we have created a sample and the same can be downloaded from the below location.

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/118342/AngularJS-1937854091.zip

Please try the above sample and get back to us if you need any further assistance.

Regards,

Ragavee U S

[Gomtesh]

Hi Ragavee

thanks for reply, your according to your solution from date and todate gives validation as per requuirement but in console there are errors like

 Uncaught TypeError: Cannot read property 'trigger' of null

2angular.min.js:89 TypeError: Cannot read property 'modelChange' of null

    at Object.t.widgetBase._trigger (ej.web.all.min.js:10)

    at Object.t.widgetBase.setModel (ej.web.all.min.js:10)

    at Object.t.widgetBase.option (ej.web.all.min.js:10)

    at h.f.raise (ej.widget.angular.min.js:10)

    at h.$get.h.$digest (angular.min.js:106)

    at ej.widget.angular.min.js:10

in your sample also it gives this error

So, can we resolve this error from browser console

[Ragavee U S]

Hi Gomtesh,

 

We have analyzed the reported issue and suspect that the it may be an issue in DatePicker control. So we are validating this issue and will update you the response accordingly on March 5^th 2015.

 

We will appreciate your patience until then.

 

Regards,

Ragavee U S

[Ragavee U S]

Hi Gomtesh,

Thanks for your patience.

We have analyzed the reported issue. We would like to let you know that the cause of the error is that, the DatePicker control is destroyed in the Change event of the same control and thus the script error has been thrown, though the sample worked fine.

So, now we have modified the sample such that your requirement is achieved without confronting any issues. Please refer the below code snippets.

<script>

            $scope.change = function (args) {               

                var scope = angular.element($(".gridform")).scope();               

                $scope.dateVal = new Date(args.value);  //The scope value of the datepicker is updated             

                scope.compile($(".gridform"));               

            }

</script>

For your convenience, we have modified the previously updated sample with the above code and the sample can be downloaded from the below location.

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/118342/AngularJS_Modified1801669304.zip

Please get back to us if you need any further assistance.

Regards

Ragavee U S

[Gomtesh]

Thanks Ragavee,

the above solution works fine.....

[Gomtesh]

Thanks Ragavee,

the above solution works fine.....

Hi Ragavee,

the sample given by you its gives error in firefox 36.0.1

"Error: this.model is null

t.widgetBase._trigger@http://localhost:65090/AngularJS/scripts/ej.web.all.min.js:10:9234

t.widgetBase.setModel@http://localhost:65090/AngularJS/scripts/ej.web.all.min.js:10:9798

t.widgetBase.option@http://localhost:65090/AngularJS/scripts/ej.web.all.min.js:10:11121

f.raise@http://localhost:65090/AngularJS/scripts/ej.widget.angular.min.js:10:1626

Yd/this.$get</h.prototype.$digest@http://localhost:65090/AngularJS/scripts/angular.min.js:106:309

f.applyScope/<@http://localhost:65090/AngularJS/scripts/ej.widget.angular.min.js:10:2045

"

also it gives erro in chrome::

Error: this.model is null

t.widgetBase._trigger@http://localhost:65090/AngularJS/scripts/ej.web.all.min.js:10:9234

t.widgetBase.setModel@http://localhost:65090/AngularJS/scripts/ej.web.all.min.js:10:9798

t.widgetBase.option@http://localhost:65090/AngularJS/scripts/ej.web.all.min.js:10:11121

f.raise@http://localhost:65090/AngularJS/scripts/ej.widget.angular.min.js:10:1626

Yd/this.$get</h.prototype.$digest@http://localhost:65090/AngularJS/scripts/angular.min.js:106:309

f.applyScope/<@http://localhost:65090/AngularJS/scripts/ej.widget.angular.min.js:10:2045

"

[Gomtesh]

Thanks Ragavee,

the above solution works fine.....

Hi Ragavee,

the sample given by you its gives error in firefox 36.0.1

"Error: this.model is null

t.widgetBase._trigger@http://localhost:65090/AngularJS/scripts/ej.web.all.min.js:10:9234

t.widgetBase.setModel@http://localhost:65090/AngularJS/scripts/ej.web.all.min.js:10:9798

t.widgetBase.option@http://localhost:65090/AngularJS/scripts/ej.web.all.min.js:10:11121

f.raise@http://localhost:65090/AngularJS/scripts/ej.widget.angular.min.js:10:1626

Yd/this.$get</h.prototype.$digest@http://localhost:65090/AngularJS/scripts/angular.min.js:106:309

f.applyScope/<@http://localhost:65090/AngularJS/scripts/ej.widget.angular.min.js:10:2045

"

also it gives erro in chrome::

Error: this.model is null

t.widgetBase._trigger@http://localhost:65090/AngularJS/scripts/ej.web.all.min.js:10:9234

t.widgetBase.setModel@http://localhost:65090/AngularJS/scripts/ej.web.all.min.js:10:9798

t.widgetBase.option@http://localhost:65090/AngularJS/scripts/ej.web.all.min.js:10:11121

f.raise@http://localhost:65090/AngularJS/scripts/ej.widget.angular.min.js:10:1626

Yd/this.$get</h.prototype.$digest@http://localhost:65090/AngularJS/scripts/angular.min.js:106:309

f.applyScope/<@http://localhost:65090/AngularJS/scripts/ej.widget.angular.min.js:10:2045

"

in chrome it gives error like

TypeError: Cannot read property 'modelChange' of null

    at Object.t.widgetBase._trigger (ej.web.all.min.js:10)

    at Object.t.widgetBase.setModel (ej.web.all.min.js:10)

    at Object.t.widgetBase.option (ej.web.all.min.js:10)

    at l.f.raise (ej.widget.angular.min.js:10)

    at l.$get.l.$digest (angular.js:15896)

    at angular.js:1603

    at e (angular.js:4517)

    at angular.js:4974

[Gomtesh]

Thanks Ragavee,

the above solution works fine.....

Hi Ragavee,

the sample given by you its gives error in firefox 36.0.1

"Error: this.model is null

t.widgetBase._trigger@http://localhost:65090/AngularJS/scripts/ej.web.all.min.js:10:9234

t.widgetBase.setModel@http://localhost:65090/AngularJS/scripts/ej.web.all.min.js:10:9798

t.widgetBase.option@http://localhost:65090/AngularJS/scripts/ej.web.all.min.js:10:11121

f.raise@http://localhost:65090/AngularJS/scripts/ej.widget.angular.min.js:10:1626

Yd/this.$get</h.prototype.$digest@http://localhost:65090/AngularJS/scripts/angular.min.js:106:309

f.applyScope/<@http://localhost:65090/AngularJS/scripts/ej.widget.angular.min.js:10:2045

"

also it gives erro in chrome::

Error: this.model is null

t.widgetBase._trigger@http://localhost:65090/AngularJS/scripts/ej.web.all.min.js:10:9234

t.widgetBase.setModel@http://localhost:65090/AngularJS/scripts/ej.web.all.min.js:10:9798

t.widgetBase.option@http://localhost:65090/AngularJS/scripts/ej.web.all.min.js:10:11121

f.raise@http://localhost:65090/AngularJS/scripts/ej.widget.angular.min.js:10:1626

Yd/this.$get</h.prototype.$digest@http://localhost:65090/AngularJS/scripts/angular.min.js:106:309

f.applyScope/<@http://localhost:65090/AngularJS/scripts/ej.widget.angular.min.js:10:2045

"

in chrome it gives error like

TypeError: Cannot read property 'modelChange' of null

    at Object.t.widgetBase._trigger (ej.web.all.min.js:10)

    at Object.t.widgetBase.setModel (ej.web.all.min.js:10)

    at Object.t.widgetBase.option (ej.web.all.min.js:10)

    at l.f.raise (ej.widget.angular.min.js:10)

    at l.$get.l.$digest (angular.js:15896)

    at angular.js:1603

    at e (angular.js:4517)

    at angular.js:4974

the another major issue is that while adding record in grid datepicke is not fetched,
and the required validation for datpicker is alson not working

[Ragavee U S]

Hi Gomtesh,

Query #1: the sample given by you its gives error and also it gives erro in chrome

We have analyzed the reported issues and we are sorry to let you know that we are unable to reproduce the mentioned issues in our sample. Could you please share us the video of the issue faced along with the replication procedure which will be helpful for us to analyze the issues and provide you response accordingly.

Query #2: the another major issue is that while adding record in grid datepicke is not fetched

We have analyzed the issue and found that in the sample, the datePicker is only rendered on editing i.e, when requestType is beginedit. In order to render the datepicker during adding, please include the below condition in the sample.

<script>

       $scope.complete = function(args){

                if (args.requestType == "beginedit" || args.requestType == "add") {

                    . . . . .                          

                }

            }

        });

    </script>

For your convenience, we have modified our previously updated sample with the above solution. The sample can be downloaded from the below location.

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/118342/AngularJS_Sample-1808417903.zip

Please get back to us if you need any further assistance.

Regards

Ragavee U S

[Gomtesh]

please select from date and the todate and press cancel button and select another record and perfom same operation 

[Saravanan Arunachalam]

Hi Gometesh,

We considered the requirement “Issue with editing while perform cancel” as a bug. We have logged a report on this and will fix the issue internally, also the fix will be included in Vol 1, 2015 service pack 1 release, which has been scheduled to be rolled out in the month of Apr 2015.

We have also created an incident internally to have a follow up with this issue.

Please let us know if you have any other concerns.

Regards,
Saravanan.A

[Ragavee U S]

Hi Gomtesh,

We are glad to announce that our Essential Studio 2015 Volume 1 Service Pack Release v13.1.0.26 is rolled out and is available for download under the following link:

http://www.syncfusion.com/forums/118977/essential-studio-2015-volume-1-service-pack-release-v13-1-0-26-available-for-download

We are sorry to let you know that the issue i.e., script error thrown when editing a record and clicking cancel is not our source side issue. The cause of the error is due to memory leak in the sample.

It can be fixed at the sample side by creating a new inherited scope to separate template from root to avoid memory leak. Please refer the below code snippets.

//datePicker change event

$scope.change = function (args) {

$scope.gridChildScope.dateVal = args.value;

$compile($(".gridform"))($scope.gridChildScope);

}

$scope.gridChildScope = null;

//grid action complete event

$scope.complete = function (args) {

if (args.requestType == "beginedit" || args.requestType == "add") {

var flag = 1;

if (args.requestType == "beginedit") {

$scope.dateVal = args.model.currentViewData[args.rowIndex].OrderDate;

$scope.date = args.model.currentViewData[args.rowIndex].RequiredDate;

}

// new inherited scope is created to separate template from root to avoid memory leak

$scope.gridChildScope = angular.element($("#Grid")).scope().$new();

// custom compile function is not used because that compiles the template to root scope

$compile($(".gridform"))($scope.gridChildScope);

}
}

For your convenience, we have modified our previously updated sample with the above solution. The sample can be downloaded from the below location.

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/136385/AngularJS_modified-70092687.zip

For more information on the memory leaks when using $compile in AngularJS sample, please refer the below online link.
http://roubenmeschian.com/rubo/?p=51

Please let us know if you have any queries.
Regards,
Ragavee U S