.Net, ASP.NET, C#, JavaScript, Kendo UI, TabStrip, Web Development, WebForms

Example of Populating a Kendo UI TabStrip from C# CodeBehind

Kendo UI
Kendo UI

In this article I’m going to show an example Web page in which I take a basic Kendo TabStrip front-end control, and integrate it with an ASP.NET WebForm in order to dynamically add tabs to the TabStrip from code-behind. To be able to run the example right away I’ve referenced the key libraries online instead of using a local reference. If you are working with this script and plan to keep working with Kendo components, then it’s best to download the libraries.


The Basics

I used the example template for the Kendo UI TabStrip control from the Telerik demo page at: http://demos.telerik.com/kendo-ui/tabstrip/index . This is a pretty good starting spot for learning to work with the Kendo UI control basics and also explains the API well.

As you are probably aware, Kendo UI controls exist entirely at the front-end. You can pass them information from a back-end database in a variety of ways including AJAX, or, as I’ll show in this example; directly from your code-behind.

The TabStrip control gets configured using an HTML un-ordered list to add the tab headers, and then using HTML Div tags to add the content for each header. It’s just that simple: the Kendo UI libraries handle the rest for you. You can then customize the look and feel of your tabs using standard CSS. If you want to find out how to address a particular tab strip section, then you can use a simple HTML investigation tool like IE’s inbuilt DOM Explorer.

Because the TabStrip control is configured directly from HTML, you can add the necessary HTML elements in your Web Form’s Page Load event since this runs before the Kendo UI libraries are called to construct the TabStrip.

A handy trick to keep in mind is that you can nest HTML iFrames inside of your Kendo UI controls that will let you easily enable embedded forms that do not reset the state of your Kendo controls.

Setting up the Tab Headers

As I mentioned above, you set up the TabStrip tab headers using an HTML unordered List (UL). Since this is simple HTML, you can add the list and its components entirely from code-behind. This is nice because you can dynamically generate the tabs based on data in a database table.

You can use the ASP.NET HtmlGenericControl to add and configure the tabs to add in your code-behind. So, for example, to add an li to a ul:

First instantiate a new <LI> HtmlGenericControl

HtmlGenericControl newTabHdr = new HtmlGenericControl("li");

Then you can assign some text to the <LI> that will become your tab header text using the InnerText attribute of the HtmlGenericControl:

newTabHdr.InnerText = "Dynamic Tab #1";

It’s quite straightforward to build up and nest your controls so that the LIs are nested inside a UL using the Controls.Add method:

ulTabHeaders.Controls.Add(newTabHdr);

Adding the Tab Content Areas

Ok, so now that we have the Tab headers all set up, we’ll want to add the HTML Divs that will contain the contents of the tabs that we just added. Just like the tab header HTML objects, you can instantiate the new Divs as HtmlGenericControl objects:

HtmlGenericControl newTabContent2 = new HtmlGenericControl("div");

I mentioned above that a quick and easy way to embed forms and dynamic functionality within your Kendo UI controls is by using an HTML iFrame object inside of your Kendo UI control. In this case, you can embed the iFrame into the content Div of your TabStrip using the InnerHtml attribute of the HtmlGenericControl representing the new Dvi tag:

newTabContent2.InnerHtml = "Content Example Text";

Finally, all that’s left is to append the new Div to the parent Div:

ulTabHeaders.Controls.Add(newTabHdr2);

The Example code of a fully functional example of a Kendo UI TabStrip Populated from C# Code-behind

Ok, so now let’s put all this together into a functional ASP.NET Web form that renders the tabs dynamically. Although the example below is not database driven, it would not be a huge jump to take the code and hook up a database connection.

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
// Adding the first dynamically generated tab
HtmlGenericControl newTabHdr = new HtmlGenericControl("li");
newTabHdr.InnerText = "Dynamic Tab #1";
HtmlGenericControl newTabContent = new HtmlGenericControl("div");
newTabContent.InnerText = "Here is content for a tab that has been dynamically generated in C# code-behind.";
ulTabHeaders.Controls.Add(newTabHdr);
divTestTabs.Controls.Add(newTabContent);

// Adding the second dynamically generated tab which is an iFrame pointing at another ASP.NET page
HtmlGenericControl newTabHdr2 = new HtmlGenericControl("li");
newTabHdr2.InnerText = "Dynamic Tab #2";
HtmlGenericControl newTabContent2 = new HtmlGenericControl("div");
newTabContent2.InnerHtml = "Some Example Text";
ulTabHeaders.Controls.Add(newTabHdr2);
divTestTabs.Controls.Add(newTabContent2);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.1.416/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.ui.core.min.js"></script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<style scoped>
.wrapper {
width: 400px;
height: 455px;
margin: 20px auto;
padding: 20px 0 0 390px;
}
#tabstrip {
width: 400px;
float: right;
margin-bottom: 20px;
}
#tabstrip .k-content
{
height: 320px;
overflow: auto;
}
.specification {
max-width: 670px;
margin: 10px 0;
padding: 0;
}
.specification dt, dd {
width: 140px;
float: left;
margin: 0;
padding: 5px 0 7px 0;
border-top: 1px solid rgba(0,0,0,0.3);
}
.specification dt {
clear: left;
width: 120px;
margin-right: 7px;
padding-right: 0;
text-align: right;
opacity: 0.7;
}
.specification:after, .wrapper:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
</style>
<div id="divTestTabs" runat="server">
<ul id="ulTabHeaders" runat="server">
<li class="k-state-active">Dimensions &amp;amp; Weights</li>
<li>Engine</li>
</ul>
<div runat="server" id="divInnerOne">
<div class="weather">
<h2>17<span>&amp;ordm;C</span></h2>
<p>Rainy weather in Paris.</p>
</div>
<span class="rainy">&amp;nbsp;</span>
</div>
<div runat="server" id="divInnerTwo">

</div>
</div>
<script>
$(document).ready(function () {
var ts = $("#divTestTabs").kendoTabStrip({
animation: { open: { effects: "fadeIn"} }
}).data('kendoTabStrip');
setTimeout(function () {
ts.reload($('#tabstrip li:last'));
})
});
</script>
</form>
</body>
</html>
Advertisements

1 thought on “Example of Populating a Kendo UI TabStrip from C# CodeBehind”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s