Search results

Editing in ASP.NET Core Pivot Grid control

14 Oct 2021 / 2 minutes to read

Cell edit allow to add, delete and update the raw items/detailed data of any cells of the pivot table. The aggregation will be performed for the updated values. The feature can be enabled by setting the editSettings.allowEditing property to true.

The raw items/detailed data of any value cell can view in new window on double-clicking. CRUD operations can be performed by double-clicking the cells or using toolbar options in newly opened report.

The available toolbar options are:

Toolbar Button Actions
Add Add a new row.
Edit Edit the current row/cell.
Delete Delete the current row.
Update Update the edited row/cell.
Cancel Cancel the edited state.

It supports following edit types,

  • Normal
  • Dialog
  • Batch
  • Command Columns

Normal

In Normal edit mode, when you start editing, the currently selected row is changed to edit state. You can change the cell values and save it to the data source by clicking Update toolbar button. To enable Normal edit, set the editSettings.mode as Normal.

tagHelper
Normal.cs
Copied to clipboard
<ejs-pivotview id="PivotGrid" height="300">
<e-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-editSettings>
    <e-datasource data="@ViewBag.data" expandAll="false" enableSorting="true">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasource>
</ejs-pivotview>
Copied to clipboard
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Normal edit mode is default mode of editing.

Dialog

In Dialog edit mode, when you start editing the currently selected row data will be shown on a dialog. You can change the cell values and save it to the data source by clicking Save button in the dialog. To enable Dialog edit, set the editSettings.mode as Dialog.

tagHelper
Dialog.cs
Copied to clipboard
<ejs-pivotview id="PivotGrid" height="300">
<e-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog"></e-editSettings>
    <e-datasource data="@ViewBag.data" expandAll="false" enableSorting="true">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasource>
</ejs-pivotview>
Copied to clipboard
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Batch

In Batch edit mode, when you double-click on the grid cell, then the target cell changed to edit state. You can bulk save (added, changed and deleted data in the single request) to data source by click on the toolbar’s Update button. To enable Batch edit, set the editSettings.mode as Batch.

tagHelper
Batch.cs
Copied to clipboard
<ejs-pivotview id="PivotGrid" height="300">
<e-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Batch"></e-editSettings>
    <e-datasource data="@ViewBag.data" expandAll="false" enableSorting="true">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasource>
</ejs-pivotview>
Copied to clipboard
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Command column

Here, an additional column appended in the grid layout which holds the command buttons to perform CRUD operation. To enable Command columns, set the editSettings.allowCommandColumns as true.

The available built-in command buttons are:

Command Button Actions
Edit Edit the current row.
Delete Delete the current row.
Save Update the edited row.
Cancel Cancel the edited state.
tagHelper
CC.cs
Copied to clipboard
<ejs-pivotview id="PivotGrid" height="300">
<e-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" allowCommandColumns="true"></e-editSettings>
    <e-datasource data="@ViewBag.data" expandAll="false" enableSorting="true">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasource>
</ejs-pivotview>
Copied to clipboard
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}