使用我自己的添加/编辑/删除按钮，而不是网格中Syncfusion提供的工具栏

Question

目前正在学习使用网格并用自己的控件实现工具栏。我的数据模型在服务器端运行良好。

我已经添加了添加/编辑/删除按钮，并通过电子网格编辑设置启用了它们，我希望超越标准功能，并根据所选行将用户带到添加-编辑或删除页面。目前，按钮的标准功能允许在我想要覆盖的表中编辑/删除或添加，只需使用asp.net链接到新的Razor页面视图。

我的当前索引页面包含所有设置和js代码。

@page
@model developmentWeb.Pages.Users.IndexModel
@{
ViewData["Title"] = "Index";
Layout = "~/Pages/Shared/_Layout.cshtml";
}
<h1>Index</h1>
<p>
<a asp-page="Create">Create New</a>
</p>
<ejs-grid id="Grid" dataSource=((System.Data.DataTable)Model.Dt)
toolbarClick="toolbarClick" toolbar="@( new List<string>(){"Add","Edit","Delete","Print","ExcelExport","PdfExport"})" height="270"
enablePersistence="true"
allowPdfExport="true"
allowExcelExport="true"
allowSelection="true"
allowTextWrap="true"
allowReordering="true"
allowSorting="true"
allowResizing="true"
allowFiltering="true"
allowGrouping="true"
allowPaging="true">
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>
<e-grid-pagesettings pageCount="10"></e-grid-pagesettings>
<e-grid-filterSettings type="Menu"></e-grid-filterSettings>
<e-grid-columns>
<e-grid-column field="UserName" headerText="User Name" width="120"></e-grid-column>
<e-grid-column field="FirstName" headerText="First Name" width="120"></e-grid-column>
<e-grid-column field="LastName" headerText="Last Name" width="120"></e-grid-column>
<e-grid-column field="DateCreated" headerText="Created" format="yMd" width="130"></e-grid-column>
<e-grid-column field="EmailConfirmed" headerText="Activated" DisplayAsCheckBox="true" AllowEditing="false" width="60"></e-grid-column>
<e-grid-column field="TenantName" headerText="Tenant" width="150"></e-grid-column>
<e-grid-column field="Id" headerText="Id" Visible="false" width="10"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
function toolbarClick(args) {
var gridObj = document.getElementById("Grid").ej2_instances[0];
if (args.item.id === 'Grid_pdfexport') {
gridObj.showSpinner();
gridObj.pdfExport();
}
else if (args.item.id === 'Grid_excelexport') {
gridObj.showSpinner();
gridObj.excelExport();
}
}
function pdfExportComplete(args) {
this.hideSpinner();
}
function excelExportComplete(args) {
this.hideSpinner();
}
</script>

Answer 1

通过使用对话框编辑模板功能，可以从局部视图中渲染编辑组件。有关更多信息，请参阅以下文档。

对话框编辑模板

找到下面的样本供您参考。

样品