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

while editing row in grid min date is not set with e-editparams-mindate

Thread ID:

Created:

Updated:

Platform:

Replies:

118341 Feb 27,2015 06:00 AM UTC Mar 25,2015 01:27 PM UTC JavaScript 21
loading
Tags: ejGrid
Gomtesh
Asked On February 27, 2015 06:00 AM UTC


     <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>


Balaji Marimuthu [Syncfusion]
Replied On March 2, 2015 02:52 PM UTC

Hi Gomtesh,

Thanks for using Syncfusion Products.

We have analyzed your requirement and achieved by using the ej.Grid.prototype method in Grid. Please find the sample and code snippet.

  

                <div id="Grid" ej-grid e-datasource="data" e-editsettings-allowadding="true">

                    <div e-columns>

                        <div e-column e-field="OrderID" e-headertext="OrderID" e-isprimarykey="true" e-textalign="right" e-width="90"></div>

                        <div e-column e-field="CustomerID" e-headertext="CustomerID" e-textalign="left" e-width="90"></div>

                        <div e-column e-field="OrderDate" e-headertext="OrderDate" e-format="{0:dd-MM-yyyy}" e-edittype="datepicker" e-editparams-mindate="05-03-2015" e-width="90"></div>

                  

                    . . . . . . .

                    </div>

    <script>

        ej.Grid.prototype._tags[0].attr.push("editParams.minDate");

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

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

            $scope.selectedRow = 2;

            $scope.page = 2;

            $scope.data = window.gridData;

            $scope.tools = [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel];

        });

    </script>

By using this method you can push the editparams properties in the Grid.  Please find the sample for further details.

Sample: http://www.syncfusion.com/downloads/support/directtrac/118341/Angular-1335860692.zip

Please let us know if you have any queries.

Regards,

Balaji Marimuthu



Gomtesh
Replied On March 5, 2015 04:40 AM UTC

Thanks Balaji for reply,
But i have to set today is min date for  "from_date"  and date selected from from_date  datepicker that should be the min date for "to_date" in angular

Balaji Marimuthu [Syncfusion]
Replied On March 6, 2015 02:22 PM UTC




Hi Gomtesh,

Based on your requirement we have created the sample using angular. Please find the sample and code snippet.

Sample: Grid-angular.zip

<div id="Grid" ej-grid e-datasource="data" e-columns="col" e-toolbarsettings-showtoolbar='true' e-toolbarsettings-toolbaritems='toolbar' e-editsettings-allowdeleting=' true'

                     e-editsettings-allowediting='true' e-editsettings-allowadding='true' e-allowpaging="true"

                     e-editsettings-editmode='inlineformtemplate' e-editsettings-inlineformtemplateid="#template" e-selectedrowindex="selectedRow" e-allowsorting="true" e-actioncomplete="complete">

                    <div e-columns>

                        <div e-column e-field="OrderID" e-headertext="OrderID" e-isprimarykey="true" e-textalign="right" e-width="90"></div>

                        <div e-column e-field="CustomerID" e-headertext="CustomerID" e-textalign="left" e-width="90"></div>

                        <div e-column e-field="FromDate" e-headertext="FromDate" e-format="{0:MM/dd/yyyy}" e-width="90"></div>

                        <div e-column e-field="ToDate" e-headertext="ToDate" e-format="{0:MM/dd/yyyy}" e-width="90"></div>

                    </div>

                </div>

By using the template form in Grid we have set the today date to the minDate for FromDate column and the value selected in the FromDate is set into minDate for the ToDate column. Please find the below code snippet.

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

                    From Date

                </td>

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

                    <input id="FromDate" ej-datepicker e-value="dateVal" e-mindate="mindate" e-select="change" />

                </td>

            </tr>

            <tr>

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

                    To Date

                </td>

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

                    <input id="ToDate" e-value="date" ej-datepicker e-mindate="dateVal" />

                </td>

Please let us know if you have any queries.

Regards,

Balaji Marimuthu



Gomtesh
Replied On March 7, 2015 05:15 AM UTC

