Search results

Perform cell selection and get selected cells information

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 four 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.
  • Column: Allows you to select only columns.
  • Cell: Allows you to select only cells.
  • Both: Allows you to select rows and columns 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 column 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 columns or cells. To select range of rows or cells, press and hold the SHIFT key and click the rows or columns or cells.

Event

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

tagHelper
PivotSelection.cs
<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>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}