Regarding custom validation when one field is dependent on other.
New Discussion
Hello everyone,
So, I have created a grid and populated it with data. So i have two doubts.
1) how to target a particular field for custom validation. I have used it here but i couldnt understand how its getting the element.
2) suppose i have two columns marks and image. So i want to apply a validation that if marks is greater than 60 and less than 100 then image field is mandatory else it is optional . can you help me like how to do that.
Heres my code,
<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;
}
}
}
}
]
}
]
});
var editor = $("#grid").igGridUpdating("editorForKey", "id");
alert(editor);
$("#savechanges").on("click", function () {
alert("Save button clicked");
// Save changes when the button is clicked
$("#grid").igGrid("saveChanges");
});
});
</script>
Replies
-
Hello,
I have been looking into your question and what I could recommend you:
1) Regarding your first question, when you define the features to add in the igGrid with the features property, you will define the Updating feature. You can then handle the columnSettings property and target each column you want to validate with the columnKey property by passing the column key.
features: [ { name: "Updating", enableAddRow: true, editMode: "row", enableDeleteRow: true, columnSettings: [ { columnKey: "FirstName", editorType: "text", } ] } ]Then to enable the validation you will handle the valdation property and set it to true. You can use validatorOptions in the editorOptions and set validation messages, additional validations, or custom validations with the custom function. In this function you can access the validator of each field of the currently edited row using igGridUpdating on the grid selector #grid and use the editorForKey option by providing it with the column key to access the cell field of that column. With this validator you can set various validation properties as well as change them at runtime as per each individual field in the currently edited row.
features: [ { name: "Updating", enableAddRow: true, editMode: "row", enableDeleteRow: true, columnSettings: [ { columnKey: "FirstName", editorType: "text", valdation: true, editorOptions: { validatorOptions: { required: { errorMessage: "You must enter a first name!" }, custom: function (ui, fieldOptions) { var validator = $("#grid").igGridUpdating("editorForKey", "FirstName").data("igValidator"); return true; } } } },2) Regarding your second question by using custom function you can trace what is the field value in the cell of a particular column and based on that value in your scenario as per your requirement you can set the next field in the next cell or field from which cell you want to be required using igValidator of the validator you have taken for a certain cell and set the required option to true. Also, based on the edited values, you can add a validation message about this field again with igValidator of your chosen validator for a specific cell and handle the errorMessage option by setting a specific validation message.
custom: function (ui, fieldOptions) { var scoreValidator = $("#grid").igGridUpdating("editorForKey", "FirstName").data("igValidator").element; var gradeValidator = $("#grid").igGridUpdating("editorForKey", "Grade").data("igValidator").element; if(ui>0){ $(gradeValidator).igValidator("option", "required", true); $(gradeValidator).igValidator("option", "errorMessage", 'Enter Grade too!'); return true; } return true; }The described scenario could be observed here:
In addition, I have prepared small sample illustrating this behavior which could be found here. Please test it on your side and let me know how it behaves.
If you require any further assistance on the matter, please let me know.
Regards,
Georgi Anastasov
Entry Level Software Developer
Infragistics
-
- You must be logged in to reply to this topic.
Rohit Rawat