Thanks Balaji ,

For calculating no of days between from date and to date, and that days are set into no of days textbox

i have write code, but not working in firefox and IE 

how to resolve this,



$scope.todate_close = function () {

 $scope.leave_days = (((new Date($scope.date).getTime()) - (new Date($scope.dateVal).getTime())) / (1000 * 60 * 60 * 24)) + 1;

}


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

              <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="select" e-mindate="from_min_date" e-dateformat="dd-MMM-yyyy"/>
                </td>
            </tr>
            <tr>
                <td style="text-align: right;">
                    To Date
                </td>
                <td style="text-align: left">
                    <input id="to_date" class="col-lg-6" e-value="date"  e-close="todate_close"  ej-datepicker e-mindate="dateVal"  e-dateformat="dd-MMM-yyyy"/>
                </td>
            </tr>

          <tr>
                <td style="text-align: right;">
                  No. of Days
                </td>

                <td style="text-align: left">
                    <input id="numeric" e-size="large" value="{{: no_of_days}}"  class="e-field ejinputtext " e-change="noofdays()"  e-value="leave_days"  e-incrementstep="0.5" e-decimalplaces="1" 
                      e-minvalue="0.5">
                </td>               
            </tr>
  </script>



 <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='dialogtemplate' e-editsettings-dialogeditortemplateid="#template" e-actioncomplete="complete" 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}"></div>
                    <div e-column e-field="to_date" e-headertext="To Date" e-textalign="center" e-format="{0:dd-MMM-yyyy}"></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>




Balaji Marimuthu [Syncfusion]
Replied On March 9, 2015 03:37 PM UTC

Hi Gomtesh,

We have created the sample based on your requirement to calculating the number of days between from date and to date columns . Please find the sample and code snippet.

Sample: Angular.zip

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

                    EmployeeID

                </td>

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

                    <input id="EmployeeID" type="text" value="{{: EmployeeID}}"

ej-numerictextbox e-change="noofdays()" e-value="leave_days" e-incrementstep="0.5" e-decimalplaces="1"

                           e-minvalue="0.5">

                </td>

<tr>

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

                    To Date

                </td>

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

                    <input id="ToDate" e-value="date" e-close="todate_close" ej-datepicker e-mindate="dateVal" />

                </td>

            </tr>

<script>

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

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

            $scope.selectedRow = 2;

            . . . . . . . . . . .

$scope.todate_close = function () {

                $scope.leave_days = (((new Date($scope.date).getTime()) - (new Date($scope.dateVal).getTime())) / (1000 * 60 * 60 * 24)) + 1;

            }

        }

        });

We suggest you to use the ej-numerictextbox directives in the input text box to update the calculating values to the textbox. Please let us know if you have any queries.

Regards,

Balaji Marimuthu



Gomtesh
Replied On March 10, 2015 07:34 AM UTC

Thank you Balaji,

In your sample 
1.If i  select record for edit and if select from date and to date and press cancel button after that if you select another record for edit or add another record it give error in console
2.Also if i add new record the all textboxes and datepicker are not empty some values are present in that.

so,i have chaned your sample sending back to you because i have to do following functionality:

   1     while editing if todate is greater than the current date then that record should not allowed for edit .

   2    if i change no of days in textbox then "todate" should also change according to no of days according to from_date i.e if i put 3 in no_of_days textbox then date in "todate" should be 3 days from "from_date"

I have attached sample with changes...

Attachment: Angular_4864f368.rar

Balaji Marimuthu [Syncfusion]
Replied On March 11, 2015 02:17 PM UTC

Hi Gomtesh,

We are sorry for the inconvenience caused.

Please find the response.

If i  select record for edit and if select from date and to date and press cancel button after that if you select another record for edit or add another record it give error in console

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.

Also if i add new record the all textboxes and datepicker are not empty some values are present in that.

In provided sample, you have changed the textbox and datepicker  value as empty value while adding  the new record. So its working properly as you expect in your provided sample

while editing if todate is greater than the current date then that record should not allowed for edit .

