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. Image for the cookie policy date

Custom Validation For Start date & End Date in a grid

Hi,
I am trying to apply custom validation for start date and end date column in my grid. The EditType is DatePicker.

I have include my ASP.net Core code below.

I have spent hours trying to work this out and am very frustrated.

Please help!
Steve


ASP.NET Core

<ejs-grid id="Grid"
              allowTextWrap="false"
              toolbar="@(new List<string>() { "Add", "Edit", "Delete", "ExcelExport"})"
              toolbarClick="toolbarClick"
              allowPaging="true"
              allowFiltering="true"
              allowSorting="true"
              allowExcelExport="true"
              showColumnMenu="true"
              created="created">
        <e-data-manager url="@Url.Action("GetRiskMeasureList", "CTS")" insertUrl="@Url.Action("AddRiskMeasure", "CTS")" updateUrl="@Url.Action("UpdateRiskMeasure", "CTS")" removeUrl="@Url.Action("DeleteRiskMeasure", "CTS")" adaptor="UrlAdaptor"></e-data-manager>
        <e-grid-editSettings allowAdding="true"
                             allowEditing="true"
                             allowDeleting="true"
                             mode="Dialog"
                             showDeleteConfirmDialog="true"></e-grid-editSettings>
        <e-grid-filterSettings type="Menu"></e-grid-filterSettings>
        <e-grid-selectionsettings type="Multiple"></e-grid-selectionsettings>
        <e-grid-pagesettings pageCount="4" pageSizes="true"></e-grid-pagesettings>
        <e-grid-columns>
            <e-grid-column field="RiskMeasureID" headerText="RiskMeasure ID" isPrimaryKey="true " visible="false"></e-grid-column>
            <e-grid-column field="MeasureName" headerText="Measure Name" validationRules="@(new { required = true})" format="C2" width="400"></e-grid-column>
            <e-grid-column field="Description" headerText="Description" validationRules="@(new { required = false })" format="C2" width="400"></e-grid-column>
            <e-grid-column field="RiskMeasureID" headerText="Configure Score" Width="170" isPrimaryKey="true" textAlign="Left" width="60" visible="true" allowEditing="false"
                           defaultValue="@ViewBag.Guid" template="<a rel='nofollow' href='/ConfigureScore/Index?MeasureName=${MeasureName}&MeasureId=${RiskMeasureID}'>View</a>"></e-grid-column>
            <e-grid-column field="IsShared" headerText="Shared" width="130" validationRules="@(new { required = false })" type="boolean" displayAsCheckBox="true" editType="booleanedit"></e-grid-column>
            <e-grid-column field="IsPCA" headerText="PCA" width="80" validationRules="@(new { required = false })" type="boolean" displayAsCheckBox="true" editType="booleanedit"></e-grid-column>
            
               <e-grid-column id="FromStartDate" field="StartDate" headerText="Effective Date" type="date" validationRules="@(new { required = true, minDate = [customFn,'Enter valid date']})" width="0" editType="datepickeredit" format="yMd"></e-grid-column>
            
               <e-grid-column id="ToEndDate" field="EndDate" headerText="Expired Date" validationRules="@(new { required = true})" width="0" editType="datepickeredit" format="yMd"></e-grid-column>

        </e-grid-columns>
    </ejs-grid>


<script>

    function customFn(args) {
        return args['value'].date >= ToEndDate.value;
    };
</script>






19 Replies

MF Mohammed Farook J Syncfusion Team November 13, 2018 06:57 AM UTC

Hi Nurul, 
 
Thanks for contacting Syncfusion support. 
 
We suggest you to use the “load” event of Grid to assign custom validation function for the particular column in Grid. In the below code, we have provided the custom validation in the “load” event handler function of Grid component. Please refer to the following code example, 
 
[Index.cshtml] 
 
    <ejs-grid id="Grid" toolbar="@(new List<string>() {"Delete" ,"Add", "Update", "Cancel" })" allowPaging="true" load="load"> 
        <e-data-manager url="/Home/UrlDatasource/" adaptor="UrlAdaptor"></e-data-manager> 
        <e-grid-editsettings allowDeleting="true" allowEditing="true" allowAdding="true"></e-grid-editsettings> 
        <e-grid-columns> 
            ... 
           <e-grid-column field="OrderDate" headerText="Effective Date" type="date" editType="datepickeredit" format="yMd"></e-grid-column> 
            <e-grid-column field="ShippedDate" headerText="Expired Date" validationRules="@(new { required = true})" editType="datepickeredit" format="yMd"></e-grid-column>  
        </e-grid-columns> 
    </ejs-grid> 
