Supported Data Sources
The datasource RadTileList can use is an IEnumerable collection. This includes:
Declarative ASP datasources (SqlDatasource, ObjectDataSource, LinqDataSource, RadClientDataSource etc.)
DataTable
List<> of custom objects
In order to preselect the structure of the control follow the information from the Defining Structure help article.
Declarative Datasource
The declarative DataSource controls in ASP can return the needed collection type. In order to use them, the DataSourceID property of the RadTileList must be set to the ID of the declarative datasource control.
Here is a simple example with an SqlDataSource:
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT TOP(12) [ProductID], [ProductName], [UnitPrice] FROM [Products] WHERE ([CategoryID] = @CategoryID)">
<SelectParameters>
<asp:Parameter DefaultValue="8" Name="CategoryID" Type="Int32"></asp:Parameter>
</SelectParameters>
</asp:SqlDataSource>
<telerik:RadTileList RenderMode="Lightweight" runat="server" DataSourceID="SqlDataSource1" ID="RadTileList1" Width="634px" TileRows="3"
ScrollingMode="None" SelectionMode="Multiple" AutoPostBack="false">
<DataBindings>
<CommonTileBinding TileType="RadImageTile" DataTitleTextField="UnitPrice" DataNameField="ProductName" />
</DataBindings>
</telerik:RadTileList>
Once the SELECT statement is in place the control automatically receives the result from the query.
When RadClientDataSource control is used for client-side data binding, the ID of the control is set with the TileList's ClientDataSourceID property.
Here is a simple example with a RadClientDataSource:
<telerik:RadClientDataSource runat="server" ID="RadClientDataSource1">
<ClientEvents OnDataRequested="OnDataRequested" />
<DataSource>
<WebServiceDataSourceSettings ServiceType="OData">
<Select Url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products" DataType="JSONP" />
</WebServiceDataSourceSettings>
</DataSource>
</telerik:RadClientDataSource>
<telerik:RadTileList RenderMode="Lightweight" runat="server" ID="RadTileList1" Width="1015px" Height="500px"
ClientDataSourceID="RadClientDataSource1">
<DataBindings>
<CommonTileBinding DataNameField="ProductName" DataGroupNameField="CategoryID"
DataBadgeValueField="UnitsInStock" TileType="RadImageTile" />
</DataBindings>
</telerik:RadTileList>
Programmatic Datasources
In order to set a datasource from the code-behind to the RadTileList its DataSource property must be used and then its DataBind() method must be called.
Here follow several examples.
DataTable
This example will generate a simple DataTable with code so that its structure is clearly visible and easy to follow. Run the code to see how it behaves.
<telerik:RadTileList RenderMode="Lightweight" runat="server" ID="RadTileList2">
<DataBindings>
<CommonTileBinding DataGroupNameField="GroupNameColumn" TileType="RadTextTile" Shape="Square" />
<TextTileBinding DataTextField="TextColumn" />
</DataBindings>
</telerik:RadTileList>
protected void Page_Load(object sender, EventArgs e)
{
if(!Page.IsPostBack)
{
RadTileList1.DataSource = GetDummyData();
RadTileList1.DataBind();
}
}
protected DataTable GetDummyData()
{
DataTable tbl = new DataTable();
tbl.Columns.Add(new DataColumn("GroupNameColumn"));
tbl.Columns.Add(new DataColumn("TextColumn"));
//Note the order in which the group names are met
tbl.Rows.Add(new object[] { "GroupOne", "GroupOne, Tile One" });
tbl.Rows.Add(new object[] { "GroupOne", "GroupOne, Tile Two" });
tbl.Rows.Add(new object[] { "GroupTwo", "GroupTwo, Tile One" });
tbl.Rows.Add(new object[] { "GroupTwo", "GroupTwo, Tile Two" });
tbl.Rows.Add(new object[] { "GroupThree", "GroupThree, Tile One" });
tbl.Rows.Add(new object[] { "GroupThree", "GroupThree, Tile Two" });
return tbl;
}
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
RadTileList1.DataSource = GetDummyData()
RadTileList1.DataBind()
End If
End Sub
Protected Function GetDummyData() As DataTable
Dim tbl As New DataTable()
tbl.Columns.Add(New DataColumn("GroupNameColumn"))
tbl.Columns.Add(New DataColumn("TextColumn"))
'Note the order in which the group names are met
tbl.Rows.Add(New Object() {"GroupOne", "GroupOne, Tile One"})
tbl.Rows.Add(New Object() {"GroupOne", "GroupOne, Tile Two"})
tbl.Rows.Add(New Object() {"GroupTwo", "GroupTwo, Tile One"})
tbl.Rows.Add(New Object() {"GroupTwo", "GroupTwo, Tile Two"})
tbl.Rows.Add(New Object() {"GroupThree", "GroupThree, Tile One"})
tbl.Rows.Add(New Object() {"GroupThree", "GroupThree, Tile Two"})
Return tbl
End Function
List of Custom Objects
This example will use a custom class and create a short List with its instances that will be passed to the RadTileList. The names of the fields in thecustom class are used for the databinding properties of the TileList.
<telerik:RadTileList RenderMode="Lightweight" runat="server" ID="RadTileList2">
<DataBindings>
<CommonTileBinding TileType="RadTextTile" Shape="Wide" DataNavigateUrlField="TileUrls" Target="_blank" />
<TextTileBinding DataTextField="TileTexts" />
</DataBindings>
</telerik:RadTileList>
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
List<TileDataMocking> sampleData = new List<TileDataMocking>();
sampleData.Add(new TileDataMocking("https://www.telerik.com/", "Learn more about Telerik"));
sampleData.Add(new TileDataMocking("http://www.sitefinity.com/", "Explore Sitefinity"));
sampleData.Add(new TileDataMocking("http://www.icenium.com/", "Discover Icenium"));
RadTileList2.DataSource = sampleData;
RadTileList2.DataBind();
}
}
public class TileDataMocking
{
public TileDataMocking(string tileUrls, string tileTexts)
{
_TileUrls = tileUrls;
_TileTexts = tileTexts;
}
private string _TileUrls;
public string TileUrls
{
get { return _TileUrls; }
set { _TileUrls = value; }
}
private string _TileTexts;
public string TileTexts
{
get { return _TileTexts; }
set { _TileTexts = value; }
}
}
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
Dim sampleData As New List(Of TileDataMocking)()
sampleData.Add(New TileDataMocking("https://www.telerik.com/", "Learn more about Telerik"))
sampleData.Add(New TileDataMocking("http://www.sitefinity.com/", "Explore Sitefinity"))
sampleData.Add(New TileDataMocking("http://www.icenium.com/", "Discover Icenium"))
RadTileList2.DataSource = sampleData
RadTileList2.DataBind()
End If
End Sub
Public Class TileDataMocking
Public Sub New(tileUrls As String, tileTexts As String)
_TileUrls = tileUrls
_TileTexts = tileTexts
End Sub
Private _TileUrls As String
Public Property TileUrls() As String
Get
Return _TileUrls
End Get
Set(value As String)
_TileUrls = value
End Set
End Property
Private _TileTexts As String
Public Property TileTexts() As String
Get
Return _TileTexts
End Get
Set(value As String)
_TileTexts = value
End Set
End Property
End Class