We have achieved your requirement in the Grid “beginedit” event. Please find the sample and the code snippet.

Sample: Angular-118341.zip

<div id="Grid" ej-grid e-datasource="data1” e-beginedit="disableedit">

$scope.disableedit = function (args) {

                var obj = $("#Grid").ejGrid("instance");

                var index = obj.model.selectedRowIndex();

                var date = obj.model.currentViewData[index].to_date;

                var selectItems = obj.model.currentViewData[index].leave_id;

                if (new Date(date) > new Date)

                    args.cancel = true;

            }

In this sample we have disabled the editing to the row, when the today is greater than the current date.

 if i change no of days in textbox then "todate" should also change according to no of days according to from_date i.e if i put 3 in no_of_days textbox then date in "todate" should be 3 days from "from_date"

We considered this requirement “Change event not triggered when changing the values in the numerictextbox” as bug and we have already fixed the issue internally. The fix will be included in our Vol 1, 2015, which has been scheduled to be rolled at the end of this month.

Please let us know if you have any queries.

Regards,

Balaji Marimuthu



Gomtesh
Replied On March 12, 2015 06:44 AM UTC

Hi Balaji,
as you send sample in that if i edit record in dialog the changes made to record is not reflected in view, it shows blank record

If changes made while editing record all changes should reflect in grid view including "dropdown value- applied or discard"and "leavedays"
So, I have changed your sample as per requirement i send you back.

Gomtesh
Replied On March 12, 2015 07:11 AM UTC

Attachment ....

Gomtesh
Replied On March 12, 2015 07:34 AM UTC

Problem occurred while attaching file so i uploading file with new question on forum

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

Chnages made while editing record in grid that not reflecting on view with no of days and status valus in dropdownlist  


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="listCtrl">
<head>
    <title></title>
    <link rel='nofollow' href="themes/default-theme/ej.web.all.min.css" rel="stylesheet" />
    <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/jsrender.min.js"></script>
    <script src="scripts/ej.web.all.min.js"></script>
    <script src="scripts/angular.min.js"></script>
    <script src="scripts/ej.widget.angular.min.js"></script>
    <script src="moment-with-locales.js"></script>
</head>