</div> 
 
<script> 
    function load() { 
        //Apply custom validation to the “OrderDate” column 
        this.columns[3].validationRules = { required: true, minDate: [customFn, 'Enter valid date'] }; 
    } 
    function customFn(args) { 
        //Provide your Custom validation function here 
       return args['value'].date >= ToEndDate.value; 
    }; 
 
</script> 
 
Please get back to us if you need further assistance. 
 
Regards, 
J Mohammed Farook 



NA Nurul Ain Amira Azhar November 14, 2018 02:53 AM UTC

Hi Mohamed,

Thank you for helping me,

The validation for start date and end date by this code not function yet, can you help me how to solve this problem.

I want the start date and end date effect each other in the grid.

I have include ASP.NET core source code below. 

Thanks you,
Nurul


ASP.NET Core

 <ejs-grid id="Grid"
                              allowTextWrap="false"
                              toolbar="@(new List<string>() { "Add", "Edit", "Delete", "ExcelExport" })"
                              toolbarClick="toolbarClick"
                              allowPaging="true"
                              allowFiltering="true"
                              allowSorting="true"
                              allowExcelExport="true"
                              showColumnMenu="true"
                              created="created"
                              load="load">
                        <e-data-manager url="@Url.Action("PercentilesDS", "Demo")" insertUrl="@Url.Action("AddPercentiles", "Demo")" updateUrl="@Url.Action("UpdatePercentiles", "Demo")" removeUrl="@Url.Action("DeletePercentiles", "Demo")" adaptor="UrlAdaptor"></e-data-manager>
                        <e-grid-editSettings allowAdding="true"
                                             allowEditing="true"
                                             allowDeleting="true"
                                             mode="Dialog"
                                             showDeleteConfirmDialog="true"></e-grid-editSettings>
                        <e-grid-filterSettings type="Menu"></e-grid-filterSettings>
                        <e-grid-selectionsettings type="Multiple"></e-grid-selectionsettings>
                        <e-grid-pagesettings pageCount="4" pageSizes="true"></e-grid-pagesettings>
                        <e-grid-columns>
                            <e-grid-column field="RowId" headerText="No" width="30" visible="true" defaultValue="@ViewBag.RowId" allowEditing="false"></e-grid-column>
                            <e-grid-column field="PercentileID" headerText="Percentiles Id" isPrimaryKey="true" validationRules="@(new { required = true })" visible="false" textAlign="Left" format="C2" width="0" defaultValue="@ViewBag.Guid"></e-grid-column>
                            <e-grid-column id="yellowNumber" field="Yellow" headerText="Yellow (%)" editType="numericedit" textAlign="Left" format="C2" width="50"></e-grid-column>
                            <e-grid-column id="redNumber" field="Red" headerText="Red (%)"  textAlign="Left" editType="numericedit" format="C2" width="50"></e-grid-column>
                            <e-grid-column id="startDate" field="PercentilesStartDate" headerText="Effective Date" width="50" editType="datepickeredit" format="yMd"></e-grid-column>
                            <e-grid-column id="endDate" field="PercentilesEndDate" headerText="Expired Date" width="50" editType="datepickeredit" format="yMd"></e-grid-column>
                            <e-grid-column field="IsActive" headerText="Active" validationRules="@(new { required = false })" width="50" type="boolean" displayAsCheckBox="true" editType="booleanedit"></e-grid-column>
                            <e-grid-column field="RiskRuleID" headerText="RiskRuleID" validationRules="@(new { required = true })" textAlign="Left" format="C2" width="0" defaultValue="@ViewBag.RiskRuleId" visible="false"></e-grid-column>
                        </e-grid-columns>
                    </ejs-grid>
                </div>
            </div>
        </div>
    </div>
</div>   

<script>
    function load() {
    
        //apply custom validation to the yellow and red column
        this.columns[2].validationRules = { required: true, number: true, range: [0, 100]/*, min: [customFn, 'Yellow must less than Red']*/ };
        this.columns[3].validationRules = { required: true, number: true, range: [0, 100] };
         //apply custom validation to the start date & end date
        this.columns[4].validationRules = { required: true, minDate: [customFn, 'Start Date must less than End Date'] };
        this.columns[5].validationRules = { required: true, minDate: [customFn1, 'End Date must less than Start Date'] };
    }
    function customFn(args) {
        //provide your custom validation
        return args['value'].date >= endDate.value;
    };
    function customFn1(args) {
        //provide your custom validation
        return args['value'].date <= startDate.value;
    };

