Search results

Grid Customization

Width And Height

In Pivot Grid component, the height and width properties are used to set the pivot grid’s height and width respectively. Based on these options, the vertical and horizontal scrollbars will be displayed in the pivot grid.

To set the width and height, you can provide the pixel values in string format. Also, you can specify the width and height as 100% to make the grid element fill its parent container.

Pivot grid will not be displayed less than 500px, since it’s the minimum width of the widget.

razor
Size.cs
@Html.EJS().PivotView("PivotGrid").Width("550").Height("315px").DataSource(dataSource => dataSource.Data((IEnumerable<object>)ViewBag.Data).ExpandAll(true)
.FormatSettings(formatsettings =>
{
    formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add();
}).Rows(rows =>
{
    rows.Name("Country").Add(); rows.Name("Products").Add();
}).Columns(columns =>
{
    columns.Name("Year").Caption("Production Year").Add(); columns.Name("Quarter").Add();
}).Values(values =>
{
    values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
})).Render()
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Grid Settings

The grid settings provides some additional options to customize the pivot grid using gridSettings property.

Row Height

You can customize the row height of pivot grid through the rowHeight property in gridSettings. The rowHeight property is used to change the row height of entire grid rows.

The height of the column headers alone may vary when grouping bar feature is enabled.

In the below example, the rowHeight is set as ‘60px’.

razor
RowHeight.cs
@using Syncfusion.EJ2.PivotView

@Html.EJS().PivotView("PivotGrid").Height("300").DataSource(dataSource => dataSource.Data((IEnumerable<object>)ViewBag.Data).ExpandAll(false)
.FormatSettings(formatsettings =>
{
    formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add();
}).Rows(rows =>
{
    rows.Name("Country").Add(); rows.Name("Products").Add();
}).Columns(columns =>
{
    columns.Name("Year").Caption("Production Year").Add(); columns.Name("Quarter").Add();
}).Values(values =>
{
    values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
})).GridSettings( new PivotViewGridSettings { RowHeight=60 }).Render()
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Column Width

You can customize the column width of pivot grid using columnWidth property in gridSettings. The columnWidth property is used to change the column width of entire grid columns.

In the below example, the columnWidth is set as ‘120px’.

razor
ColumnWidth.cs
@using Syncfusion.EJ2.PivotView

@Html.EJS().PivotView("PivotGrid").Height("300").DataSource(dataSource => dataSource.Data((IEnumerable<object>)ViewBag.Data).ExpandAll(false)
.FormatSettings(formatsettings =>
{
    formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add();
}).Rows(rows =>
{
    rows.Name("Country").Add(); rows.Name("Products").Add();
}).Columns(columns =>
{
    columns.Name("Year").Caption("Production Year").Add(); columns.Name("Quarter").Add();
}).Values(values =>
{
    values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
})).GridSettings( new PivotViewGridSettings { ColumnWidth=120 }).Render()
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Reorder

Reordering can be done by simple drag and drop of a particular column header from one index to another index within the pivot grid. To enable reordering, set the allowReordering property to true.

razor
ReOrder.cs
@using Syncfusion.EJ2.PivotView

@Html.EJS().PivotView("PivotGrid").Height("300").DataSource(dataSource => dataSource.Data((IEnumerable<object>)ViewBag.Data).ExpandAll(false)
.FormatSettings(formatsettings =>
{
    formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add();
}).Rows(rows =>
{
    rows.Name("Country").Add(); rows.Name("Products").Add();
}).Columns(columns =>
{
    columns.Name("Year").Caption("Production Year").Add(); columns.Name("Quarter").Add();
}).Values(values =>
{
    values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
})).GridSettings( new PivotViewGridSettings { AllowReordering=true }).Render()
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Column Resizing

Column width can be resized by clicking and dragging the right edge of the column header. While dragging, the width of the respective column will be resized immediately. To enable column resize option, set the allowResizing property to true.

By default, column resizing option is enabled.

razor
ColumnResizing.cs
@using Syncfusion.EJ2.PivotView

@Html.EJS().PivotView("PivotGrid").Height("300").DataSource(dataSource => dataSource.Data((IEnumerable<object>)ViewBag.Data).ExpandAll(false)
.FormatSettings(formatsettings =>
{
    formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add();
}).Rows(rows =>
{
    rows.Name("Country").Add(); rows.Name("Products").Add();
}).Columns(columns =>
{
    columns.Name("Year").Caption("Production Year").Add(); columns.Name("Quarter").Add();
}).Values(values =>
{
    values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
})).GridSettings( new PivotViewGridSettings { AllowResizing=true }).Render()
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

In RTL mode, you can click and drag the left edge of the header cell to resize the column.

Text Wrap

The text wrap allows to wrap the cell content to the next line when it exceeds the boundary of the cell width. To enable text wrap, set the allowTextWrap property to true.

razor
TextWrap.cs
@using Syncfusion.EJ2.PivotView

@Html.EJS().PivotView("PivotGrid").Height("300").DataSource(dataSource => dataSource.Data((IEnumerable<object>)ViewBag.Data).ExpandAll(false)
.FormatSettings(formatsettings =>
{
    formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add();
}).Rows(rows =>
{
    rows.Name("Country").Add(); rows.Name("Products").Add();
}).Columns(columns =>
{
    columns.Name("Year").Caption("Production Year").Add(); columns.Name("Quarter").Add();
}).Values(values =>
{
    values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
})).GridSettings( new PivotViewGridSettings { AllowTextWrap=true }).Render()
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Grid Lines

The Pivot Grid have options to display cell border using gridLines property in gridSettings.

Available modes of grid lines are:

Modes Actions
Both Displays both the horizontal and vertical grid lines.
None No grid lines are displayed.
Horizontal Displays the horizontal grid lines only.
Vertical Displays the vertical grid lines only.
Default Displays grid lines based on the theme.