<body ng-controller="PhoneListCtrl">
    <div class="content-container-fluid">
        <div class="row">
            <div class="cols-sample-area">
                 <div id="Grid" ej-grid e-datasource="data1" e-toolbarsettings-showtoolbar='true' e-toolbarsettings-toolbaritems='tools' e-editsettings-allowdeleting=' true'
                e-editsettings-allowediting='true' e-editsettings-allowadding='true' e-allowpaging="true" e-beginedit="disableedit"
                e-editsettings-editmode='dialogtemplate' e-editsettings-inlineformtemplateid="#template" e-selectedrowindex="selectedRow" e-allowsorting="true" e-actioncomplete="complete">
                <div e-columns>
                    <div e-column e-field="leave_id" e-headertext="SrNo" 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}"></div>
                    <div e-column e-field="to_date" e-headertext="To Date" e-textalign="center" e-format="{0:dd-MMM-yyyy}"></div>
                    <div e-column e-field="no_of_days" e-headertext="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>
            </div>
        </div>
    </div>

     <script id="template" type="text/x-jsrender">
           <table class="col-md-12" cellspacing="10">
            <tr>
                <td style="text-align: right;">
                    Order ID
                </td>
                <td style="text-align: left">
                    <input id="leave_id" name="leave_id" value="{{: leave_id}}" disabled="disabled" class="e-field e-ejinputtext valid e-disable col-lg-10 col-md-10 col-xs-10 col-sm-10 syncfusion_textboxes_height"  />
                </td>               
            </tr>
            <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="select" e-mindate="from_min_date" e-dateformat="dd-MMM-yyyy"/>
                </td>
            </tr>
            <tr>
                <td style="text-align: right;">
                    To Date
                </td>
                <td style="text-align: left">
                    <input id="to_date" class="col-lg-6" e-value="date"  e-close="todate_close"  ej-datepicker e-mindate="dateVal"  e-dateformat="dd-MMM-yyyy"/>
                </td>
            </tr>

          <tr>
                <td style="text-align: right;">
                  No. of Days
                </td>
                <td style="text-align: left">
                    <input id="numeric" e-size="large" value="{{: no_of_days}}"  class="col-lg-10 col-md-10 col-xs-10 col-sm-10  e-field ejinputtext syncfusion_textboxes_height" e-change="noofdays()" ng-change="noofdays()" e-value="leave_days" ng-model="leave_days"  e-decimalplaces="1" valid-number>
               
                </td>               
            </tr>


          <tr>
                <td style="text-align: right;">
                   Reason
                <td style="text-align: left">
                
        
                <input id="reason" name="reason" value="{{: reason}}"  class="e-field ej-textarea valid  col-md-2 col-lg-6" row="2" e-value="reason"/>


                    <!--<textarea  id="reason" name="reason" value="{{: reason}}" e-value="reason1" class="e-field ej-textarea valid  col-lg-12 col-md-12 col-xs-12 col-sm-12  " rows="2" />-->
                </td>               
            </tr>


          <tr>
                <td style="text-align: right;">
                   Status
                </td>
                <td style="text-align: left">
                    <input id="leave_status" value="{{: status}}" ej-dropdownlist e-datasource="leave_status" />
                </td>               
            </tr>

        </table>
    </script>

    <script>
        angular.module('listCtrl', ['ejangular'])
        .controller('PhoneListCtrl', function ($scope, $compile) {


            $scope.data1 = [{ "leave_id": 9, "from_date": "11-Mar-2015", "to_date": "11-Mar-2015", "no_of_days": 1, "reason": "gfhfgh", "status": "Applied" },
                            { "leave_id": 8, "from_date": "11-Mar-2015", "to_date": "11-Mar-2015", "no_of_days": 1, "reason": "fhfgh", "status": "Applied" },
                            { "leave_id": 7, "from_date": "19-Mar-2015", "to_date": "21-Mar-2015", "no_of_days": 2.5, "reason": "test reason", "status": "Applied" },
                            { "leave_id": 6, "from_date": "24-Mar-2015", "to_date": "26-Mar-2015", "no_of_days": 3, "reason": "reason one", "status": "Applied" },
                            { "leave_id": 5, "from_date": "10-Mar-2015", "to_date": "14-Mar-2015", "no_of_days": 4.5, "reason": "Reason test", "status": "Applied" },
                            { "leave_id": 4, "from_date": "18-Mar-2015", "to_date": "18-Mar-2015", "no_of_days": 1, "reason": "test test", "status": "Applied" }, 
                            { "leave_id": 3, "from_date": "19-Mar-2015", "to_date": "19-Mar-2015", "no_of_days": 1, "reason": "Family function", "status": "Applied" }, 
                            { "leave_id": 2, "from_date": "10-Mar-2015", "to_date": "10-Mar-2015", "no_of_days": 1, "reason": "test test test", "status": "Applied" }, 
                            { "leave_id": 1, "from_date": "24-Mar-2015", "to_date": "28-Mar-2015", "no_of_days": 4.5, "reason": "function test", "status": "Applied" }];


            $scope.from_min_date = new Date();

            $scope.tools = ["add", "edit", "delete", "update", "cancel"];

            $scope.leave_status = [{ text: "Applied", value: "Applied" }, { text: "Discard", value: "Discard" }];

            $scope.selectedRow = 2;
         
            $scope.select = function (args) {

                var scope = angular.element($(".gridform")).scope();
                $scope.dateVal = args.value;
                $scope.date = args.value;
                $scope.leave_days = 1;
                scope.compile($(".gridform"));
            }


            $scope.todate_close = function () {
                $scope.leave_days = ((((moment($scope.date, "DD-MMM-YYYY").toDate()).getTime()) - ((moment($scope.dateVal, "DD-MMM-YYYY").toDate()).getTime())) / (1000 * 60 * 60 * 24)) + 1;
            }

            $scope.compile = function (el) {
                $compile(el)($scope);
            }


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

                    if ($scope.leave_days % 1 != 0.5) {
                        $scope.date = (new Date(((moment($scope.dateVal, "DD-MMM-YYYY").toDate()).getTime()) + ((1000 * 60 * 60 * 24) * ($scope.leave_days - 1))));
                    }
                    else {
                        $scope.date = (new Date(((moment($scope.dateVal, "DD-MMM-YYYY").toDate()).getTime()) + ((1000 * 60 * 60 * 24) * ($scope.leave_days))));
                    }
                }
                else {

                    $scope.date = null;
                }
            }


            $scope.disableedit = function (args) {
                var obj = $("#Grid").ejGrid("instance");
                var index = obj.model.selectedRowIndex();
                var date = obj.model.currentViewData[index].to_date;
                var selectItems = obj.model.currentViewData[index].leave_id;
                if (new Date(date) < new Date)
                    args.cancel = true;
            }


            $scope.complete = function (args) {

                if (args.requestType == "add") {
                    $scope.dateVal = null;
                    $scope.date = null;
                    $scope.leave_days = "";
                    var scope = angular.element($("#Grid")).scope();
                    scope.compile($(".gridform"));
                }

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

                    $scope.dateVal = args.model.currentViewData[args.rowIndex].from_date;
                    $scope.date = args.model.currentViewData[args.rowIndex].to_date;
                    $scope.leave_days = args.model.currentViewData[args.rowIndex].no_of_days;
                    var scope = angular.element($("#Grid")).scope();
                    scope.compile($(".gridform"));
                    var flag = 1;

                }

            }

        });
    </script>
