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

Custom validations, regular expression in a grid with editing dialog

Dear,
How you can use custom validations, regular expression (email. numeric, etc) and mask in a grid with editing dialog?
Greetings.

15 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team June 9, 2016 12:47 PM UTC

Hi Carlos, 

You can set validation rules using ”ValidationRules a property of Columns” and you can also add your own rules (a custom validation) in the ValidationRules. Refer to the following code example and Help Document. 

@(Html.EJ().Grid<object>("Editing") 
             .Datasource((IEnumerable<object>)ViewBag.datasource) 
            .AllowPaging() 
            .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Dialog); }) 
               . . . ..  
                .Columns(col => 
                { 
                 . .  .. . .. 
                    col.Field("CustomerID"). ValidationRules(v => v.AddRule("customRegex", 5)).Add(); 
                    col.Field("Freight").ValidationRules(rule =>  
                        rule.AddRule("customCompare", new List<object>() { 0, 1000 })) 
                        .Add();    
             }) 
) 
 
<script type="text/javascript"> 
    $(function () { 
        $.validator.addMethod("customCompare", function (value, element, params) { 
            return element.value > params[0] && element.value < params[1]; 
        }, "Freight value must be between 0 and 1000"); 
 
        $.validator.addMethod("customRegex", function (value, element, params) { 
            if (element.value.length == params) 
                return true; 
            return false; 
        }, "Customer ID must be 5 characters"); 
    }); 
</script> 


For an email validation, jQuery has an default validation method called “email”. Following code example will validate the column based on the email preference. 

@(Html.EJ().Grid<object>("Editing") 
             .Datasource((IEnumerable<object>)ViewBag.datasource) 
            .AllowPaging() 
            .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Dialog); }) 
                .Columns(col => 
                { 
                       .  .. . . .  
                    col.Field("EMail").ValidationRules(v => v.AddRule("email", true)).Add(); 
                }) 
) 


Using the “EditTemplate a property of Columns”, render the ejMaskEdit control for the corresponding column and using that you can perform the mask editing. Refer to the following code example and Help Document. 

@(Html.EJ().Grid<object>("Editing") 
             .Datasource((IEnumerable<object>)ViewBag.datasource) 
            .AllowPaging() 
            .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Dialog); }) 
                . . . . 
                .Columns(col => 
                { 
                  . . ..  
                    col.Field("ShipPostalCode").HeaderText("Ship PostalCode") 
                        .EditTemplate(a =>  
                        { a.Create("create").Read("read").Write("write"); }) 
                        .Width(80).Add();                    . . ..  
                }) 
) 
 
<script type="text/javascript"> 
    function create() { 
        return $("<input>"); 
    } 
    function write(args) { 
        args.element.ejMaskEdit({ 
            maskFormat: "99-99-9999", 
            value: args.rowdata["ShipPostalCode"] 
        }); 
    } 
    function read(args) { 
        return args.ejMaskEdit("get_StrippedValue"); 
    } 
</script> 



We have also prepared a sample that can be downloaded from the following location. 


Regards, 
Seeni Sakthi Kumar S. 



CP Carlos Palomino June 9, 2016 02:12 PM UTC

Dear,
How can you do to make validations like email, currency, numeric date, if required and send messages on-screen grid in DialogTemplate?
How I can send succeeds or fails when data is stored in DialogTemplate?

Greetings.


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team June 10, 2016 12:07 PM UTC

Hi Carlos, 

Query #1: How can you do to make validations like email, currency, numeric date, if required and send messages on-screen grid in DialogTemplate 

We have already updated the way to set the validation for Grid columns with the dialog editing mode. Likewise, we can do the same in DialogTemplate editing mode. We have modified the sample with the dialog template mode that can be downloaded from the following location. 


You can validate the columns in a dialog template editing mode similar to the dialog editing mode.  

Query #2: How I can send succeeds or fails when data is stored in DialogTemplate? 

We understand that you like to alert an end user its success or failure message, after saving the record. You can use the ActionFailure to alert the end user about the failure and ActionComplete to alert the success of the corresponding actions.  

