Replies
Hello Team,
I am facing an issue with the datepicker control.
Suppose a record is saved with the current date, and the datepicker’s minimum and maximum range is set from the current date up to the next three months.
Now, if the user edits that same record after two days, the datepicker resets the value to the new current date and shows a validation message stating that the previously saved date is out of range.
However, my requirement is that when editing the record, the previously saved date should still be displayed in the calendar without triggering the “out of range” validation error. The min and max range can remain the same, and it is acceptable if the user is not allowed to reselect that older date again. But it should be visible when the record is opened in edit mode for the first time.
Example:
If a record was saved on 24 Feb 2026, and today is 26 Feb 2026, when editing the record, the datepicker should still display 24 Feb 2026 even though the current allowed range is from 26 Feb 2026 to the next three months.
Could you please help me with this? It is quite important.
Thank you.
Hello georgi,
Thanks you so much for your response. It was really helpful. Just i need alil more help
I m really confused with the following
1) $("#grid").igGridUpdating("editorForKey", "id");
2) $("#grid").igGridUpdating("editorForKey", "id").data(igvalidator)
3)$("#grid").igGridUpdating("editorForKey", "id").data(igvalidator). element.
Does the first one provide the column value? And why we cant use first one to target the column in which we have to change the required property and what does the second one give?.
Hello ivan,
So, when I m using validation directly without combo box its working fine. but when i use a combo box its throwing error " Cannot read properties of null (reading 'data')" which is coming due to the last else.But when i m not using combo and using .data("igvalidator").element its working fine why is this happening?could you explain alittle.
Note- I m basically tryin to check if marks field has value less than 50 then imagepath column is optional else its required.
@using Infragistics.Web.Mvc;
@using System.Text.Json
@*@model IEnumerable<GridTransaction.Models.Student>*@
@* The Ignite UI for MVC Grid data source uses LINQ and therefore only accepts instances of IQueryable<T>.
Even when you opt to use the GridMode you will explicitly set the DataSource property which
requires an instance of IQueryable<T> .*@
<html>
<head>
</head>
<body>
<div>
<table id="grid">
</table>
</div>
<div class="text-center">
<button id="savechanges" class="btn btn-primary">Save</button>
</div>
</body>
</html>
@section scripts{
@*Batch Update*@
<script>
$(function () {
$("#grid").igGrid({
primaryKey: "id",
renderCheckboxes: true,
autoGenerateColumns: false,
updateUrl: "/Student/put/",
width: "100%",
columns: [
{ headerText: “Student ID”, key: “id”, dataType: “number”, width: “15%” },
{ headerText: “Student Name”, key: “name”, dataType: “string”, width: “30%” },
{ headerText: “Marks”, key: “marks”, dataType: “number”, width: “30%” },
{
headerText: “Image”,
key: “imagepath”,
dataType: “string”,
width: “15%”,
template: “<img src=’${imagepath}’ width=’50’ height=’50’ />”
},
{ headerText: “Subject”, key: “subject”, dataType: “string”, width: “15%” }
],
dataSourceUrl: "/Student/Data12",
dataSource: "/Student/Data",
features: [
{
name: "Selection",
mode: "row",
multipleSelection: true
},
{
name: "RowSelectors",
enableCheckBoxes: true,
enableRowNumbering: true
},
{
name: "GroupBy"
},
{
name :"Paging",
type:"local",
pageSize : 7
},
{
name: "Filtering",
columnSettings: [
{
columnKey: “selectColumn”,
allowFiltering: false
}
]
},
{
name: "Sorting",
type: "remote",
// sortUrlKey: 'sort',
// sortUrlKeyAscValue: 'asc',
// sortUrlKeyDescValue: 'desc'
},
{
name: "Updating",
enableAddRow: true,
editMode: "row",
validation: true,
enableDeleteRow: true,
rowAdded: function (evt, ui) {
// Custom logic to execute when a row is added
console.log("Event arguments (ui):", ui);
console.log("Row data:", ui.rowId);
console.log(typeof (ui.values));
},
columnSettings: [
{
columnKey: "id",
readOnly: true
},
{
columnKey: "name",
editorType: "text",
validation: true,
editorOptions: {
validatorOptions:
{
required: {
errorMessage: "You must enter a value to submit."
},
custom: function(ui,evt){
var validator = $("#grid").igGridUpdating("editorForKey", "name").data("igValidator").element;
console.log(validator);
if (ui == "rohit") {
$(validator).igValidator("option", "errorMessage", "cant enter name rohit");
return false;
}
return true;
}
}
}
},
{
columnKey: "marks",
editorType: "combo",
validation: true,
editorOptions: {
mode: "dropdown",
dataSource: [
{ “ID”: 0, “Name”: “Food” },
{ “ID”: 1, “Name”: “Beverages” },
{ “ID”: 2, “Name”: “Electronics” }
],
textKey: "Name",
valueKey: "ID",
validatorOptions: {
required: {
errorMessage: "You must enter a value to submittt."
},
custom:function(ui,evt){
console.log(ui);
console.log("hi");
if (ui >= 50) {
console.log(ui);
var validator1 = $("#grid").igGridUpdating("editorForKey", "imagepath").data("igValidator").element;
// var validator11 = $("#grid").igGridUpdating("editorForKey", "imagepath");
// console.log(validator11);
// console.log("hi");
// console.log(validator11);
// var validator12 = $("#grid").igGridUpdating("editorForKey", "imagepath").data("igValidator");
// console.log(validator12);
//Set
$(validator1).igValidator("option", "required", true);
$(validator1).igValidator("option", "errorMessage", 'This field is required for marks between 50-100');
return true;
}
else {
var validator1 = $("#grid").igGridUpdating("editorForKey", "imagepath").data("igValidator").element;
//Set
$(validator1).igValidator("option", "required", false);
return true;
}
}
}
}
}
]
}
]
});
$("#savechanges").on("click", function () {
alert("Save button clicked");
// Save changes when the button is clicked
$("#grid").igGrid("saveChanges");
});
});
</script>
}
need alittle more help with the following things mentioned below:-
1) editorType: "text" if we specify this the field is still taking number inputs why that?
2)var validator = $("#grid").igGridUpdating("editorForKey", "Widget").data("igValidator").element; can you explain alittle about this line.
3) how to insert dropdown in grid and how to use custom function to select their value. I want one dropdown value to be dependent on other.
Looking forward to your response.