</body>

</html>


Balaji Marimuthu [Syncfusion]
Replied On March 13, 2015 01:05 PM UTC

Hi Gomtesh,

Sorry about the inconvenience caused.

We suggest you to use the name attribute in the jsrender template and the attribute name value should be same as the field of the column value.

Please find the sample and code snippet.

Sample: Sample-118341.zip

<body ng-controller="PhoneListCtrl">

    <div class="content-container-fluid">

        <div class="row">

            <div class="cols-sample-area">

                <div id="Grid" ej-grid e-datasource="data1">

                    <div e-columns>

                        <div e-column e-field="leave_id" e-headertext="SrNo" 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}"></div>

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

                        <div e-column e-field="no_of_days" e-headertext="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>

            </div>

        </div>

    </div>

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

        <table class="col-md-12" cellspacing="10">

          

            . . . . . . .

            <tr>

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

                    No. of Days

                </td>

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

                    <input id="numeric" name="no_of_days" e-size="large" value="{{: no_of_days}}" class="col-lg-10 col-md-10 col-xs-10 col-sm-10  e-field ejinputtext syncfusion_textboxes_height" e-change="noofdays()" ng-change="noofdays()" e-value="leave_days" ng-model="leave_days" e-decimalplaces="1" valid-number>

                </td>

            </tr>

            <tr>

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

                    Reason

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

                    <input id="reason" name="reason" value="{{: reason}}" class="e-field ej-textarea valid  col-md-2 col-lg-6" row="2" e-value="reason" />

                    <!--<textarea  id="reason" name="reason" value="{{: reason}}" e-value="reason1" class="e-field ej-textarea valid  col-lg-12 col-md-12 col-xs-12 col-sm-12  " rows="2" />-->

                </td>

            </tr>

            <tr>

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

                    Status

                </td>

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

                    <input id="leave_status" name="status" value="{{: status}}" ej-dropdownlist e-datasource="leave_status" />

                </td>

            </tr>

        </table>

    </script>

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

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

            . . . . . .

            

            $scope.endedit = function (args) {

                if (args.data.status=="")

                    args.data.status = $("#leave_status").val();

            }

        });

    </script>

