Validate grid row and remain focus

[Nga]

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.

[Mani Sankar Durai]

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. 

Link: https://jsplayground.syncfusion.com/orj3q3u3 

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. 

            $("#Grid").ejGrid({ 

... 

                columns: [ 

                      { field: "OrderID", headerText: "Order ID", width: 100, isPrimaryKey: true }, 

                      { field: "Verified", width: 100, editType: ej.Grid.EditingType.Boolean }//checkbox column 

                ], 

                actionBegin: "begin" 

            }); 

        }); 

   </script> 

    <script> 

       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'); 

                    $(inputelement).focus(); 

               } 

                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'); 

                } 

             }); 

        }); 

    </script> 

 

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  

Link: https://help.syncfusion.com/api/js/ejgrid#events:actionbegin 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai. 

[Nga]

Thank you.

[Thavasianand Sankaranarayanan]

Hi Nga, 

 

We are happy that the problem has been solved. 

 

Please get back to us if you need any further assistance.  

 

Regards, 

Thavasianand S.