Implement dialog-template under Grid ejs-grid

7 Replies
4 Participants

Created by
HA haryzad

Platform
ASP.NET Core - EJ 2

Platform
ASP.NET Core - EJ 2

Control
DataGrid

Created On
Dec 4, 2018 08:21 AM UTC

Last Activity On
Jul 29, 2019 10:01 AM UTC

Want to subscribe?
SIGN IN

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

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

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

Regards,

Madhu Sudhanan P

HA haryzad 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.

MS Madhu Sudhanan P Syncfusion Team 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,

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>

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

</div>

</script>

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>

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

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

</div>

<input asp-for="CustomerID" />

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

</div>

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

</div>

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

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

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

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

</div>

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

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

</div>

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

</div>

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

<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

HA haryzad 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.

MS Madhu Sudhanan P Syncfusion Team 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

ES Emmanuel Solis 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).

HJ Hariharan J V Syncfusion Team 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,

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

Need More Help?

Get personalized assistance from our support team.

Contact Support

7 Replies
4 Participants
Want to subscribe?
SIGN IN
Created by
HA haryzad
Platform
ASP.NET Core - EJ 2
Control
DataGrid
Created On
Dec 4, 2018 08:21 AM UTC
Last Activity On
Jul 29, 2019 10:01 AM UTC

Need More Help?

Get personalized assistance from our support team.

Contact Support