Either you can specify the template id value should be same as the column field instead of the name attribute. Please find the below code snippet as follows.

            <tr>

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

                    No. of Days

                </td>

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

                    <input id="no_of_days" e-size="large" value="{{: no_of_days}}" class="col-lg-10 col-md-10 col-xs-10 col-sm-10  e-field ejinputtext syncfusion_textboxes_height" e-change="noofdays()" ng-change="noofdays()" e-value="leave_days" ng-model="leave_days" e-decimalplaces="1" valid-number>

                </td>

            </tr>

            <tr>

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

                    Status

                </td>

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

                    <input id="status"  value="{{: status}}" ej-dropdownlist e-datasource="leave_status" />

                </td>

            </tr>

Based on the attribute value only the records saved in the grid otherwise it will not be reflected in the grid view. Please let us know if you have any queries.

Regards,

Balaji Marimuhtu



Gomtesh
Replied On March 16, 2015 11:33 AM UTC

Thanks Balaji its working..

Balaji Marimuthu [Syncfusion]
Replied On March 18, 2015 04:12 AM UTC

Hi Gomtesh,

Thank you for the update.

Please let us if you have any queries.

Regards,

Balaji Marimuthu

Balaji Marimuthu [Syncfusion]
Replied On March 18, 2015 04:22 AM UTC

Hi Gomtesh,

Please ignore the previous update.

Thanks for the response.

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

Regards,

Balaji Marimuthu

gomtesh
Replied On March 19, 2015 04:54 AM UTC

I have to provide required field validation for all fields while add and editing records in grid in above your sent sample


gomtesh
Replied On March 20, 2015 09:04 AM UTC

In Sample-118341.zip i have make some changes and while adding new record i have set ID value as autoincreamented,

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

//here i have set  
 $scope.leave_id = (JSON.parse(localStorage.getItem('leaveList')).length) + 1;


                    $scope.dateVal = null;
                    $scope.date = null;
                    $scope.leave_days = "";
                    var scope = angular.element($("#Grid")).scope();
                    scope.compile($(".gridform"));
                }
all functionality works fine but 

as while editing record in grid  ID will not allowed to edit in the same manner while adding record i have to not allow that auto incremented value from ID text box
i.e. i have disable that field

gomtesh
Replied On March 20, 2015 10:49 AM UTC

In Sample-118341.zip i have make some changes and while adding new record i have set ID value as autoincreamented,

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

//here i have set  
 $scope.leave_id = (JSON.parse(localStorage.getItem('leaveList')).length) + 1;


                    $scope.dateVal = null;
                    $scope.date = null;
                    $scope.leave_days = "";
                    var scope = angular.element($("#Grid")).scope();
                    scope.compile($(".gridform"));
                }
all functionality works fine but 

as while editing record in grid  ID will not allowed to edit in the same manner while adding record i have to not allow that auto incremented value from ID text box
i.e. i have disable that field

Also in editing and adding record in grid 

there is reason field is there i have tried to that as text area of two rows but it not working for text area
bcoz it not fetching therecord value while editing record

Prasanna Kumar Viswanathan [Syncfusion]
Replied On March 23, 2015 02:08 PM UTC

Hi Gomtesh,

Thanks for the update,

Query 1 : “provide required field validation for all fields”

Your requirement have been achieved by using e-validationrules-required property of columns in angular grid. Please find the below code snippet

<div id="Grid" ej-grid e-datasource="data1" e-toolbarsettings-showtoolbar='true' e-toolbarsettings-toolbaritems='tools' e-editsettings-allowdeleting=' true'

e-editsettings-allowediting='true' e-editsettings-allowadding='true' e-allowpaging="true" e-beginedit="disableedit"

e-editsettings-editmode='dialogtemplate' e-editsettings-inlineformtemplateid="#template" e-selectedrowindex="selectedRow" e-allowsorting="true" e-endedit="endedit" e-actioncomplete="complete">

<div e-columns>

<div e-column e-field="leave_id" e-headertext="SrNo" e-isprimarykey="true" e-textalign="center" e-validationrules-required="true"></div>

