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. 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. 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. 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-color: #FFCC99; 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. 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 define 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. Color Appearance Allows you to define the color of the rows in the main view, child view, and group header. Turn on Advanced Mode 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> <GroupeHeaderAppearance> <RowAppearance FieldValue="value1" BackgroundColor="color1" FontColor="color2" /> <RowAppearance FieldValueRange="number - number" BackgroundColor="color3" FontColor="color4" /> </GroupHeaderAppearance> </Appearance> 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: • 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. • Field Name — name of the field