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

Question

嗨，我刚开始使用 Syncfusion 并遇到了一些障碍，希望有人可以通过示例或链接为我指明正确的方向。

目前正在学习使用 Grid 并使用我自己的控件实现工具栏。 我的数据 model 从服务器端顺利通过。

我已经添加了添加/编辑/删除按钮并通过 e-grid-editsettings 启用它们，我希望超越标准功能并将用户带到基于所选行添加 - 编辑或删除的页面。 目前，按钮的标准功能允许在我希望覆盖的表中编辑/删除或添加，只需使用 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

根据您的查询，您希望在执行 CRUD 操作时导航到新页面。 我们已在以下文档中详细讨论了您的要求。

文档： https://ej2.syncfusion.com/aspnetcore/documentation/grid/editing/template-editing#inline-or-dialog-template-editing

示例： https://ej2.syncfusion.com/aspnetcore/Grid/DialogTemplate#/fluent

注意：删除所选记录时不会重定向到新页面。