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.
Unfortunately, activation email could not send to your email. Please try again.

Validate grid row and remain focus

Thread ID:

Created:

Updated:

Platform:

Replies:

130837 Jun 6,2017 01:09 PM Jun 8,2017 12:02 AM JavaScript 3
loading
Tags: ejGrid
Nga
Asked On June 6, 2017 01:09 PM

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 [Syncfusion]
Replied On June 7, 2017 07:33 AM

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. 
            $("#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  

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


Nga
Replied On June 7, 2017 10:50 PM

Thank you.

Thavasianand Sankaranarayanan [Syncfusion]
Replied On June 8, 2017 12:02 AM

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;