<div e-column e-field="from_date" e-headertext="From Date" e-textalign="center" e-format="{0:dd-MMM-yyyy}" e-validationrules-required="true"></div>

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

<div e-column e-field="no_of_days" e-headertext="Leave days" e-textalign="center" e-validationrules-required="true"></div>

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

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

</div>

</div>

For your convenience we have created a sample and sample can be downloaded from the below link

Query 2 : “ Have to disable the field while adding record with auto – incremented value”

Your requirement have been achieved by the use {{if}} and {{else}} jsrender template tag. While adding new record we set ID value as autoincremented by using ng –model directive and jquery addClass we disable the ID value.

Please find the below code snippet :

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

{{if leave_id}}

<input id="leave_id" name="" value="{{:leave_id}}" disabled="disabled" class="e-field e-ejinputtext valid e-disable col-lg-10 col-md-10 col-xs-10 col-sm-10 syncfusion_textboxes_height" />

{{else}}

<input id="leave_id" name="" ng-model="leave" disabled="disabled" class="e-field e-ejinputtext valid e-disable col-lg-10 col-md-10 col-xs-10 col-sm-10 syncfusion_textboxes_height" />

{{/if}}

</td>

------------------------------------------------------------------------------------

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

$scope.leave = ($scope.data1).length + 1;

$($(args.target).find(".e-addedrow").find('input')[0]).addClass("e-disable");

$scope.dateVal = null;

$scope.date = null;

$scope.leave_days = "";

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

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

}

For your convenience we have created a sample and sample can be downloaded from the below link

Sample Link : http://www.syncfusion.com/downloads/support/forum/118341/Sample-118341-1128883569.zip

Query 3 : “it not fetching the record value while editing record”

While using textarea field we suggest to define the value in the inner html. Then only the data can be binded while editing or adding record. Please find the below code snippet

<textarea id="reason" name="reason" class="e-field ej-textarea valid col-lg-12 col-md-12 col-xs-12 col-sm-12 " rows="2" >{{: reason}}</textarea>

For your convenience we have created a sample and sample can be downloaded from the above link

If we misunderstand your query please get back to us, we will happy to assist you,

Regards,

Prasanna Kumar N.S.V


gomtesh
Replied On March 24, 2015 07:34 AM UTC

Hi Prasanna,

thanks for reply as your sample code works properly for query 3

but in query 1::
e-validationrules-required="true"
works with only from_date and to_date but not with reason,no_of_days and statusfield while add and editing record in grid.

alson in query 2::

it show disabled field then also it is editable field

please check it in your sample 

Balaji Marimuthu [Syncfusion]
Replied On March 25, 2015 01:27 PM UTC

Hi Gomtesh,

We are sorry about the inconvenience caused.

Query: works with only from_date and to_date but not with reason,no_of_days and statusfield while add and editing record in grid.

We have modified the sample and please find the sample and code snippet.

Sample: Sample-118341.zip

We suggest you to use the field name as id attribute for the input template. Because validation is worked based on id attribute only. And please refer the sample for further details.

<tr>

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

No. of Days

</td>

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

<input id="no_of_days" name="no_of_days" e-size="large" value="{{: no_of_days}}" class="col-lg-10 col-md-10 col-xs-10 col-sm-10 e-field ejinputtext syncfusion_textboxes_height" e-change="noofdays()" ng-change="noofdays()" e-value="leave_days" ng-model="leave_days" e-decimalplaces="1" valid-number>

</td>

</tr>

Query: it show disabled field then also it is editable field

Your requirement is achieved by using the actionComplete event in Grid and set the disabled attribute to the “leave_id” column for disabled the column value and also as non-editable.

$scope.complete = function (args) {

if (args.requestType == "save")

debugger

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

$scope.leave = ($scope.data1).length + 1;

$($(args.target).find(".e-addedrow").find('input')[0]).addClass("e-disable").attr("disabled","disabled");

$scope.dateVal = null;

$scope.date = null;

$scope.leave_days = "";

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

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

}

Please let us know if you have any queries.

Regards,

Balaji Marimuthu


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

;