</script>





MF Mohammed Farook J Syncfusion Team November 14, 2018 12:46 PM UTC

Hi Nurul, 
 
From your given code example, we found that you have provided the string date values to comparison. So please change that string date value to date object before comparing it. Please refer the below code snippet, 
 
function customFn(args) { 
        //provide your custom validation 
        var grid = document.getElementById("Grid").ej2_instances[0]; 
        return new Date(args['value']) <= new Date(document.getElementById(grid.element.id + grid.columns[3].field).value); 
    }; 
    function customFn1(args) { 
        //provide your custom validation 
        var grid = document.getElementById("Grid").ej2_instances[0]; 
        return new Date(args['value']) >= new Date(document.getElementById(grid.element.id + grid.columns[2].field).value); 
    }; 
 
 
Please get back to us, If you need further assistance on this. 
 
 
Regards, 
J Mohammed Farook 
 
 



NA Nurul Ain Amira Azhar November 15, 2018 06:51 AM UTC

Hi Mohamed,

Thank you very much for helping me solve this problem,

the validation for start date and end date by your code already function.

Best Regards,
Nurul


MF Mohammed Farook J Syncfusion Team November 15, 2018 09:34 AM UTC

Hi Nurul, 
Thanks for your update. 
We are happy to hear that your problem has been resolved. 
 
Please get back to us if you need further assistance from us. 
Regards, 
J Mohammed Farook 



NA Nurul Ain Amira Azhar November 16, 2018 04:43 AM UTC

Hi Mohamed, 

I have question, how to custom validation date in grid if format: 'dd/MM/yyyy' and date can pick only current date and toward, i had tried to do. Validation still appear when the input a correct date.

Other than that, my issue is the date appear minus 1 when adding new record.

I have include ASP.NET Core code below.

Please solve this problem for me.

Thanks in advance,
Nurul

ASP.NET Core
 <ejs-grid id="Grid"
                              allowTextWrap="false"
                              toolbar="@(new List<string>() { "Add", "Edit", "Delete", "ExcelExport" })"
                              toolbarClick="toolbarClick"
                              allowPaging="true"
                              allowFiltering="true"
                              allowSorting="true"
                              allowExcelExport="true"
                              showColumnMenu="true"
                              created="created"
                              load="load">
                        <e-data-manager url="@Url.Action("PercentilesDS", "Demo")" insertUrl="@Url.Action("AddPercentiles", "Demo")" updateUrl="@Url.Action("UpdatePercentiles", "Demo")" removeUrl="@Url.Action("DeletePercentiles", "Demo")" adaptor="UrlAdaptor"></e-data-manager>
                        <e-grid-editSettings allowAdding="true"
                                             allowEditing="true"
                                             allowDeleting="true"
                                             mode="Dialog"
                                             showDeleteConfirmDialog="true"></e-grid-editSettings>
                        <e-grid-filterSettings type="Menu"></e-grid-filterSettings>
                        <e-grid-selectionsettings type="Multiple"></e-grid-selectionsettings>
                        <e-grid-pagesettings pageCount="4" pageSizes="true"></e-grid-pagesettings>
                    <e-grid-column field="RowId" headerText="No" width="30" visible="true" defaultValue="@ViewBag.RowIdPercentiles" allowEditing="false"></e-grid-column>
                   <e-grid-column field="PercentileID" headerText="Percentiles Id" isPrimaryKey="true" validationRules="@(new { required = true })" visible="false" textAlign="Left" format="C2" width="0" defaultValue="@ViewBag.Guid"></e-grid-column>
                            <e-grid-column field="Yellow" headerText="Yellow (%)" editType="numericedit" textAlign="Left" format="C2" width="50"></e-grid-column>
                            <e-grid-column field="Red" headerText="Red (%)" textAlign="Left" editType="numericedit" format="C2" width="50"></e-grid-column>
                            <e-grid-column  field="PercentilesStartDate" headerText="Effective Date" width="50" editType="datepickeredit"  ></e-grid-column>
                            <e-grid-column  field="PercentilesEndDate" headerText="Expired Date" width="50" editType="datepickeredit"  ></e-grid-column>
                            <e-grid-column field="IsActive" headerText="Active" validationRules="@(new { required = false })" width="50" type="boolean" displayAsCheckBox="true" editType="booleanedit"></e-grid-column>
                            <e-grid-column field="RiskRuleID" headerText="RiskRuleID" validationRules="@(new { required = true })" textAlign="Left" format="C2" width="0" defaultValue="@ViewBag.RiskRuleId" visible="false"></e-grid-column>
                        </e-grid-columns>
                    </ejs-grid>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    function load() {
                   
        this.columns[4].format = { type: 'date', format: 'dd/MM/yyyy' };  // set your customize date format based on your column
        this.columns[5].format = { type: 'date', format: 'dd/MM/yyyy' };  // set your customize date format based on your column

        // //apply custom validation to the start date & end date
        this.columns[4].validationRules = { required: true, minDate: [customFn, 'Start Date must less than End Date'] };
        this.columns[5].validationRules = { required: true, minDate: [customFn1, 'End Date must greater than Start Date'] };
    }     

    function customFn(args) {
      //provide your custom validation
        var grid = document.getElementById("Grid").ej2_instances[0];
        return new Date(args['value']) <= new Date(document.getElementById(grid.element.id + grid.columns[5].field).value);
    };

    function customFn1(args) {
      //provide your custom validation
      var grid = document.getElementById("Grid").ej2_instances[0];
      return new Date(args['value']) >= new Date(document.getElementById(grid.element.id + grid.columns[4].field).value);
    };


