Click here to Skip to main content
13,289,626 members (53,627 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


6 bookmarked
Posted 12 Jul 2013

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

, 12 Jul 2013
Rate this:
Please Sign up or sign in to vote.
How to place a data grid into one of the ajax-tab

Editorial Note

This article is for our sponsors at CodeProject. These articles are intended to provide you with information on products and services that we consider useful and of value to developers


Check out this quick little how-to guide for embedding the DevExpress ASP.NET MVC GridView into the Tab Strip Extension.


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?


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(tabPage => {
            tabPage.Text = "page2";
            tabPage.SetContent(() => { 
                Html.RenderPartial("GridViewPartial", Model);

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" };


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:

Read the latest news about DevExpress ASP.NET MVC Extensions

Download a free and fully-functional version of DXperience now:


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Mehul Harry
Web Developer
United States United States
.Net, C#, SQL, Delphi

You may also be interested in...

Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171207.1 | Last Updated 12 Jul 2013
Article Copyright 2013 by Mehul Harry
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid