BasicMultiColumnTable

The BasicMultiColumnTable control allows you to display a table where documents are rendered column-by-column instead of common row-by-row model used in the DataGrid and other controls. This control is useful if you want to e.g. compare parameters of various products.

Sea also: CMSDocumentComparison

Properties

Property Name	Description	Sample Value
DataSource	DataTable object containing rows to be displayed.
RenderFalseValueUsingEmptyTemplate	Indicates if false value of boolean type-columns should be displayed using the template for empty value.
TableParams	Params of the table to be displayed. A string array of size (x, 4) where x is the number of rows of the table and the second parameter is: 0 - Row caption 1 - Row source column 2 - Non-empty-column template (if omitted, the value of the source column is used) 3 - Empty-column template (if omitted, the " " value is used) When specifying the template, you can use {%fieldname%} tags to insert value of any field of the source data. If you need to create a separator row, set only the (x, 0) value to the separator text and do not set the other values (x, 1), (x, 2) and (x, 3) - they must be nothing (null).	Standard row: (0, 0) = "Product weight:" (0, 1) = "Weight" (0, 2) = "{%weight%} kg" (0, 3) = "N/A" Separator row: (0, 0) = "This is separator"

Design

You can modify the design of the table control by setting the following properties:

Property Name	Description	Sample Value
TableCellSpacing	Table cell spacing.	0
TableCellPadding	Table cell padding.	0
TableCellCssClass	Table cell (TD) CSS class.	"MulticolumnTableCell"
TableCssClass	Table CSS class.	"MulticolumnTable"
TableFirstColumnCellCssClass	CSS class of the first table columns' cells (TD).	"MulticolumnTableFirstColumnCell"
TableFirstRowCellCSSClass	Table cell (TD) CSS class for the first row of the table.	"MulticolumnTableFirstRowCell"
TableFirstRowCssClass	First table row (TR) CSS class.	"MulticolumnTableFirstRow"
TableRowCssClass	Table row (TR) CSS class.	"MulticolumnTableRow"
TableSeparatorCellCssClass	CSS class of the separator cell (TD).	"MulticolumnTableSeparatorCell"
TableSeparatorRowCssClass	CSS class of the separator row (TR).	"MulticolumnTableSeparatorRow"

Example

This example will show you how to display a product comparison:

1.	Create a new web form.

2.	Drag and drop the BasicMultiColumnTable control on the form.

3.	Switch to the code behind and add the following code at the beginning of the code:

[C#]

using CMS.CMSHelper;

[VB.NET]

Imports CMS.CMSHelper

4.	Add the following code to the Page_Load method:

[C#]

string[,] tableParams = new string[3, 4];

DataSet ds = null;

// set data source

ds = TreeHelper.SelectNodes("/%", false, "cms.product", "", "ProductName", -1, true);

BasicMultiColumnTable1.DataSource = ds.Tables[0];

// define table header with product names

tableParams[0, 0] = "Product:";

tableParams[0, 1] = "productName";

// add row with product description

tableParams[1, 0] = "Description:";

tableParams[1, 1] = "ProductDescription";

// add row with product price

tableParams[2, 0] = "Price:";

tableParams[2, 1] = "productPrice";

tableParams[2, 2] = "USD {%ProductPrice%}";

tableParams[2, 3] = "N/A";

BasicMultiColumnTable1.TableParams = tableParams;

[VB.NET]

Dim tableParams(2, 3) As String

Dim ds As DataSet

'set data source

ds = TreeHelper.SelectNodes("/%", False, "cms.product", "", "ProductName", -1, True)

BasicMultiColumnTable1.DataSource = ds.Tables(0)

'define table header with product names

tableParams(0, 0) = "Product:"

tableParams(0, 1) = "ProductName"

'add row with product description

tableParams(1, 0) = "Description:"

tableParams(1, 1) = "ProductDescription"

'add row with product weight

tableParams(2, 0) = "Price:"

tableParams(2, 1) = "ProductPrice"

tableParams(2, 2) = "USD {%ProductPrice%}"

tableParams(2, 3) = "N/A"

BasicMultiColumnTable1.TableParams = tableParams

What you did

You have added the code that retrieves all products from the Kentico CMS database and assigns them to the BasicMultiColumnTable control. The tableParams array defines how the data should be displayed.

5.	Compile and run the project. You should see a page like this:

Page url: http://devnet.kentico.com/docs/controls/index.html?basicmulticolumntable.htm