</script>




MF Mohammed Farook J Syncfusion Team November 16, 2018 09:34 AM UTC

Hi Nurul, 
 
Query #1: how to custom validation date in grid if format: 'dd/MM/yyyy' and date can pick only current date and toward 
 
We have analyzed your query and we have prepared sample on custom validation for comparing current date with the entered date. Please refer to the below sample for your reference. 
 
Code Example: 
 
[.cshtml] 
... 
<ejs-grid id="Grid" dataSource="ViewBag.DataSource" load="load" allowFiltering="true" allowPaging="true" toolbar="@(new List<string>() {"Add", "Edit",  
... 
           <e-grid-column field="OrderID" headerText="Order ID" width="120"></e-grid-column> 
            <e-grid-column field="OrderDate" headerText="Order Date" editType="datepickeredit" width="120"></e-grid-column> 
            ... 
       </e-grid-columns> 
 
    </ejs-grid> 
</div> 
<script> 
    function load(args) { 
        this.columns[1].format = { type: 'date', format: 'dd/MM/yyyy' }; 
        this.columns[1].validationRules = {required: true, minDate: [myFun, 'Invalid']}; 
    } 
    function myFun(args) { 
        var entered = args.value.split("/");  //changing date format just to compare with current date 
        return new Date(entered[1] + '/' + entered[0] + '/' + entered[2]) >= (new Date()).setHours(0,0,0,0); //comparing current date(excluding current time) with entered date 
    }  
</script> 
... 
 
 
Query #2: Other than that, my issue is the date appear minus 1 when adding new record. 
 
We are unable to reproduce the reported issue at our end. Please provide the below details, it will be helpful for us to provide better solution as soon as possible. 
 
  1. Is there any defaultValue property or field object set to that column?
  2. Please reproduce the reported issue in the given sample if possible.
 
 
Please get back to us for further assistance. 
 
 
Regards, 
J Mohammed Farook 



NA Nurul Ain Amira Azhar November 19, 2018 08:18 AM UTC

Hi Mohamed, 

Thank you very much for helping me, the custom validation for date was function.

#The issue still date appear minus 1 when adding new record, there is no any defaultValue or field object set. 

I have include ASP.NET core code 

Best Regards,
Nurul 

