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 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:
 
clip0008