In below code example, we have manually throws an exception to hit the ActionFailure event defined at the client-side where you can pop-up or alert the user about the failure. Similarly, you can alert the customer after successful update of each record. 

        public ActionResult DialogInsert(Orders value) 
        { 
            GetData(); 
            var obj = order.Where(o => o.OrderID == value.OrderID).FirstOrDefault(); 
            if (obj != null) 
                throw new InvalidOperationException("OrderID already existis");//Exception thrown 
            order.Insert(0, value); 
            return Json(value, JsonRequestBehavior.AllowGet); 
        } 
 
@(Html.EJ().Grid<object>("Editing") 
           .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.datasource) 
.InsertURL("/Home/DialogInsert") 
.UpdateURL("/Home/DialogUpdate") 
.RemoveURL("/Home/DialogRemove") 
.Adaptor(AdaptorType.RemoteSaveAdaptor)) 
            .AllowPaging() 
              .. . . . . 
                .ClientSideEvents(events => events.ActionComplete("complete").ActionFailure("failure")) 
) 

    function complete(args) { 
              . .. .  
        if (args.requestType == 'save') { 
            alert("REcords save Successfully"); 
        } 
    } 
    function failure(args) { 
        //args.error=> provides all the information 
        alert(args.error.statusText) 
    } 


We have done this for Insert record alone, but you can also perform this for other actions. 

Refer to the following Help Document. 


Regards, 
Seeni Sakthi Kumar S. 



CP Carlos Palomino June 13, 2016 04:43 PM UTC

Hello such,
It does not work with the information sent. Attached images.

Greetings.

Attachment: Images_5941f143.zip


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team June 14, 2016 09:03 AM UTC

Hi Carlos, 

We suspect that you would like to receive the server-side thrown exception message at the client-side. args.error.responseText of ActionFailure will bring the message at client-side as shown in the code example. 

@(Html.EJ().Grid<object>("Editing") 
            . .  .. . 
                .ClientSideEvents(events => events.ActionFailure("failure")) 
) 


<script type="text/javascript"> 
    function failure(args) { 
        //args.error=> provides all the information 
        var error = $(args.error.responseText).find('i').text(); 
        alert(error); //it will popup the alert with an exception message 
        $("#Editing").ejWaitingPopup("hide");// hides the waiting popup 
    } 
</script> 
 
        public ActionResult DialogInsert(Orders value) 
        { 
            GetData(); 
            var obj = order.Where(o => o.OrderID == value.OrderID).FirstOrDefault(); 
            if (obj != null) 
                throw new InvalidOperationException("OrderID already exist");//Exception thrown 
            order.Insert(0, value); 
            return Json(value, JsonRequestBehavior.AllowGet); 
        } 
 

 

We have also modified the sample that can be downloaded from the following location. 


Regards, 
Seeni Sakthi Kumar S. 



CP Carlos Palomino June 14, 2016 02:39 PM UTC

Thanks for the reply.

How I can show messages with custom design and different colors to alert (error)?
How I can show those messages succesfully grid or failure in the home page?

Greetings.


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team June 15, 2016 08:41 AM UTC

Hi Carlos, 

Query #1: How I can show messages with custom design and different colors to alert (error)? 

We have rendered an ejDialog and opened with a customized exception message in the ActionFailure event of Grid. Refer to the following code example and screenshot. 

@(Html.EJ().Dialog("ErrorList").Title("Exception Thrown").ShowOnInit(false)) 
 
@(Html.EJ().Grid<object>("Editing") 
                 . . ..  
                .ClientSideEvents(events => events.ActionFailure("failure")) 
) 
 
<script type="text/javascript"> 
    function failure(args) { 
        $("#Editing").ejWaitingPopup("hide"); 
        var str = ""; 
 
        str = ($($(args.error.responseText).find('b')[0]).text() + ":" + $(args.error.responseText).find('i').text()); 
 
        $("#ErrorList").html('<p style="font-family: cursive;color: blue;">' + str + '</p></br><button id="button1" style="margin-left: 50%">OK</button>'); 
 
        $("#button1").ejButton({ 
            click: function (args) { 
                $("#ErrorList").ejDialog("close"); 
            } 
        }); 
        $("#ErrorList").ejDialog({ enableModal: true }); 
        $("#ErrorList").ejDialog("open"); 
    } 
</script> 



 

We have modified our sample that can be downloaded from the following location. 


