Introduction
Check out this quick little how-to guide for embedding the DevExpress ASP.NET MVC GridView into the Tab Strip Extension.
Background
Alexey M. asked the following question on our forums:
MVC Tabs Demo and GridView components
By Alexey X in MVC Extensions
Hello! I'm using demo with AJAX tabbed page. I want to place a data grid into one of the ajax-tab. How I can do it?
Solution
Our Tab Strip extension has a slick 'AJAX' demo that shows off it's callback capabilities when clicking on the different tabs:
To embed our MVC GridView extension into the Tab Strip extension, follow these steps:
1. Create a View called TabControl.aspx and add the following code:
<% Html.RenderPartial("TabControlPartial", Model); %>
2. Create the 'TabControlPartial.ascx' view and add the following code for the tab strip extension:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%
Html.DevExpress().PageControl(settings => {
settings.Name = "pageControl";
settings.CallbackRouteValues = new { Controller = "Home", Action = "TabControlPartial" };
settings.TabPages.Add("page1");
settings.TabPages.Add(tabPage => {
tabPage.Text = "page2";
tabPage.SetContent(() => {
Html.RenderPartial("GridViewPartial", Model);
});
});
})
.Render();
%>
3. Create the 'GridViewPartial.ascx' view and add the following code for the GridView extension:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%
Html.DevExpress().GridView(settings => {
settings.Name = "Grid";
settings.CallbackRouteValues = new { Controller = "Home", Action = "GridViewPartial" };
...
})
.Bind(Model)
.Render();
%>
4. Be sure to have your methods also defined in your Controller. In the sample above, I'm referencing the HomeController.cs:
...
public ActionResult TabControl() {
return View(GetData());
}
public ActionResult TabControlPartial() {
return PartialView(GetData());
}
public ActionResult GridViewPartial() {
return PartialView(GetData());
}
...
If want to convert the above code to the 'Razor' view engine then please check out these excellent resources:
Enjoy and thanks for using the DevExpress MVC Extensions!
Build Your Best - Without Limits or Compromise
Try the DevExpress ASP.NET MVC Extensions online now: http://mvc.devexpress.com
Read the latest news about DevExpress ASP.NET MVC Extensions
Download a free and fully-functional version of DXperience now: http://www.devexpress.com/Downloads/NET/
