Kentico CMS 7.0 Controls

Getting started

Getting started

Previous topic Next topic Mail us feedback on this topic!  

Getting started

Previous topic Next topic JavaScript is required for the print function Mail us feedback on this topic!  

The following is a step-by-step tutorial that will show you how to display a list of smartphones (CMS.Smartphone documents) from the sample Corporate Site using the BasicDataList control:

 

1. Create a new Web form somewhere in your website installation directory.

 

2. Switch to its Design tab, drag and drop a BasicDataList control from the toolbox onto the form and set its RepeatColumns property value to 3. This determines the number of columns that should be displayed.

 

3. Switch to the Source tab and add the code marked by the BasicDataList template comments between the <cms:BasicDataList> tags. The overall code of the BasicDataList control should look like this:

 

<cms:BasicDataList ID="BasicDataList1" runat="server" RepeatColumns="3">

 

<%-- BasicDataList template --------------------------------------------------------- --%>

 

<itemtemplate>

  <div style="width: 250px">

   <h3>

      <%# Eval("SmartphoneName") %>

   </h3>

  <%# EcommerceFunctions.GetProductImage(Eval("SKUImagePath"), 200, Eval("SmartphoneName")) %>

  </div>

</itemtemplate>

 

<%-- BasicDataList template --------------------------------------------------------- --%>

 

</cms:BasicDataList>

 

This defines the template used by the BasicDataList to display items. The control dynamically replaces the <%#  ... %> tags with values of the currently displayed record. This is then repeated for every record in the data source.

 

4. Switch to the code behind of the page and add the following references to the beginning of the code:

 

[C#]

 

using System.Data;

 

using CMS.CMSHelper;

 

[VB.NET]

 

Imports System.Data

 

Imports CMS.CMSHelper

 

5. Now add the following code to the Page_Load method:

 

[C#]

 

DataSet ds = TreeHelper.SelectNodes("/%", false, "CMS.Smartphone", "", "SmartphoneName", -1, true);

 

BasicDataList1.DataSource = ds;

BasicDataList1.DataBind();

 

[VB.NET]

 

Dim ds As DataSet = TreeHelper.SelectNodes("/%", False, "CMS.Smartphone", "", "SmartphoneName", -1, True)

 

BasicDataList1.DataSource = ds

BasicDataList1.DataBind()

 

This retrieves all CMS.Smartphone documents from the Kentico CMS database as a DataSet and assigns it as the data source of the BasicDataList control.

 

6. Save the changes to the web form. Now right-click it in the Solution explorer and select View in Browser. The resulting page should display a list similar to the following:

 

controls_clip0032