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> .*@
<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", readonly: true, required: true, } ] } ] });
$("#savechanges").on("click", function () { alert("Save button clicked"); // Save changes when the button is clicked $("#grid").igGrid("saveChanges"); }); });
</script>
}
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://ko.infragistics.com/community/forums/f/ignite-ui-for-jquery/85465/iggrid-validation-on-multiple-columns
https://ko.infragistics.com/community/forums/f/ignite-ui-for-jquery/118345/iggrid-roweditdialog-custom-validation-error-messages
https://ko.infragistics.com/community/forums/f/ignite-ui-for-jquery/97140/input-validation-in-iggrid
Please and let me know if you need any further assistance.
Regards, Ivan Kitanov
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.
Everybody has their own natural *** style, so trying to turn someone into a good Escort in Lodhi Road is almost guaranteed to end in failure. Finding someone who enhances your own style is the key to having amazing ***.
One must visit red-light districts,or “strip joints,” which can be found in many cities nowadays.These districts were once a common place for men to meet and have conversations with Escorts.These days, you can schedule an appointment with a Dwarka Escort Service with only the press of a button,thanks to the proliferation of apps and websites that make it easy to do so. To make the right decision,it’s crucial to have crystal-clear information.
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.
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.
@*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; } } } } } ] } ] });
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.