By default, Pivot Grid renders grid lines in Both mode.

razor
GridLines.cs
@using Syncfusion.EJ2.PivotView

@Html.EJS().PivotView("PivotGrid").Height("300").DataSource(dataSource => dataSource.Data((IEnumerable<object>)ViewBag.Data).ExpandAll(false)
.FormatSettings(formatsettings =>
{
    formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add();
}).Rows(rows =>
{
    rows.Name("Country").Add(); rows.Name("Products").Add();
}).Columns(columns =>
{
    columns.Name("Year").Caption("Production Year").Add(); columns.Name("Quarter").Add();
}).Values(values =>
{
    values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
})).GridSettings( new PivotViewGridSettings { GridLines= "Vertical" }).Render()
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Selection

Selection provides an option to highlight a row or a cell. It can be done through simple mouse down or arrow keys. To enable selection in the Pivot Grid, set the allowSelection property to true.

The pivot grid supports two types of selection that can be set using 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.
razor
Selection.cs
@using Syncfusion.EJ2.PivotView

@Html.EJS().PivotView("PivotGrid").Height("300").DataSource(dataSource => dataSource.Data((IEnumerable<object>)ViewBag.Data).ExpandAll(false)
.FormatSettings(formatsettings =>
{
    formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add();
}).Rows(rows =>
{
    rows.Name("Country").Add(); rows.Name("Products").Add();
}).Columns(columns =>
{
    columns.Name("Year").Caption("Production Year").Add(); columns.Name("Quarter").Add();
}).Values(values =>
{
    values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
})).Load("onLoad").GridSettings( new PivotViewGridSettings { AllowSelection=true }).Render()

<script>
    var pivotGridObj;
    function onLoad(args) {
        pivotGridObj = document.getElementById('PivotGrid').ej2_instances[0];
        pivotGridObj.gridSettings.selectionSettings = {
            type: "Multiple"
        };
    }
</script>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Selection Mode

The pivot grid supports three types of selection mode that can be set using 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.
razor
SelectionMode.cs
@using Syncfusion.EJ2.PivotView

@Html.EJS().PivotView("PivotGrid").Height("300").DataSource(dataSource => dataSource.Data((IEnumerable<object>)ViewBag.Data).ExpandAll(false)
.FormatSettings(formatsettings =>
{
    formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add();
}).Rows(rows =>
{
    rows.Name("Country").Add(); rows.Name("Products").Add();
}).Columns(columns =>
{
    columns.Name("Year").Caption("Production Year").Add(); columns.Name("Quarter").Add();
}).Values(values =>
{
    values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
})).Load("onLoad").GridSettings( new PivotViewGridSettings { AllowSelection=true }).Render()

<script>
    var pivotGridObj;
    function onLoad(args) {
        pivotGridObj = document.getElementById('PivotGrid').ej2_instances[0];
        pivotGridObj.gridSettings.selectionSettings = {
            mode: 'Both'
        };
    }
</script>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Cell Selection

Cell selection can be done through simple mouse down or arrow keys (up, down, left, and right).

The pivot grid supports two types of cell selection mode that can be set using selectionSettings.cellSelectionMode. They are:

  • Flow: The Flow value is set by default. The range of cells are selected between the start index and end index that includes in between cells of rows.
  • Box: Range of cells are selected from the start and end column indexes that includes in between cells of rows within the range.
razor
CellSelection.cs
@using Syncfusion.EJ2.PivotView

@Html.EJS().PivotView("PivotGrid").Height("300").DataSource(dataSource => dataSource.Data((IEnumerable<object>)ViewBag.Data).ExpandAll(false)
.FormatSettings(formatsettings =>
{
    formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add();
}).Rows(rows =>
{
    rows.Name("Country").Add(); rows.Name("Products").Add();
}).Columns(columns =>
{
    columns.Name("Year").Caption("Production Year").Add(); columns.Name("Quarter").Add();
}).Values(values =>
{
    values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
})).Load("onLoad").GridSettings( new PivotViewGridSettings { AllowSelection=true }).Render()

<script>
    var pivotGridObj;
    function onLoad(args) {
        pivotGridObj = document.getElementById('PivotGrid').ej2_instances[0];
        pivotGridObj.gridSettings.selectionSettings = {
            cellSelectionMode: 'Box',
            type: 'Multiple',
            mode: 'Cell'
        };
    }
</script>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Cell selection requires selectionSettings.mode property to be Cell or Both, and selectionSettings.type property should be Multiple.

Clip Mode

The clip mode provides options to display its overflow cell content in the Pivot Grid. It can be configured using the clipMode property. Pivot Grid supports three types of clip modes. They are:

  • Clip: Truncates the cell content when it overflows its area.
  • Ellipsis: Displays ellipsis when the cell content overflows its area.
  • EllipsisWithTooltip: Displays ellipsis when the cell content overflows its area, also it will display the tooltip while hover on ellipsis is applied.

By default, columns.clipMode value is set to Ellipsis.

razor
ClipMode.cs
@using Syncfusion.EJ2.PivotView

@Html.EJS().PivotView("PivotGrid").Height("300").DataSource(dataSource => dataSource.Data((IEnumerable<object>)ViewBag.Data).ExpandAll(false)
.FormatSettings(formatsettings =>
{
    formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add();
}).Rows(rows =>
{
    rows.Name("Country").Add(); rows.Name("Products").Add();
}).Columns(columns =>
{
    columns.Name("Year").Caption("Production Year").Add(); columns.Name("Quarter").Add();
}).Values(values =>
{
    values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
})).GridSettings( new PivotViewGridSettings { ClipMode = "Clip" }).Render()
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}