ASP.NET MVC - How To Embed MVC GridView Extension In To Tab Strip Extension
Check out this quick little how-to guide for embedding the DevExpress 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:
- DevExpress with ASP.NET MVC 3 Razor View Engine
- Also check out the handy "Using in Razor Views" help topic
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/