ASP.NET MVC - How To Embed MVC GridView Extension In To Tab Strip Extension

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:

• 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/