Syncfusion - Using my own Add/Edit/Delete button instead of Syncfusion provided Toolbar within Grid-CodePudding

Hi I am just starting out with Syncfusion and hitting a couple of obstacles, hopefully somebody can point me in the right direction with an example or a link please.

Currently learning to use Grid and implement the toolbar with my own controls. I have my data model going through fine from Server side.

I have added the Add/Edit/Delete Buttons and enabled them via e-grid-editsettings, I wish to over ride the standard functionality and take the user to a page for Add - Edit or Delete based on the selected Row. Currently the standard functionality of the buttons allows editing/deleting or adding within the table which I wish to overide and just use asp.net links to new Razor page views.

Thanks in Advance.

My Current Index page with all settings and js code.

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

CodePudding user response：

Based on your query, you want to navigate to a new page when you perform CRUD operations. We have discussed your requirement in detail in the below documentation.

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

Sample: https://ej2.syncfusion.com/aspnetcore/Grid/DialogTemplate#/fluent

Note: On deleting the selected record will not be redirect to the new page.