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.
|
[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> |
|
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);
}; |
|
...
<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>
... |
|
<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> |
|
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]);
}
}
|
|
<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>
|
