Implement dialog-template under Grid ejs-grid

[haryzad]

Dear Syncfusion Support

I'm looking the solution to implement the dialog-template while performing CRUD under ejs-grid. Sample grid that i implement currently as belows

 <ejs-grid id="Grid"

                  allowTextWrap="false"

                  toolbar="@(new List<string>() { "Add", "Edit", "Delete","ExcelExport"})"

                  toolbarClick="toolbarClick"

                  allowPaging="true"

                  allowSelection="true"

                  allowGrouping="false"

                  allowFiltering="true"

                  allowExcelExport="true"

                  showColumnMenu="true"

                  created="created"

                  allowResizing="true">

            <e-data-manager url="@Url.Action("GetRiskListDS", "Risk",new {UserID= @ViewBag.UserId})" insertUrl="@Url.Action("AddRisk", "Risk")" updateUrl="@Url.Action("UpdateRisk", "Risk")" removeUrl="@Url.Action("DeleteRisk", "Risk")" adaptor="UrlAdaptor"></e-data-manager>

            <e-grid-editSettings allowAdding="true"

                                 allowEditing="true"

                                 allowDeleting="true"

                                 mode="Dialog"

                                 showDeleteConfirmDialog="true"></e-grid-editSettings>

            <e-grid-filterSettings type="Menu"></e-grid-filterSettings>

            <e-grid-selectionsettings type="Multiple"></e-grid-selectionsettings>

            <e-grid-pagesettings pageCount="4" pageSizes="true"></e-grid-pagesettings>

            <e-grid-columns>

                <e-grid-column field="RowId" headerText="No" width="50" visible="true" defaultValue="@ViewBag.RowIdEntity" allowEditing="false"></e-grid-column>

                <e-grid-column id="cmbDocType" field="DocumentTypeName" headerText="Document Type" validationRules="@(new { required = true, minLength = 3 })" width="150" editType="dropdownedit"

                               edit="@(new { @params = new { dataSource = ViewBag.DocType,

    fields = new { text = "DocumentTypeName", value = "DocumentTypeName" } } })"></e-grid-column>

                <e-grid-column field="EntityCode" headerText="Entity Name" validationRules="@(new { required = true, minLength = 3 })" textAlign="Left" format="C2" width="80"></e-grid-column>

                <e-grid-column field="EntityDataType" headerText="Data Type" validationRules="@(new { required = true, minLength = 3 })"

                               textAlign="Left" width="80" editType="dropdownedit" edit="@(new { @params = new { dataSource = ViewBag.EntityDataType,

    fields = new { text = "EntityDataType", value = "EntityDataType" } } })"></e-grid-column>

                <e-grid-column field="Path" headerText="Path Entity" validationRules="@(new { required = true })" textAlign="Left" format="C2" width="100"></e-grid-column>

                <e-grid-column field="Description" headerText="Description" validationRules="@(new { required = false })" textAlign="Left" format="C2" width="120"></e-grid-column>

                <e-grid-column field="RiskEntityID" headerText="GuId" isPrimaryKey="true" validationRules="@(new { required = false })" textAlign="Left" width="0" visible="false"

                               defaultValue="@ViewBag.Guid"></e-grid-column>

                <e-grid-column field="UserId" headerText="UserId" textAlign="Left" width="0" visible="false"

                               defaultValue="@ViewBag.UserId"></e-grid-column>

            </e-grid-columns>

        </ejs-grid>

Appreciate on your feedback on this matters.

Thanks

[Madhu Sudhanan P]

Hi Haryzad, 

Thanks for contacting Syncfusion support. 

Please find the below demo and documentation link for using dialog template feature in grid. 

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

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit#dialoginline-template 

Regards, 

Madhu Sudhanan P 

[haryzad]

Dear Madhu

Thanks for the respond, i'm using the version syncfusion.ej2 16.2.0.44, it's support for the dialogtemplate, while follow the sample given still can't implement the template.

Sorry for the inconvenience caused.

[Madhu Sudhanan P]

Hi Haryzad, 

Grid have the dialog template support from v16.3.17 this version. So we suggest you to update the syncfusion package version to latest to use this feature. Please refer the below link to see our release notes, 

https://ej2.syncfusion.com/documentation/release-notes/16.3.17/#grid 

After updating the version you need to enable the dialog template editing by using template property of the Grid editSettings. After that you can render your own template to the edit dialog. Please refer the following code snippet, 

Grid: 

 

<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> // Enabled the dialog template 

 

                ..... 

 

</ejs-grid> 

 

<script id='dialogtemplate' type="text/x-template"> 

    <div id="dialogTemp"> // Created the new template element 

    </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') { 

                    // Called the partial view elements 

                    var ajax = new ej.base.Ajax({ 

                        url: "@Url.Action("Editpartial", "Home")", //render the Edit 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 in newly created template with the 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') { 

                    var ajax = new ej.base.Ajax({ 

                        url: "@Url.Action("Addpartial","Home")", //render the Add 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); 

                    }); 

                } 

            } 

    } 

 

    function appendElement(elementString, form) { 

        form.querySelector("#dialogTemp").innerHTML = elementString; 

        var script = document.createElement('script'); 

        script.type = "text/javascript"; 

        var serverScript = form.querySelector("#dialogTemp").querySelector('script'); 

        script.textContent = serverScript.innerHTML; 

        document.head.appendChild(script); 

        serverScript.remove(); 

    } 

</script> 

 

_DialogAddPartial: 

 

@model EJ2Grid.Controllers.HomeController.Orders 

@*//define the model for store the model values*@ 

 

@using Syncfusion.EJ2 

 

