Click here to Skip to main content
12,627,681 members (32,551 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

14.1K views
6 bookmarked
Posted

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

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

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

You may also be interested in...

Comments and Discussions

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