ASP.NET Core

 <ejs-grid id="Grid"
                              allowTextWrap="false"
                              toolbar="@(new List<string>() { "Add", "Edit", "Delete", "ExcelExport" })"
                              toolbarClick="toolbarClick"
                              allowPaging="true"
                              allowFiltering="true"
                              allowSorting="true"
                              allowExcelExport="true"
                              showColumnMenu="true"
                              created="created"
                              load="load">
                        <e-data-manager url="@Url.Action("PercentilesDS", "Demo")" insertUrl="@Url.Action("AddPercentiles", "Demo")" updateUrl="@Url.Action("UpdatePercentiles", "Demo")" removeUrl="@Url.Action("DeletePercentiles", "Demo")" adaptor="UrlAdaptor"></e-data-manager>
                        <e-grid-editSettings allowAdding="true"
                                             allowEditing="true"
                                             allowDeleting="true"
                                             mode="Dialog"
                                             showDeleteConfirmDialog="true"></e-grid-editSettings>
                        <e-grid-filterSettings type="Menu"></e-grid-filterSettings>
                        <e-grid-selectionsettings type="Multiple"></e-grid-selectionsettings>
                        <e-grid-pagesettings pageCount="4" pageSizes="true"></e-grid-pagesettings>
                        <e-grid-columns>
                            <e-grid-column field="RowId" headerText="No" width="30" visible="true" defaultValue="@ViewBag.RowIdPercentiles" allowEditing="false"></e-grid-column>
                            <e-grid-column field="PercentileID" headerText="Percentiles Id" isPrimaryKey="true" validationRules="@(new { required = true })" visible="false" textAlign="Left" format="C2" width="0" defaultValue="@ViewBag.Guid"></e-grid-column>
                            <e-grid-column field="Yellow" headerText="Yellow (%)" editType="numericedit" textAlign="Left" format="C2" width="50"></e-grid-column>
                            <e-grid-column field="Red" headerText="Red (%)" textAlign="Left" editType="numericedit" format="C2" width="50"></e-grid-column>
                            <e-grid-column field="PercentilesStartDate" headerText="Effective Date" type="date" width="50" editType="datepickeredit"></e-grid-column>
                            <e-grid-column field="PercentilesEndDate" headerText="Expired Date" type="date" width="50" editType="datepickeredit"></e-grid-column>
                            <e-grid-column field="IsActive" headerText="Active" validationRules="@(new { required = false })" width="50" type="boolean" displayAsCheckBox="true" editType="booleanedit"></e-grid-column>
                            <e-grid-column field="RiskRuleID" headerText="RiskRuleID" validationRules="@(new { required = true })" textAlign="Left" format="C2" width="0" defaultValue="@ViewBag.RiskRuleId" visible="false"></e-grid-column>
                        </e-grid-columns>
                    </ejs-grid>
                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">

    function load(args) {
     
        this.columns[4].format = { type: 'date', format: 'dd/MM/yyyy' };
        this.columns[4].validationRules = { required: true, minDate: [myFun1, 'Effective Date must less than Expired Date'] };

        this.columns[5].format = { type: 'date', format: 'dd/MM/yyyy' };
        this.columns[5].validationRules = { required: true, minDate: [myFun2, 'Expired Date must greater than Effective Date'] };

    }

    function myFun1(args) {
        var entered = args.value.split("/");
        var grid = document.getElementById("Grid").ej2_instances[0];
        var endDate1 = document.getElementById(grid.element.id + grid.columns[5].field).value;

        if (new Date(entered[1] + '/' + entered[0] + '/' + entered[2]) >= (new Date()).setHours(0, 0, 0, 0)) {
            return args['value'] <= endDate1;
        }

    }

    function myFun2(args) {
        var entered = args.value.split("/");
        var grid = document.getElementById("Grid").ej2_instances[0];
        var startDate1 = document.getElementById(grid.element.id + grid.columns[4].field).value;

        if (new Date(entered[1] + '/' + entered[0] + '/' + entered[2]) >= (new Date()).setHours(0, 0, 0, 0)) {
            return args['value'] >= startDate1;
        }

    }
</script>


MF Mohammed Farook J Syncfusion Team November 20, 2018 09:49 AM UTC

Hi Nurul, 
 
We have validated the reported issue and found that timezoneoffset is cause of this issue. TimezoneOffset will affect the converted string, when we stringify the date object. So we suggest you to use the following solution in actionBegin event of the Grid to resolve this issue. Please refer the following code snippet, 
 
<ejs-grid id="Grid" allowPaging="true" actionBegin="begin"> 
 
            ... 
 
</ejs-grid> 
 
<script>       
 function begin(args) { 
        if (args.requestType == "save") { 
            var grid = document.getElementById("Grid").ej2_instances[0]; 
            var cols = grid.columns; 
            for (var i = 0; i < cols.length; i++) { 
                if (cols[i].type == "date") { 
                    var date = args.data[cols[i].field]; 
                    args.data[cols[i].field] = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMilliseconds())); 
                } 
            } 
        } 
    } 
</script>    
 
 
Refer the below link to know about actionBegin event of the Grid: 
 
 
 
Regards, 
J Mohammed Farook 



NA Nurul Ain Amira Azhar November 21, 2018 08:23 AM UTC

Hi Mohamed,

Thank you very much for helping me! The validation can be made as much as i want by your code.

Best Regards,
Nurul




MF Mohammed Farook J Syncfusion Team November 21, 2018 08:27 AM UTC

Hi Nurul,  
 
Thanks for your update. 
 
We are happy to hear that the provided solution has been resolved your problem. 
 
Please get back to us if you need further assistance. 
 
Regards 
J Mohammed Farook 



MI Muhammad Idywin Zakaria January 29, 2019 07:27 AM UTC

Hi Mohamed,

Thank you for helping me,

Here I found a new problem, the custom validation seems worked, but it comparing only the date and not a full date format dd/MM/yyyy.  

For example:

Start date :29/01/2019
End date :30/01/2019
-VALID

Start date :29/01/2019
End date :03/02/2019
-INVALID

Start date :   29/01/2019
End date :     30/03/2019
-VALID

Can you help me how to solve this problem.

My concern is start date and end date effect each other in the grid.

I have include .NET Core source code below.

<ejs-grid id="Grid"
              allowTextWrap="false"
              toolbar="@(new List<string>() { "Add", "Edit", "Delete", "ExcelExport"})"
              toolbarClick="toolbarClick"
              allowPaging="true"
              allowFiltering="true"
              allowSorting="true"
              allowExcelExport="true"
              allowReordering="true"
              allowResizing="true"
              showColumnMenu="true"
              created="created"
              load="load"
              actionBegin="beginDate">
        <e-data-manager url="@Url.Action("GetRiskMeasureList", "CTS")" insertUrl="@Url.Action("AddRiskMeasure", "CTS")" updateUrl="@Url.Action("UpdateRiskMeasure", "CTS")" removeUrl="@Url.Action("DeleteRiskMeasure", "CTS")" adaptor="UrlAdaptor"></e-data-manager>
        <e-grid-editSettings allowAdding="true"
                             allowEditing="true"
                             allowDeleting="true"
                             mode="Dialog"
                             showDeleteConfirmDialog="true"></e-grid-editSettings>
        <e-grid-filterSettings type="Menu"></e-grid-filterSettings>
        <e-grid-selectionsettings type="Single"></e-grid-selectionsettings>
        <e-grid-pagesettings pageCount="5" pageSize="10" pageSizes="@(new string[] { "5", "10", "20", "All"}) "></e-grid-pagesettings>
        <e-grid-columns>
            <e-grid-column field="RowId" headerText="No." width="70" visible="false" defaultValue="@ViewBag.RowIdRiskMeasure" allowEditing="false" showInColumnChooser="false"></e-grid-column>
            <e-grid-column field="RiskMeasureID" headerText="RiskMeasure ID" isPrimaryKey="true " visible="false" showInColumnChooser="false"></e-grid-column>
            <e-grid-column field="MeasureName" headerText="Measure Name" validationRules="@(new { required = true, minLength = 3})" format="C2" width="300"></e-grid-column>
            <e-grid-column field="Description" headerText="Description" validationRules="@(new { required = false })" format="C2" width="300"></e-grid-column>
            <e-grid-column field="RiskMeasureID" headerText="Configure Score" Width="170" isPrimaryKey="true" textAlign="Center" width="60" visible="true" allowEditing="false" isIdentity="true"
                           defaultValue="@ViewBag.Guid" template="#template" showInColumnChooser="false"></e-grid-column>
            <e-grid-column field="StartDate" id="StartDate" headerText="Effective Date" type="date" width="0" editType="datepickeredit" format="yMd"></e-grid-column>
            <e-grid-column field="EndDate" id="EndDate" headerText="Expired Date" type="date" width="0" editType="datepickeredit" format="yMd"></e-grid-column>
            <e-grid-column field="IsPCA" headerText="Publish" width="130" textAlign="Center" validationRules="@(new { required = false })" type="boolean" displayAsCheckBox="true" editType="booleanedit"></e-grid-column>
            <e-grid-column field="UserId" headerText="UserId" textAlign="Left" width="0" visible="false" defaultValue="@ViewBag.UserId" showInColumnChooser="false"></e-grid-column>
        </e-grid-columns>
</ejs-grid>

