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.

Custom validations, regular expression in a grid with editing dialog

Thread ID:

Created:

Updated:

Platform:

Replies:

124423 Jun 8,2016 03:39 PM Jul 19,2016 03:15 AM ASP.NET MVC 15
loading
Tags: Grid
Carlos Palomino
Asked On June 8, 2016 03:39 PM

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

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On June 9, 2016 08:47 AM

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. 


Carlos Palomino
Replied On June 9, 2016 10:12 AM

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.

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On June 10, 2016 08:07 AM

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. 


Carlos Palomino
Replied On June 13, 2016 12:43 PM

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

Greetings.

Attachment: Images_5941f143.zip

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On June 14, 2016 05:03 AM

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. 


Carlos Palomino
Replied On June 14, 2016 10:39 AM

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.

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On June 15, 2016 04:41 AM

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. 


Carlos Palomino
Replied On June 15, 2016 03:58 PM

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.

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On June 17, 2016 03:38 AM

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. 


Carlos Palomino
Replied On June 17, 2016 11:21 AM

Thank you very much for the answers.

Greetings.

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On June 18, 2016 12:18 AM

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. 


Carlos Palomino
Replied On July 14, 2016 11:44 AM

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

Greetings.

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On July 18, 2016 01:11 AM

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. 


Carlos Palomino
Replied On July 18, 2016 12:11 PM

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

Greetings.

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On July 19, 2016 03:15 AM

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. 


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.

;