This website is no longer actively supported
Written by John DeVight on 12 May 2011 21:15
Last Updated by John DeVight on 13 Jun 2011 13:31
Download RAZOR Source Code
Download ASPX Source Code
* Note: the Telerik.Web.Mvc.dll, Telerik "Contents" and Telerik "Scripts" have all been removed to reduce the zip file size
Overview
After posting a message on the Telerik forum on How to change the Tab Title? discussion thread that referenced my wiki page Telerik MVC : Creating an "ExtJS border-layout" with Splitters I was asked about adding to the telerik.extensions.js the capability to add a tab to the Telerik MVC TabStrip dynamically.
I took a look at the telerik.tabstrip.min.js file using Format Javascript and also took a look at the html being rendered by the TabStrip control using Firebug and then put together a solution that I incorporated into the telerik.extensions.js file. I then put together a sample project demonstrating how to use the addTab function. The sample project is based on the sample project found on the wiki page Telerik MVC : Resizing Controls Within Splitter Panes. Therefore, I won't go into detail on how I setup the _Layout.cshtml page, Index.cshtml or Layout.js.
I decided that the best way to demonstrate using the addTab function was to get a partial view using a jQuery.ajax call. Once I had the html for the partial view, I simply call the addTab function and pass in the text for the tab and the html returned from the jQuery.ajax call.
Creating a Partial View for the new Tab
I created a partial view called LoadUsingAjax. I didn't put much into the partial view. Note that I put a div in the contents of the partial view. I did this so that I can resize the contents of the tab to fit into the "content pane".
@{
Layout = null;
}
<div id="loadUsingAjax" style="overflow: auto;">
Tab Three Contents
</div>
Adding a Method to the Home Controller
I added a method to the Home Controller for the jQuery.ajax call to get the partial view. Here is the code:
namespace TelerikMvcApplication.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
public ActionResult GetTabThree()
{
return View("LoadUsingAjax");
}
}
}
Getting the Partial View and Adding the Tab
I updated the Index class in Index.js to make the jQuery.ajax call in the Index.Init function. This was to keep it simple. The more likely scenario would be to make the jQuery.ajax call based on input from the user. Also, I added a line of code in the Index.Resize function to resize the loadUsingAjax div.
Here is the code:
var Index = {};
Index.Init = function() {
Index.Resize();
$(window).resize(Index.Resize);
_messageBroker.AddSubscriber("InnerSplitterResizeEvent", function() { Index.Resize(); });
$.ajax({
url: '/Home/GetTabThree/',
contentType: 'application/html; charset=utf-8',
type: 'GET',
dataType: 'html',
cache: false
})
.success(function(result) {
$('#IndexTabStrip').data('tTabStrip').addTab({ text: 'Tab Three', html: result });
});
}
Index.Resize = function() {
var contentPane = $($('#InnerSplitter').children()[2]);
var height = contentPane.height();
var width = contentPane.width();
// Resize the tab control to fit in the contract splitter.
var tabStripCtrl = $('#IndexTabStrip');
tabStripCtrl.height(height - 2);
tabStripCtrl.width(width - 2);
$('#tabOneContents').height(tabStripCtrl.height() - 50);
$('#tabTwoContents').height(tabStripCtrl.height() - 50);
$('#loadUsingAjax').height(tabStripCtrl.height() - 50);
}
And that is it!
