This is a migrated thread and some comments may be shown as answers.

How does a view containing a Grid stay in a TabStrip when it gets refreshed for e.g. ..?

2 Answers 71 Views

TabStrip

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Kai-Tobias asked on 27 Oct 2010, 09:52 AM

testproject.zip

Hello!

I have a problem using the TabStrip, which I want to be the main navigation element of my application.
To achieve this, I placed the TabStrip in the Index View.
For this thread I created a sample project, for which I used the standard MVC 2 application from visual studio 2010.

Every loaded "partial" view is a view (.aspx) for all of which I created an own master page. These "partial" views are loaded on demand like in the Telerik demo.
My problem occured when I tried to use a Grid in one of those "partial" views. I'm sorry if this belongs to the Grid section, but I'm not sure if my problem is caused by the TabStrip, by the Grid or by myself ;)

Here's the problem:
In my sample application I have two tabs displayed when the application is started. The first Tab shows a DatePicker I tested, which works fine and which is not part of the problem.
The second Tab contains a Telerik Grid. Now everytime I perform an action on the Grid like sorting or refreshing, the view containing the Grid is displayed over the whole screen and not inside the tab anymore.

My guess is that this could also maybe be a problem of routing, but I am a little confused right now, so I'd appreciate any help.

Anyway, please have a look at the code:

Site.Master:

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>

<link href="/Content/styles_neu.css" rel="stylesheet" type="text/css" />

<%= Html.Telerik().StyleSheetRegistrar()

.DefaultGroup(group => group.Add("telerik.common.css")

.Add("telerik.Windows7.css"))%>

</head>

<body>

<div class="page">

<form id="SiteMasterForm" runat="server">

<table style="width:100%">

<tr>

<td>

<div id="main">

<asp:ContentPlaceHolder ID="MainContent" runat="server" />

<div id="footer">

</div>

</td>

</tr>

</table>

</form>

</div>

<%= Html.Telerik().ScriptRegistrar().DefaultGroup(group =>

{

group.Add("telerik.common.js");

group.Add("jquery-1.4.2.min.js");

group.Add("telerik.calendar.min.js");

group.Add("telerik.datepicker.min.js");

}).Globalization(true)

%>

</body>

</html>

The Index View which contains the TabStrip and uses the Site.Master:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

Startseite

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<h2><%: ViewData["Message"] %></h2>

<% Html.Telerik().TabStrip().Name("ReiterMenu").Items( parent => {

parent.Add()

.Text("Content Page 1 - DatePicker")

.LoadContentFrom("DatePickerTest", "TabStrip")

.Selected(true);

parent.Add()

.Text("Content Page 2 - Grid")

.LoadContentFrom("GridTest", "TabStrip");

}).Render();

%>

</asp:Content>

Here you see the TabStripController:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using DatePickerTestProject.Models;

namespace DatePickerTestProject.Controllers

{

public class TabStripController : Controller

{

//

// GET: /TabStrip/

public ActionResult Index()

{

return View();

}

public ActionResult DatePickerTest()

{

return View();

}

public ActionResult GridTest()

{

ADD_SRSEntities db = new ADD_SRSEntities();

ViewData["data"] = db.TabKostenarten;

return View();

}

The Tabs.Master for applying CSS to the views inside the TabStrip:

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>

<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />

<%= Html.Telerik().StyleSheetRegistrar()

.DefaultGroup(group => group.Add("telerik.common.css")

.Add("telerik.vista.css"))

%>

</head>

<body>

<div class="page">

<div id="main">

<asp:ContentPlaceHolder ID="MainContent" runat="server" />

<div id="footer">

</div>

</body>

</html>

And finally the View containing the Grid and using the Tabs.Master:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Tabs.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

GridTest

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<h2>GridTest</h2>

<%

Html.Telerik().Grid<DatePickerTestProject.Models.TabKostenarten>("data")

.Name("TestGrid")

.Columns(c =>

{

c.Bound(o => o.KostenartID);

c.Template(o =>

{

%>

<%: o.Kostenarten %>

<%

}).Title("Kostenarten");

})

.Render();

%>

</asp:Content>

I attached my sample project if that helps.

So, all I want is to keep the views inside the TabStrip... How can I do that?

Best regards,
Kai

2 Answers, 1 is accepted

answered on 27 Oct 2010, 04:41 PM

tabproblem01.png

tabproblem02.png

Hi Peter,
thanks for your reply!

Unfortunately this didn't solve my problem.
I tried to load the views with the suggested scripts etc., but the behavior remains.

It is no problem to load the view containing the grid in the first place.

The problem is, that the view is not displayed within the Tab anymore when I perform any action on the grid like refreshing or sorting.

To make clear what happens I have attached two screenshots:
The first shows my sample application with the grid loaded in a view inside a tab.
The second shows my screen after I refreshed the Grid (lower left corner) or sorted it (for example by clicking on "Date" ).

The Grid works fine, just the updated view gets displayed in the wrong place. I want it in the Tab like in picture #1 and not in fullscreen like in picture #2..

So please.. any ideas would be great..!