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.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

118342 Feb 27,2015 01:06 AM Apr 30,2015 07:11 AM JavaScript 13
loading
Tags: ejGrid
Gomtesh
Asked On February 27, 2015 01:06 AM

     <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
Replied On February 27, 2015 04:55 AM

     <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 [Syncfusion]
Replied On March 2, 2015 11:38 AM

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
Replied On March 3, 2015 02:08 AM

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 [Syncfusion]
Replied On March 4, 2015 10:44 AM

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 5th 2015.

 

We will appreciate your patience until then.

 

Regards,

Ragavee U S



Ragavee U S [Syncfusion]
Replied On March 5, 2015 05:24 AM

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
Replied On March 6, 2015 12:09 AM

Thanks Ragavee,
the above solution works fine.....

Gomtesh
Replied On March 6, 2015 06:05 AM

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
Replied On March 6, 2015 06:07 AM

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
Replied On March 6, 2015 07:58 AM

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 [Syncfusion]
Replied On March 9, 2015 08:57 AM

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
Replied On March 9, 2015 09:19 AM

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

Saravanan Arunachalam [Syncfusion]
Replied On March 10, 2015 08:29 AM

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 [Syncfusion]
Replied On April 30, 2015 07:11 AM

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

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.

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.

;