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

ASP.NET Team Blog
15 June 2011

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:

image

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/

Follow MehulHarry on Twitter

6 comment(s)
Alexey X
Alexey X

Hello!

I'm getting such exception at aspx-file:

c:\Documents and Settings\MoiseevAI\My Documents\Dropbox\ISG\CS\trunk\MVCDemos\Views\Request\CallbacksPartial.ascx(4): error CS1660: Cannot convert lambda expression to type 'DevExpress.Web.Mvc.PageControlSettings' because it is not a delegate type

Could you please explain me - what I need to read, to understand?

15 June, 2011
Mike (DevExpress Support)
Mike (DevExpress Support)

Hello Alexey,

This issue is caused by the fact that any expression in the PageControl's definition is not valid, so that the entire PageControl's definition (lambda expression) cannot be recognized by the View Engine.

Please refer to the original post ([url=community.devexpress.com/.../346904.aspx]community.devexpress.com/.../346904.aspx[/url]) where I published two samples, illustrating how to accomplish this task within both ASPx and Razor View Engines.

20 June, 2011
Spud
Spud

Hi, are there any plans to update these for Razor, as I'm having real issues translating what I have to do...

10 August, 2012
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Spud,

Please take a look at this thread:

community.devexpress.com/.../346904.aspx

Mike has created a sample that has a razor version in it.

Thanks.

10 August, 2012
Simon Cash
Simon Cash

The above link no longer exists. Do you have another Razor example?

8 May, 2017
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Hi Simon,

Could you please create a support ticket and our support team will be able to help you:

www.devexpress.com/.../Create

8 May, 2017

Please login or register to post comments.