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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to set validation rules for custom dialog templates?

Thread ID:

Created:

Updated:

Platform:

Replies:

143977 Apr 12,2019 06:41 AM UTC Feb 13,2020 01:27 PM UTC ASP.NET Core - EJ 2 5
loading
Tags: DataGrid
derekb
Asked On April 12, 2019 06:48 AM UTC

Hello,

I need to create a grid with a custom add/edit dialog template. I've created an edit partial view, and an add partial view, which are then requested using AJAX in an actionComplete event handler. I can get the custom dialog to show up, but it has no validation rules. How do I set validation rules in a partial view?

To be clear, I would like my add/edit dialogs to look and behave exactly like the default Syncfusion ones, just with validation in place.

Thanks,
Derek B

Thavasianand Sankaranarayanan [Syncfusion]
Replied On April 15, 2019 06:09 AM UTC

Hi Derek, 

Greetings from Syncfusion support. 

Based on your query we suspect that you want to set validation for the partial view page dialog template in Grid. we can achieve your requirement using the validationRules property in columns API in Grid. 


Refer the help documentation. 



Please let us know if you need further assistance on this. 

Regards, 
Thavasianand S. 


derekb
Replied On April 15, 2019 08:51 PM UTC

Hi Thavasianand,

But what if I want the edit template to have more fields, or completely different fields, than the grid? In that case, I can't specify the requirement rules on the grid, because the columns don't exist. And are you saying that the edit template fields have to have the same "asp-for" value as the "field" attribute in the grid columns, in order to have validation?

Thanks,
Derek B

Thavasianand Sankaranarayanan [Syncfusion]
Replied On April 17, 2019 03:09 AM UTC

Hi Derekb, 
 
Query: But what if I want the edit template to have more fields, or completely different fields, than the grid? In that case, I can't specify the requirement rules on the grid, because the columns don't exist. 
 
We have validated your query and created sample based on your requirement. Here, we have set validationRules for the column which is not defined in the grid columns(ShipCountry) property. Please find the below code example and sample for your reference. 
 
[code example] 
 
<ejs-grid id="Grid" allowPaging="true" toolbar="@(new List<string>() {"Add", "Edit", "Update", "Delete" })" actionComplete="actionComplete"> 
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" template='#dialogtemplate'></e-grid-editSettings> 
    <e-data-manager url="/Home/UrlDataSource" adaptor="UrlAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Remove"></e-data-manager> 
    <e-grid-columns> 
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required= true })" textAlign="Right" width="100"></e-grid-column> 
        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column> 
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column> 
        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column> 
    </e-grid-columns> 
</ejs-grid> 
 
<script id='dialogtemplate' type="text/x-template"> 
    <div id="dialogTemp"> 
    </div> 
</script> 
 
<script type="text/javascript"> 
    function actionComplete(args) { 
         if (args.requestType === 'beginEdit' || args.requestType === 'add') { 
                let spinner = ej.popups.createSpinner({ target: args.dialog.element }); 
                ej.popups.showSpinner(args.dialog.element); 
             if (args.requestType === 'beginEdit') { 
                 args.form.ej2_instances[0].addRules("ShipCountry", { required: true }); 
                    var ajax = new ej.base.Ajax({ 
                        url: "@Url.Action("Editpartial", "Home")", //render the partial view 
                        type: "POST", 
                        contentType: "application/json", 
                        data: JSON.stringify({ value: args.rowData }) 
                    }); 
                    ajax.send().then(function (data) { 
                        appendElement(data, args.form); //Render the edit form with selected record 
                        args.form.elements.namedItem('CustomerID').focus(); 
                        ej.popups.hideSpinner(args.dialog.element); 
                    }).catch(function (xhr) { 
                        console.log(xhr); 
                        ej.popups.hideSpinner(args.dialog.element); 
                    }); 
                } 
             if (args.requestType === 'add') { 
                 args.form.ej2_instances[0].addRules("ShipCountry", { required: true }) 
                    var ajax = new ej.base.Ajax({ 
                        url: "@Url.Action("Addpartial","Home")", //render the partial view 
                        type: "POST", 
                        contentType: "application/json", 
                        data: JSON.stringify({ value: args.rowData }) 
                    }); 
                    ajax.send().then(function (data) { 
                        appendElement(data, args.form); //Render the edit form with selected record 
                        args.form.elements.namedItem('OrderID').focus(); 
                        ej.popups.hideSpinner(args.dialog.element); 
                    }).catch(function (xhr) { 
                        console.log(xhr); 
                        ej.popups.hideSpinner(args.dialog.element); 
                    }); 
                } 
            } 
    } 
 
    ... 
</script> 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Thavasianand S. 


Arian
Replied On February 11, 2020 06:04 AM UTC

Hi, what if we have a nested models bound to the grid? How do we validate CustomerName in the example attached?

Attachment: 141281dialogtemplateurladaptor_Sample_2b0d041f.zip

Manivel Sellamuthu [Syncfusion]
Replied On February 13, 2020 01:27 PM UTC

Hi Arian, 
 
Thanks for contacting us. 
 
You can vaidate the nested models bound to the grid, by dynamically adding the validation rules in the actionComplete event of the Grid. Please find the below code example, documentation link and sample for more information. 
 
<ejs-grid id="Grid" allowPaging="true" actionBegin="actionBegin" actionFailure="actionFailure" toolbar="@(new List<string>() {"Add", "Edit", "Update", "Delete" })" actionComplete="actionComplete"> 
     . . . 
              <e-grid-column field="Customer.CustomerName" headerText="Customer Name" type="string"  width="120"></e-grid-column> 
 
 . . . 
       </e-grid-columns> 
</ejs-grid> 
 
function actionComplete(args) { 
        if (args.requestType === 'beginEdit' || args.requestType === 'add') { 
                              // Add Validation Rules 
                 args.form.ej2_instances[0].addRules('Customer.CustomerName', { required: true }); 
 . . .  
 


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

Regards, 
Manivel 


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.

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

Live Chat Icon For mobile
Live Chat Icon