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

Implement dialog-template under Grid ejs-grid

Thread ID:

Created:

Updated:

Platform:

Replies:

141281 Dec 4,2018 08:21 AM UTC Jul 29,2019 10:01 AM UTC ASP.NET Core - EJ 2 7
loading
Tags: DataGrid
haryzad
Asked On December 4, 2018 08:21 AM UTC

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 [Syncfusion]
Replied On December 4, 2018 11:15 AM UTC

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 


haryzad
Replied On March 12, 2019 08:59 AM UTC

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 [Syncfusion]
Replied On March 13, 2019 08:32 AM UTC

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 


haryzad
Replied On March 14, 2019 01:15 AM UTC

Dear Madhu

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



Madhu Sudhanan P [Syncfusion]
Replied On March 14, 2019 03:49 AM UTC

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


Emmanuel Solis
Replied On July 29, 2019 01:04 AM UTC

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 [Syncfusion]
Replied On July 29, 2019 10:01 AM UTC

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 


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

;