Click here to Skip to main content
11,431,483 members (70,452 online)
Click here to Skip to main content

Tagged as

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

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

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/

License

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

Share

About the Author

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

Comments and Discussions

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