<div> 

    <div class="form-row"> 

        <div class="form-group col-md-6"> 

            <div class="e-float-input e-control-wrapper"> 

                <input asp-for="OrderID" type='text' /> 

                <span class="e-float-line"></span> 

                <label asp-for="OrderID" class="e-float-text e-label-top">Order ID</label> 

            </div> 

        </div> 

        <div class="form-group col-md-6"> 

            <div class="e-float-input e-control-wrapper"> 

                <input asp-for="CustomerID" /> 

                <span class="e-float-line"></span> 

                <label asp-for="CustomerID" class="e-float-text e-label-top">Customer Name</label> 

            </div> 

        </div> 

    </div> 

 

    <div class="form-row"> 

        <div class="form-group col-md-6"> 

            <ejs-numerictextbox id="Freight" format="C2" placeholder="Freight" floatLabelType="Always"></ejs-numerictextbox> 

        </div> 

        <div class="form-group col-md-6"> 

            <ejs-dropdownlist id="ShipCity" dataSource="@ViewBag.datasource" placeholder="Ship City" floatLabelType="Always" popupHeight="300px"> 

                <e-dropdownlist-fields text="ShipCity" value="ShipCity"></e-dropdownlist-fields> 

            </ejs-dropdownlist> 

        </div> 

    </div> 

</div> 

 

<ejs-scripts></ejs-scripts>  // EJ2 script manager 

 

_DialogEditPartial: 

 

@model EJ2Grid.Controllers.HomeController.Orders 

@*//define the model for store the model values*@ 

 

@using Syncfusion.EJ2 

 

<div> 

    <div class="form-row"> 

        <div class="form-group col-md-6"> 

            <div class="e-float-input e-control-wrapper"> 

                <input asp-for="OrderID" value=@Model.OrderID.ToString() disabled type='text' /> 

                <span class="e-float-line"></span> 

                <label asp-for="OrderID" class="e-float-text e-label-top">Order ID</label> 

            </div> 

        </div> 

        <div class="form-group col-md-6"> 

            <div class="e-float-input e-control-wrapper"> 

                <input asp-for="CustomerID" value=@Model.CustomerID /> 

                <span class="e-float-line"></span> 

                <label asp-for="CustomerID" class="e-float-text e-label-top">Customer Name</label> 

            </div> 

        </div> 

    </div> 

 

    <div class="form-row"> 

        <div class="form-group col-md-6"> 

            <ejs-numerictextbox id="Freight" value=@Model.Freight format="C2" placeholder="Freight" floatLabelType="Always"></ejs-numerictextbox> 

        </div> 

        <div class="form-group col-md-6"> 

            <ejs-dropdownlist id="ShipCity" value=@Model.ShipCity dataSource="@ViewBag.datasource" placeholder="Ship City" floatLabelType="Always" popupHeight="300px"> 

                <e-dropdownlist-fields text="ShipCity" value="ShipCity"></e-dropdownlist-fields> 

            </ejs-dropdownlist> 

        </div> 

    </div> 

</div> 

 

<ejs-scripts></ejs-scripts> // EJ2 script manager 

 

Controller: 

 

using System; 

using System.Collections.Generic; 

using System.Diagnostics; 

using System.Linq; 

using System.Threading.Tasks; 

using Microsoft.AspNetCore.Mvc; 

using EJ2Grid.Models; 

using Syncfusion.EJ2.Base; 

using System.Collections; 

 

namespace EJ2Grid.Controllers 

{ 

    public class HomeController : Controller 

    { 

 

        public IActionResult EditPartial([FromBody] CRUDModel<Orders> value) 

        { 

            ViewBag.datasource = order; 

            return PartialView("_DialogEditPartial", value.Value); 

        } 

 

        public IActionResult AddPartial([FromBody] CRUDModel<Orders> value) 

        { 

            ViewBag.datasource = order; 

            return PartialView("_DialogAddPartial"); 

        } 

    } 

} 

 

In this code we have crated the dialog elements in partial view (i.e _DialogAddPartial and _DialogEditPartial) and we have used ajax to call this elements from partial view and render it in Grid dialog template. We have used Grid actionComplete event to call this partial view through ajax. 

Note: You must need to provide EJ2 script manager in each partial view page to achieve this requirement. 

 

We have also prepared the sample with this requirement and you can find this sample in the below link, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/F141281-314430585.zip 

Regards, 

Madhu Sudhanan P 

[haryzad]

Dear Madhu

Thanks for the feedback; appreciate on the explanation,  will try to update and see the results.

[Madhu Sudhanan P]

Hi Haryzad, 

  

Thanks for the update. Please try the solution and get back to us if you need further assistance. 

  

Regards, 

Madhu 

[Emmanuel Solis]

Is there a way to achieve the same result without using partial views?

Is there a way to have on the same View the Grid and the Template defined?

I tried the solution from this thread (https://www.syncfusion.com/forums/140090/some-example-of-the-editing-of-a-grid-with-template-mode-but-in-razor-pages-not-in-mvc), but it didn't work. When I click on the Add or Edit button on the Grid, no dialog is displayed.

What am I missing? (I'm using ASP.NET Core EJ2, Views and Controllers, not Razor pages).

[Hariharan J V]

Hi Emmanuel, 

Thanks for contacting Syncfusion support. 

We are unable to reproduce any issue while using this forum solution (without using partial views) to render the dialog template in Grid. So we have prepared a simple sample with this solution and you can find that sample from the below link, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2Grid722308111.zip 

Still, if you facing the sample issue we suggest you to share your full Grid code and console error (if you have faced any script error in your browser console) to us. This will help us to provide a better solution for your issue as early as possible. 

Regards, 

Hariharan