Query #2: How I can show those messages succesfully grid or failure in the home page? 

We have already explained the way to show the success message in ActionComplete event and failure message in the ActionFailure event in our previous update dated June 6, 2016. If we misunderstood your query, please elaborate your requirement and explain the clear scenario. 

Regards, 
Seeni Sakthi Kumar S. 



CP Carlos Palomino June 15, 2016 07:58 PM UTC

Thank you very much for the answers.
Now I have two queries.

How do to that after pressing the OK button the editing dialog is closed grid?

How to display a summary of alerts on the main screen grid or form?

Greetings.


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team June 17, 2016 07:38 AM UTC

Hi Carlos, 

Query #1: How do to that after pressing the OK button the editing dialog is closed grid? 

In the click event “OK” button, call the cancelEdit() of Grid and Close the ejDialog by its method “close” as shown in the following code example. 

    function failure(args) { 
        //$("#Editing").ejWaitingPopup("hide"); 
        var str = ""; 
        str = ($($(args.error.responseText).find('b')[0]).text() + ":" + $(args.error.responseText).find('i').text()); 
        $("#ErrorList").html('<p style="font-family: cursive;color: blue;">' + str + '</p></br><button id="button1" style="margin-left: 50%">OK</button>'); 
        $("#button1").ejButton({ 
            click: function (args) {//click event of button 
                $("#ErrorList").ejDialog("close"); 
                var gridObj = $("#Editing").ejGrid("instance"); 
                gridObj.cancelEdit();//cancel the editing 
                $("#Editing_dialogEdit").ejDialog("close");// and closed dialog edit form 
                $("#Editing").ejWaitingPopup("hide"); 
            } 
        }); 
        $("#ErrorList").ejDialog({ enableModal: true }); 
        $("#ErrorList").ejDialog("open"); 
    } 

Query #2: How to display a summary of alerts on the main screen grid or form? 

In the dialog template, place an element and insert an “error message” in it within the actionFailure event of Grid. Refer to the following code example. 

 
@(Html.EJ().Grid<object>("Editing") 
            .  . . . 
            .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.DialogTemplate).DialogEditorTemplateID("#template"); }) 
           . . . . 
             . . . . 
            .ClientSideEvents(events => events.ActionComplete("complete").ActionFailure("failure")) 
) 
 
<script type="text/javascript"> 
  
    function failure(args) { 
        $("#Editing").ejWaitingPopup("hide"); 
        var str = ""; 
        str = ($($(args.error.responseText).find('b')[0]).text() + ":" + $(args.error.responseText).find('i').text()); 
        $("#ErrorList").html('<p style="font-family: cursive;color: blue;">' + str + '</p>'); 
    } 
</script> 
 
<script type="text/template" id="template"> 
    <b>Order Details</b> 
    <table cellspacing="10"> 
        <tr> 
            <td style="text-align: right;"> 
                Order ID 
            </td> 
        </tr> 
           . . . . 
    </table> 
    </br> 
    <div id="ErrorList"></div> 
</script> 


We have prepared a sample that can be downloaded from the following location. 


In the sample, refer the Index (/Home/Index) for your query #1 and Index1 (/Home/Index1) for your query #2. 

Regards, 
Seeni Sakthi Kumar S. 



CP Carlos Palomino June 17, 2016 03:21 PM UTC

Thank you very much for the answers.

Greetings.


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team June 18, 2016 04:18 AM UTC

Hi Carlos, 

We are happy to hear that your queries were answered and you are good to go. Get back to us, if you need further assistance. 

Regards, 
Seeni Sakthi Kumar S. 



CP Carlos Palomino July 14, 2016 03:44 PM UTC

Dear,
How I can display a custom message that comes from Controller.cs when the operation is successful or fails?

Greetings.


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team July 18, 2016 05:11 AM UTC

Hi Carlos, 

We have already mentioned about this in our previous updates dated June 17, 2016 and explained about the same in its successive update, you could show the custom message either in ActionComplete or ActionFailure event. ActionComplete event will be triggered after the successful update of record in database or initial render of Grid whereas the ActionFailure event will be triggered after the failure/exception thrown from the server. So, if you would like to display and discriminate among the custom message of the success/failure, you can mention them in ActionComplete and ActionFailure separately. 

