We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Validate grid row and remain focus

Hi. I have a grid with 2 fields: field-1 and field-2. I would like to validate row and show custom alert to user. My expected behavior is:

- User enter value for new row,
- User click Save icon in grid toolbar,
- Validate row (I would like to validate field-1 value based on field-2 value.), and if fails, show a custom alert to user using toastr lib, not error message at cell value when using column.validationRules.
- And should still remain focus on the new row.

I tried using event endAdd but it did not work.
function endAdd(args) {
   if(invalid) { args.cancel = true; }

Could you please help? Thanks.

3 Replies

MS Mani Sankar Durai Syncfusion Team June 7, 2017 11:33 AM UTC

HI Nga, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and based on your requirement we have prepared a sample that can be available from the below link. 

In this sample we have shown toastr lib alert message when the validation gets failed. Also we have set the validation for one column based on another column.  This was handled inside the actionBegin event in grid. 
From your code example we found that you are trying to cancel the added record when the validation gets failed in endAdd event of grid. So instead of using endAdd we suggest you to use actionBegin event in grid. 

Refer the code example. 
    <script type="text/javascript"> 
        $(function () {// Document is ready. 
                columns: [ 
                      { field: "OrderID", headerText: "Order ID", width: 100, isPrimaryKey: true }, 
                      { field: "Verified", width: 100, editType: ej.Grid.EditingType.Boolean }//checkbox column 
                actionBegin: "begin" 
       function begin(args) {         //triggers for every grid action 
            if (args.requestType == "save") {     
        //calls when the requestType is save (i.e clicking save button in toolbar) 
                if ($("#GridVerified").is(":checked") != true) { //when saving if the checkbox is not checked. 
                    args.cancel = true; 
                    toastr.error('change the checkbox to true', 'validation fails'); 
                    var grid = $("#Grid").ejGrid("instance"); 
                    var inputelement = grid.element.find("form").find('.e-checkbox'); 
                else         //if checkbox is checked shown success toastr message 
                    toastr.success('Validation succeeded and data saved'); 
        $(function (c) { 
            $(document).on("change", "#GridVerified", function (c) {  //triggers when changing the checkbox value 
                if (c.target.checked == true) { 
                    toastr.success('CheckBox value changed'); 

Also refer the following script and CSS to shown the toastr notifications. 
<link rel='nofollow' href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/css/toastr.css" rel="stylesheet" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/js/toastr.js"></script> 

Refer the documentation link  

Please let us know if you need further assistance. 

Manisankar Durai. 

NG Nga June 8, 2017 02:50 AM UTC

Thank you.

TS Thavasianand Sankaranarayanan Syncfusion Team June 8, 2017 04:02 AM UTC

Hi Nga, 
We are happy that the problem has been solved. 
Please get back to us if you need any further assistance.  
Thavasianand S. 

Live Chat Icon For mobile
Up arrow icon