Grid

The Grid page allows you set the appearance of the grid in the web part.

The Grid contains the following:

 

Table 19. Grid

Element	Description
Selection Column Type	Allows you to set a column type: • None: Use None if you want to click the row to select it or press Ctrl or Shift and click the row to select multiple rows. • MultiRowSelector: Use this option if want the listview to display a check box as the first column. To select a row, select the check box for that row. To select multiple rows, select the check box for each row to be selected. • SingleRowSelector: Use this option if want the listview to display a check box as the first column. To select a row, select the check box for that row.
Hide Expand\Collapse Image When No Child Item	Allows you to hide the +/- sign next to a list item if the item contains 0 child items.
Show/Hide Dynamic Column Grouping	Allows you to apply dynamic grouping from the data grid, in real time, without the need to modify any configuration. By default, this property is unchecked. Once enabled the dynamic grouping panel appears above the data grid header. Apply dynamic grouping by dragging and dropping the desired field(s) on the grouping panel. You can apply grouping to multiple fields including fields in the child list grid separately. However, dynamic grouping will only work if static grouping is not configured. Dynamic grouping supports various SharePoint List field types except for these fields: Managed Metadata, Source Name, and Source Version. The element also does not work with Special fields (Edit) or any Custom fields.
Allow Dynamic Row\Column Resize	Allows you to resize columns and rows displayed on the data grid. Resize columns and rows by dragging their sides.
Allow Dynamic Column Reorder	Allows you to reorder sequence of columns displayed on the data grid. Simply drag and drop the label of the column to move the entire column along with its data to its new location.
Freeze Header	Allows you to freeze the header of the parent list. The header label stays visible on the screen even when the data grid is scrolled.
Skin Name	Allows you to select the skin name for the grid in the listview. If you have a custom skin, you can add it to the following folder for SharePoint 2010:C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\QuestSoftware\Telerik\Q32013SP1\Skins, for SharePoint 2013: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\QuestSoftware\Telerik\Q32013SP1\Skins, for SharePoint 2016: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\16\TEMPLATE\LAYOUTS\QuestSoftware\Telerik\Q32013SP1\Skins or for SharePoint 2019: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\16\TEMPLATE\LAYOUTS\QuestSoftware\Telerik\Q32017\Skins. When creating a custom skin, you can refer to the Sample Skin folder in the install directory.
Header Style	Allows you to enter the style for the header. You can define the style as you would in a CSS class. Example: font-family: verdana; color: black; background: #FFCC99!important; height: 20px;
Header CSS Class	Allows you to enter the CSS class name for the grid's header. If this property is specified, it will override the style defined in the Header Style property. You must define the class specified here in an external CSS file.
Pager Style	Allows you to enter the style for the pager. You can define the style as you would in a CSS class; for example, font-family: verdana; color: black; background-color: #FFCC99; height: 20px;
Pager CSS Class	Allows you to enter the CSS class name for the pager. If this property is specified, it will override the style defined in the Pager Style property. You must define the class specified here in an external CSS file.
Item Style	Allows you to enter the style for the item. You can define the style as you would in a CSS class; for example, color: red; font-weight: bold
Item CSS Class	Allows you to enter the CSS class name for the item in the odd-numbered row (1, 3, 5, and so on.). If this property is specified, it will override the style defined in the Item Style property. You must define the class specified here in an external CSS file.
Alternating Item Style	Allows you to enter the style for the item in the even-numbered row (2, 4, 6, and so on). You can define the style as you would in a CSS class; for example, font-family: verdana; color: yellow; font-weight: bold;
Alternating Item CSS Class	Allows you to enter the CSS class name for the item in the even number row (2, 4, 6, and so on). If this property is specified, it will override the style defined in the Alternating Item Style property. You must define the class specified here in an external CSS file.
Selected Item Style	Allows you to enter the style for the selected item in the grid. You can define the style as you would in a CSS class; for example, backgroundcolor: orange !important; color: blue !important; You can add "!important" after the color name so that this color will override the selected item style provided by the skin.
Selected Item CSS Class	Allows you to enter the CSS class name for the selected item in grid. If this property is specified, it overrides the style defined in the Selected Item Style property. You must define the class specified here in an external CSS file.
Main View Appearance Field Name	Allows you to select the name of the field whose values determine the color of the row in the main view. The value of this field is compared against the FieldValue and FieldValueRange in the Color Appearance property.
Child View Appearance Field Name	Allows you to select the name of the field whose values determine the color of the row in the child view. The value of this field is compared against the FieldValue and FieldValueRange in the Color Appearance property.
Color Appearance	Allows you to define the color of the rows or columns in the main view and child view and also to set the color of the group header. Turn Advanced Mode on if you want to edit Color Appearance in XML format: <Appearance>      <MainViewAppearance>           <RowAppearance FieldValue="value1" BackgroundColor="color1" FontColor="color2" CAOnColumn="name" />           <RowAppearance FieldValueRange="number - number" BackgroundColor="color3" FontColor="color4" CAOnColumn="name" />      </MainViewAppearance>      <ChildViewAppearance>           <RowAppearance FieldValue="value1" BackgroundColor="color1" FontColor="color2" />           <RowAppearance FieldValueRange="number - number" BackgroundColor="color3" FontColor="color4" />      </ChildViewAppearance>      <GroupeHeaderAppearance>           <RowAppearance FieldValue="value1" BackgroundColor="color1" FontColor="color2" />           <RowAppearance FieldValueRange="number - number" BackgroundColor="color3" FontColor="color4" />      </GroupHeaderAppearance> </Appearance> You must specify those elements in that sequence. For example, if you specify ChildViewAppearance before the MainViewAppearance you will get an error that the XML is not valid. To add color for the group header, you must enable grouping for displayed fields before specifying field value, background color and font color. Select the Edit button, then click Add Row Appearance to enter values in the following: • Type — color, icons, or progress bars. If the Icons option is selected you can specify the Appearance. The Progress Bars option is applicable only if you have selected a number type column with percentage format. • Appearance — icons if the selected Type is Icons. • Field Value — value for the field • Field Value Range — a range of values for the field, including negative values • Background Color — the background color of the row for the specified value in the Field Value attribute. The color can be specified as a well-known color such as white, black, cyan, lightGray, as a RGB value such as 255, 255,255, or you can specify it as #FFFFFF, #CCDDEE. • Font Color — the font color of the row for the specified value in the Field Value attribute. The color can be specified as a well-known color such as white, black, cyan, light gray, as a RGB value such as 255, 255,255, or you can specify it as #FFFFFF, #CCDDEE. The Font Color attribute is ignored if you specify a URL in the LinkTo attribute or set the LinkToSource or LinkToTargetURL attributes to true. • Fields Name — name of the fields where color appearance would be applied.
Enable Pivot Grid	Allows you to display pivot table controls on the grid. A pivot table can be used to transform columns into rows and rows into columns. This is useful for obtaining insights from selected data by summarizing, sorting, grouping, reorganizing, and aggregating it in a tabular format. For example, you can compare total sales of different products, display product sales as a percentage of total sales, group information to find sales of specific products by region and by salesperson, etc. Configure these properties to define a pivot table: • All Fields – Select fields whose value would be used for creating the pivot table. • Filter Fields – Select fields for adding different filtering conditions. These conditions define items from the data source (selection from the All Fields section), which should actually be displayed on the pivot table. Once specified, filtering takes place before any aggregate function calculates information on the grid. • Column Fields – Selected fields dragged to this area represent columns of the pivot table. • Row Fields – Selected fields dragged to this area represent rows of the pivot table. • Aggregate Fields – Selected fields dragged to this area represent summation values displayed on the pivot table. These summation values are calculated and based on the specified columns of the pivot table. You can also choose a particular aggregate function (Sum, Count, Average, Min, Max, etc.) and apply it to combine these values together on the pivot table. Apart from aggregation functions, the columns of the pivot table also support functions for grouping columns, by default.
Enable Pivot Chart	Allows you to display pivot chart on the grid. NOTE: Once rendered, the pivot chart gets placed below the corresponding pivot table. NOTE: This only works when the Enable Pivot Grid property is turned on.
Show Pivot Table Configuration Panel On Load	Allows you to automatically open the Pivot Table Configuration panel by default. When set to true, the panel opens when the web part is loaded for the first time.
Pivot Table Configuration Panel Layout	Allows you to define the layout of the Pivot Table Configuration Panel. There are four panel layout options in this property: Stacked, Side by Side, Two by Two, and One by Four. Stacked is default selection.