In the ActionFailure event, you could either show the custom message like “Records Not Successfully updated” or else you can show message passed from the server.  

Below code example shows the way to display the custom message using the ejDialog. 

    function failure(args) {//ActionFailure event 
       var str = ""; 
        str = "Record is failed to update"; 
        $("#ErrorList").html('<p style="font-family: cursive;color: blue;">' + str + '</p></br><button id="button1" style="margin-left: 50%">OK</button>'); 
        $("#button1").ejButton({ 
            click: function (args) {//click event of button 
                $("#ErrorList").ejDialog("close"); 
                var gridObj = $("#Editing").ejGrid("instance"); 
                $("#Editing").ejWaitingPopup("hide"); 
                gridObj.cancelEdit();//cancel the editing 
                $("#Editing_dialogEdit").ejDialog("close");// and closed dialog edit form 
            } 
        }); 
        $("#ErrorList").ejDialog({ enableModal: true }); 
        $("#ErrorList").ejDialog("open"); 
    } 
 
        public ActionResult DialogInsert(Orders value) 
        { 
            GetData(); 
            var obj = order.Where(o => o.OrderID == value.OrderID).FirstOrDefault(); 
            if (obj != null) 
                throw new InvalidOperationException("OrderID already exist");//Exception thrown 
            order.Insert(0, value); 
            return Json(value, JsonRequestBehavior.AllowGet); 
        } 
 
Following Code example retrieves the message from the server end and display them using ejDialog. 

    function failure(args) { 
        //$("#Editing").ejWaitingPopup("hide"); 
       var str = ""; 
        str = ($($(args.error.responseText).find('b')[0]).text() + ":" + $(args.error.responseText).find('i').text()); 
        $("#ErrorList").html('<p style="font-family: cursive;color: blue;">' + str + '</p></br><button id="button1" style="margin-left: 50%">OK</button>'); 
        $("#button1").ejButton({ 
            click: function (args) {//click event of button 
                $("#ErrorList").ejDialog("close"); 
                var gridObj = $("#Editing").ejGrid("instance"); 
                gridObj.cancelEdit();//cancel the editing 
                $("#Editing_dialogEdit").ejDialog("close");// and closed dialog edit form 
                $("#Editing").ejWaitingPopup("hide"); 
            } 
        }); 
        $("#ErrorList").ejDialog({ enableModal: true }); 
        $("#ErrorList").ejDialog("open"); 
    } 
 
        public ActionResult DialogInsert(Orders value) 
        { 
            GetData(); 
            var obj = order.Where(o => o.OrderID == value.OrderID).FirstOrDefault(); 
            if (obj != null) 
                throw new InvalidOperationException("OrderID already exist");//Exception thrown 
            order.Insert(0, value); 
            return Json(value, JsonRequestBehavior.AllowGet); 
        } 
 
Likewise, in the ActionComplete event you can show the message, Refer to the following code example. 

@(Html.EJ().Grid<object>("Editing") 
           .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.datasource) 
.InsertURL("/Home/DialogInsert") 
.UpdateURL("/Home/DialogUpdate") 
.RemoveURL("/Home/DialogRemove") 
.Adaptor(AdaptorType.RemoteSaveAdaptor)) 
            .AllowPaging() 
              .. . . . . 
                .ClientSideEvents(events => events.ActionComplete("complete").ActionFailure("failure")) 
) 
 
    function complete(args) { 
              . .. .  
        if (args.requestType == 'save') { 
            alert("REcords save Successfully"); 
        } 
    } 


We have also prepared a sample that can be downloaded from the following location. 


If your requirement is different from this, please explain clearly so that we could provide you response based on it. 

Regards, 
Seeni Sakthi Kumar S. 



CP Carlos Palomino July 18, 2016 04:11 PM UTC

Hello such,
I need to show is a custom message that comes from controler.cs.

Greetings.


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team July 19, 2016 07:15 AM UTC

Hi Carlos, 

As per our understanding about your requirement, you would like to show a custom message from the server-side.   We have also given solution based on that in our earlier updates as well as in our previous update. If your requirement is different please elaborate us your scenario to provide you a better solution. 

Seeni Sakthi Kumar S. 


Loader.
Up arrow icon