<script>
    function load() {

        //apply custom validation to the startDate && endDate column
        this.columns[5].format = { type: 'date', format: 'dd/MM/yyyy' };
        this.columns[5].validationRules = { required: true, minDate: [myFun1, 'Please enter a valid date & date cannot be in the past'] };

        this.columns[6].format = { type: 'date', format: 'dd/MM/yyyy' };
        this.columns[6].validationRules = { required: true, minDate: [myFun2, 'Please enter a valid date & Expired Date must be greater than Effective Date'] };
    }

    function myFun1(args) {
        var entered = args.value.split("/");
        var grid = document.getElementById("Grid").ej2_instances[0];
        var endDate1 = document.getElementById(grid.element.id + grid.columns[6].field).value;
        var startDate1 = document.getElementById(grid.element.id + grid.columns[5].field).value;
        if (endDate1 != "" || startDate1 != "") {
            if (endDate1 == "") {
                if (new Date(entered[1] + '/' + entered[0] + '/' + entered[2]) >= new Date().setHours(0, 0, 0, 0)) {
                    return args['value'] ;
                }
            } else {
                if (new Date(entered[1] + '/' + entered[0] + '/' + entered[2]) >= new Date().setHours(0, 0, 0, 0)) {
                    return args['value'] <= endDate1;
                }
            }
        }
        else {
            return true;
        }
    }

    function myFun2(args) {
        var entered = args.value.split("/");
        var grid = document.getElementById("Grid").ej2_instances[0];
        var endDate1 = document.getElementById(grid.element.id + grid.columns[6].field).value;
        var startDate1 = document.getElementById(grid.element.id + grid.columns[5].field).value;
        if (endDate1 != "" || startDate1 != "") {
            if (startDate1 == "") {
                if (new Date(entered[1] + '/' + entered[0] + '/' + entered[2]) >= new Date().setHours(0, 0, 0, 0)) {
                    return args['value'];
                }
            } else {
                if (new Date(entered[1] + '/' + entered[0] + '/' + entered[2]) >= new Date().setHours(0, 0, 0, 0)) {
                    return args['value'] >= startDate1;
                }
            }

        }
        else {
            return true;
        }
    }
</script>



TS Thavasianand Sankaranarayanan Syncfusion Team January 30, 2019 12:49 PM UTC

Hi Muhammad, 

We have analyzed the reported problem with the sample from our previous update. We suggest you to add and replace the below highlighted lines in the sample from our previous update to overcome the reported problem. Previously the return from the custom validation function was with string values, which is the cause of the problem. So now we have compared date values which solves the problem. Please refer the code example below, 

 
    function myFun1(args) { 
       var entered = args.value.split("/"); 
        var grid = document.getElementById("Grid").ej2_instances[0]; 
        var endDate1 = document.getElementById(grid.element.id + grid.columns[3].field).value; 
        var enddatesplitted = endDate1.split("/"); 
        if (new Date(entered[1] + '/' + entered[0] + '/' + entered[2]) >= (new Date()).setHours(0, 0, 0, 0)) { 
            //Here we have compared date values(previously the comparison was with string values which is the cause of problem) 
            return new Date(entered[1] + '/' + entered[0] + '/' + entered[2]) <= new Date(enddatesplitted[1] + '/' + enddatesplitted[0] + '/' + enddatesplitted[2]); 
        } 
    } 
 
    function myFun2(args) { 
       var entered = args.value.split("/"); 
        var grid = document.getElementById("Grid").ej2_instances[0]; 
        var startDate1 = document.getElementById(grid.element.id + grid.columns[2].field).value; 
        var startDateplitted = startDate1.split("/"); 
        if (new Date(entered[1] + '/' + entered[0] + '/' + entered[2]) >= (new Date()).setHours(0, 0, 0, 0)) { 
            //Here we have compared date values(previously the comparison was with string values which is the cause of problem) 
            return new Date(entered[1] + '/' + entered[0] + '/' + entered[2]) >= new Date(startDateplitted[1] + '/' + startDateplitted[0] + '/' + startDateplitted[2]); 
        } 
    } 


Please get back to us if you need further assistance. 

Regards, 
Thavasianand S. 



MI Muhammad Idywin Zakaria February 7, 2019 01:56 AM UTC

Hi Thavasianand,

Your solution is working. Thanks a lot.


PS Pavithra Subramaniyam Syncfusion Team February 7, 2019 04:20 AM UTC

Hi Nurul,  

Thanks for your update.  

We are happy to hear that the provided information helps you. 

Please contact us if you need any further assistance. As always, we will be happy to assist you.  

Regards,  
Pavithra S. 



HA haryzad March 25, 2019 06:27 AM UTC

Hi Pavithra

I'm referring to the above solution that has been provided by syncfusion support previously.
Base on that, now we have the problem to send the blank value for the date.

e.g for the start date we have 20/12/2018 but for the end date we will let it blank, so the value will be infinity / null that refer no end date.

