Regarding igvalidation in iggrid in asp.net core mvc

Rohit Rawat asked on Nov 20, 2025 9:53 AM

Hello everyone,

So , I created a mvc project to bind and display data in igrid. The data binding and display part is done but now i want to apply validation in each column. I m confused how to do that. Can anyone please help me out with it with suitable example. The documentation shows use of igvalidator by targeting each element with id. but i have not created any elements i have created columns in grid and displayed data.

Here's my view code Please let me know how to apply validation and custom error messages with validations.

@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> .*@

</head>
<body>

</table>
</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”,
readonly: true,
required: true,

}
]
}
]
});

$("#savechanges").on("click", function () {
alert("Save button clicked");
// Save changes when the button is clicked
$("#grid").igGrid("saveChanges");
});
});

</script>

}

Replies

0

Ivan Kitanov answered on Nov 6, 2023 1:27 PM

Hello Rohit,

Thank you for posting in our forums.

I recommend you reviewing the following forum posts that provide detailed information regarding how validation could be applied to the grid:

https://www.infragistics.com/community/forums/f/ignite-ui-for-jquery/85465/iggrid-validation-on-multiple-columns

https://www.infragistics.com/community/forums/f/ignite-ui-for-jquery/118345/iggrid-roweditdialog-custom-validation-error-messages

0

Rohit Rawat answered on Nov 7, 2023 3:44 AM

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.
- 0
  
  Ivan Kitanov answered on Nov 7, 2023 9:43 AM
  
  Hello Rohit,
  
  Regarding the editorType, I recommend you reviewing the following documentation page, which provides information about the editorType property. It specifies the type of editor to use for the column and when it is set to text, an igTextEditor will be created for the column, which takes string data, that could also be a number as well as a regular text.
  
  For your second questions, this line of code is used to retrieve the HTML element associated with the igValidator. It allows you to work with the validation component for this specific column, so that you could set or modify validation-related options.
  
  For your final question I recommend you reviewing the following forum post, which explains how a cascading combo could be creating inside the igGrid and provides a small sample with three different combos that depend on each other.
  
  Please let me know if you need any further assistance.
  
  Regards,
  Ivan Kitanov
- 0
  
  Rohit Rawat answered on Nov 7, 2023 10:22 AM
  
  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>
  
  }
- 0
  
  Ivan Kitanov answered on Nov 8, 2023 6:00 AM
  
  Hello Rohit,
  
  I believe that the same question is addressed in this forum post, where my colleague has provided a detailed explanation and a working sample. Please keep in mind that according to our support policy we handle a single issue per case/forum post, considering this my suggestion would be to continue the conversation there.
  
  This makes the information in our forum easily discoverable and helps other community members benefit from the threads consistency. Additionally, it helps us provide you with better and more accurate support.
  
  Thank you for your cooperation.
  
  Regards,
  Ivan Kitanov