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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Custom Validation For Start date & End Date in a grid

Thread ID:

Created:

Updated:

Platform:

Replies:

140862 Nov 12,2018 07:44 AM UTC Nov 21,2018 08:27 AM UTC ASP.NET Core - EJ 2 11
loading
Tags: Grid
Nurul Ain Amira Azhar
Asked On November 12, 2018 07:44 AM UTC

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>






Mohammed Farook J [Syncfusion]
Replied On 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 


Nurul Ain Amira Azhar
Replied On 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>




Mohammed Farook J [Syncfusion]
Replied On 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 
 
 


Nurul Ain Amira Azhar
Replied On 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

Mohammed Farook J [Syncfusion]
Replied On 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 


Nurul Ain Amira Azhar
Replied On 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>



Mohammed Farook J [Syncfusion]
Replied On 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 


Nurul Ain Amira Azhar
Replied On 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>

Mohammed Farook J [Syncfusion]
Replied On 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 


Nurul Ain Amira Azhar
Replied On 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



Mohammed Farook J [Syncfusion]
Replied On 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 


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

;