Custom Validation or Error Message from Server
Hi
Chris Franz,
Greetings from Syncfusion support.
Query#1: Looking at the client side validation I can only get the
value in the control and I don't have dynamic access to the other fields in the
row. Hopefully I missed something.
You can access the other field's value within the validation function by
selecting the input from the parent row. Refer to the code example below for
more details.
|
function customFn(args) { var parentRow = args.element.closest('tr'); var FreightValue = parentRow.querySelector('#GridFreight').ej2_instances[0].value; // here “Grid” is the Grid component id value; return args['value'].length >= 5; };
|
In the screenshot below, the custom validation function is triggered for the CustomerID field, and within it, the Freight field value is accessed.
|
|
Query#2: I would like to do is to set the STEP property of the numericedit based on the increment in other words row by row. I haven't found a way to do this either.
You can dynamically customize the edit control within the "actionComplete" event. Refer to the code example below, where the step is modified only if the Role value of that row is "Admin".
|
function actionComplete(args) { if (args.requestType == 'beginEdit' && args.rowData.Role == 'Admin') { args.row.querySelector('.e-numerictextbox').ej2_instances[0].step = 2; } }
|
https://ej2.syncfusion.com/javascript/documentation/api/grid/#actioncomplete
Query#3: I can check the values on the server and return an error.
However, I need to check more than one value in my case the order total cannot
exceed a limit. Therefore I want to return a custom error message so the user
knows which rule was violated.
You can perform the server-side validation by using the “actionBegin”
event of the Grid component. Inside the event handler with “save”
requestType, you can prevent the default save action by setting the “args.cancel”
property as true and perform the server-side validation. Based on the
validation result, you can save the values or hold the Grid on edit state.
Please refer to the below code example and KB link for more information.
|
var doValidation = true; function actionBegin(e) { var grid = document.getElementById("InlineEditing").ej2_instances[0]; if (e.requestType === 'save') { if (doValidation) { // Flag to allow validation, initial value is true e.cancel = true; // Cancel the default "save" action // Perform the server validation var ajax = new ej.base.Ajax({ url: "/Home/Data", type: "POST", contentType: 'application/json; charset=utf-8', data: JSON.stringify({ value: e.data["CustomerID"] }), successHandler: function (data) { // Display the message when value has duplicate if (JSON.parse(data).result) { alert("Entered value contains Duplicate CustomerID"); } else { doValidation = false; grid.endEdit(); } } }); ajax.send();
} else { doValidation = true; } } }
|
https://support.syncfusion.com/kb/article/11608/how-to-do-server-side-validation-for-grid-in-asp-net-mvc-application
Please get back to us if you need further assistance.
Regards,
Pavithra S
Chris,
Query#1: I am not getting any information about the element as
referenced in your example above. Here is the code that I am using for the load
event and my custom function
By default, the custom validation function receives the element currently being validated. Please see the screenshot below.
|
|
However, you can also retrieve the value of another field by accessing the grid edit form element, as shown in the example below.
|
function customFunction(args) {
var grid = document.getElementById('dgOrderDetail').ej2_instances[0];
// here “Freight” is the field name. you can replace this field name here. var value = grid.editModule.formObj.element.querySelector( '#' + grid.element.id + 'Freight').ej2_instances[0].value; return args['value'] % value == 0; // change the code here as per your requirement. }
|
Query#2: Moving
the code to the beginEdit event fires before editing but the step value is
never changed.
You
can achieve the same inside the beginEdit event by using the below code
example.
|
function beginEdit(args) { if (args.requestType === 'beginEdit') { let column = grid.getColumnByField('Freight'); // here replace your field name with “Freight” column.edit.params = { step: args.rowData.Increment}; } }
|
https://ej2.syncfusion.com/javascript/documentation/api/grid#getcolumnbyfield
