How to set validation rules for custom dialog templates?

[derekb]

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]

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. 

Demo link: https://ej2.syncfusion.com/aspnetcore/Grid/DialogTemplate#/material 

Refer the help documentation. 

Link: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/?no-cache=1#column-validation 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid/column/#validationrules 

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

Regards, 

Thavasianand S. 

[derekb]

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]

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> 

 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2GridDTVrules-1969032515  

 

Please get back to us if you need further assistance. 

 

Regards, 

Thavasianand S. 

[Arian]

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]

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 }); 

 . . .  

 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#adding-validation-rules-for-custom-editors 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/143977-dialog-template-complex-field-validation921377219.zip 

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

Regards, 

Manivel