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

Implement dialog-template under Grid ejs-grid

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

7 Replies

MS Madhu Sudhanan P Syncfusion Team December 4, 2018 06:15 AM

Hi Haryzad, 

Thanks for contacting Syncfusion support. 

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



Regards, 
Madhu Sudhanan P 



HA haryzad March 12, 2019 04:59 AM

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.


MS Madhu Sudhanan P Syncfusion Team March 13, 2019 04:32 AM

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, 


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, 


Regards, 
Madhu Sudhanan P 



HA haryzad March 13, 2019 09:15 PM

Dear Madhu

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




MS Madhu Sudhanan P Syncfusion Team March 13, 2019 11:49 PM

Hi Haryzad, 
  
Thanks for the update. Please try the solution and get back to us if you need further assistance. 
  
Regards, 
Madhu 



ES Emmanuel Solis July 28, 2019 09:04 PM

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).


HJ Hariharan J V Syncfusion Team July 29, 2019 06:01 AM

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, 


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 


Loader.
Live Chat Icon For mobile
Up arrow icon