Search results

Perform cell selection and get selected cells information in ASP.NET Core Pivot Grid control

14 Oct 2021 / 2 minutes to read

You can select any cell/row by setting the property gridSettings.allowSelection as true where the selected cells can be highlighted. It can be done through mouse down or arrow keys.

Selection mode

It supports three types of selection mode that can be set by the property gridSettings.selectionSettings.mode. They are,

  • Row: The Row value is set by default, and allows you to select only rows.
  • Cell: Allows you to select only cells.
  • Both: Allows you to select rows and cells at the same time.

Selection type

It supports two types of selection that can be set by the property gridSettings.selectionSettings.type. They are,

  • Single: The Single value is set by default, and it only allows selection of a single row or a cell.
  • Multiple: Allows you to select multiple rows or cells. To perform the multi-selection, press and hold CTRL key and click the desired rows or cells. To select range of rows or cells, press and hold the SHIFT key and click the rows or cells.

Event

The event cellSelected fires on every cell/row on selected/deselected operations and it provides the selected cells information with its corresponding column and row headers.

tagHelper
PivotSelection.cs
Copied to clipboard
<ejs-pivotview id="PivotGrid" height="300" load="onLoad" cellSelected="onCellSelected">
    <e-datasource data="@ViewBag.data" expandAll="false">
        <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>
    <e-gridSettings allowSelection="true"></e-gridSettings>
</ejs-pivotview>

<script>
    var pivotGridObj;
    function onLoad(args) {
        pivotGridObj = document.getElementById('PivotGrid').ej2_instances[0];
        pivotGridObj.gridSettings.selectionSettings = {
            mode: "Both",
            type: "Multiple"
        };
    }
    function onCellSelected(args) {
        //args.selectedCellsInfo -> get selected cells information.
        //args.pivotValues -> get the pivot values of the pivot grid.
    }
</script>
Copied to clipboard
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}