Can you advice; refer to the attachment on code that has been combine from above soution

Thanks

Attachment: DatePicker_587ecd6f.rar


PS Pavithra Subramaniyam Syncfusion Team March 25, 2019 11:33 AM UTC

Hi Haryzad, 
 
Thanks for contacting Syncfusion support. 
 
We have analyzed your requirement. We suspect that your requirement is that, you would like to save empty value for the “EndDate” column in Grid. We suggest you to replace the sample from our previous update with the below highlighted codes to achieve this requirement. 
 
 
<script type="text/javascript"> 
    function load() { 
        this.columns[2].format = { type: 'date', format: 'dd/MM/yyyy' }; 
        this.columns[2].validationRules = { required: true, minLength: [myFun1, 'Effective Date must less than Expired Date'] }; 
        this.columns[3].format = { type: 'date', format: 'dd/MM/yyyy' }; 
        this.columns[3].validationRules = { required: [myFun2, 'Expired Date must greater than Effective Date'] };    //set “required” instead of “minDate” and remove “required: true”. 
    } 
 
    function myFun1(args) { 
        var entered = args.value.split("/"); 
        var grid = document.getElementById("Grid").ej2_instances[0]; 
        var endDate1 = document.getElementById(grid.element.id + grid.columns[3].field).value; 
        var enddatesplitted = endDate1.split("/");  
        if (new Date(entered[1] + '/' + entered[0] + '/' + entered[2]) >= (new Date()).setHours(0, 0, 0, 0)) { 
           var returnfnval = endDate1 == "" ? true : new Date(entered[1] + '/' + entered[0] + '/' + entered[2]) <= new Date(enddatesplitted[1] + '/' + enddatesplitted[0] + '/' + enddatesplitted[2]);              //Check for empty value of enddate and return true if enddate is “” . 
            return returnfnval;  
        } 
    } 
 
    function myFun2(args) { 
        var entered = args.value.split("/"); 
        var grid = document.getElementById("Grid").ej2_instances[0]; 
        var startDate1 = document.getElementById(grid.element.id + grid.columns[2].field).value; 
        var endDate1 = document.getElementById(grid.element.id + grid.columns[3].field).value; 
        var startDateplitted = startDate1.split("/");  
        if (new Date(entered[1] + '/' + entered[0] + '/' + entered[2]) >= (new Date()).setHours(0, 0, 0, 0)) { 
           var returnfnval = endDate1 == "" ? true : new Date(entered[1] + '/' + entered[0] + '/' + entered[2]) >= new Date(startDateplitted[1] + '/' + startDateplitted[0] + '/' + startDateplitted[2]);              //Check for empty value of enddate and return true if enddate is “” . 
            return returnfnval; 
        } 
 
    } 
 
    function begin(args) { 
        if (args.requestType == "save") { 
            var grid = document.getElementById("Grid").ej2_instances[0]; 
            var cols = grid.columns; 
            for (var i = 0; i < cols.length; i++) { 
                if (cols[i].type == "date") { 
                    var date = args.data[cols[i].field]; 
                    args.data[cols[i].field] = date == null ? date : new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMilliseconds()));                   //Check for “date” value as null. If its null, don’t do date calculations. 
                } 
            } 
        } 
    } 
</script>     
 
 
In the above code, we have set the “required” property as “customfn” instead of “minDate” for the “EndDate” field, and also we have removed “required:true”. Then in the custom functions “myFun1”, “myFun2”  we will be return “true” if the end date value is “”. And finally in the “actionBegin” handler we have checked for the “date” is null, based on that we will be returning the value. 
 
If we have misunderstood your query, we need more details to further look into the problem, please get back to us with the following details for better assistance. 
  1. Share the detailed description of your complete requirement.
  2. Share the details of the problem or script error you are facing in achieving your requirement.
  3. Share the screenshot/video demo showing your complete requirement or the problem you are facing.
 
The provided information will help us analyze the problem, and provide you a solution as early as possible. 
 
Regards, 
Pavithra S. 



HA haryzad March 26, 2019 01:12 AM UTC

Hi Pavitha

Appreciate and thanks for the feedback, let me run through the given solution with my application;
if there are any information required, will let you know.

Thanks 




PS Pavithra Subramaniyam Syncfusion Team March 26, 2019 05:37 AM UTC

Hi Haryzad, 

Please contact us if you need any further assistance. As always, we will be happy to assist you.  

Regards, 
Pavithra S. 



Loader.
Live Chat Icon For mobile
Up arrow icon