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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Validate grid row and remain focus

Thread ID:





130837 Jun 6,2017 05:09 PM UTC Jun 8,2017 04:02 AM UTC JavaScript 3
Tags: ejGrid
Asked On June 6, 2017 05:09 PM UTC

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 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. 

Replied On June 8, 2017 02:50 AM UTC

Thank you.

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon