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

[Andrew Donegan]

Hi,

Currently learning to use Grid and implement the toolbar with my own controls.

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.

I can find one example from 2012 just want an example of up to date code if at all possible please.

My Current Index page with all settings and js code.

@page

@model MyProject.Pages.Users.IndexModel

@{

    ViewData["Title"] = "Index";

    Layout = "~/Pages/Shared/_Layout.cshtml";

}

<h1>Index</h1>

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

[Pavithra Subramaniyam]

Hi Andrew Donegan,

Thanks for contacting Syncfusion support.

To achieve your requirement “Navigate to another page for CRUD action”, we suggest the “Dialog Template” feature which will load a partial view while adding/editing action with the selected row values. Please refer to the below documentation and demo link for more information.

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

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

Please get back to us if you need further assistance on this.

Regards,

Pavithra S