We need your help with an issue with expand/collapse DetailView on grid.
We are using MVC3 Razor and Q1 2012 Telerik MVC, RadControls for ASP.NEt AJAX 2012, IE 7.
So, we have four tabs and each tab has a grid. Code for grid is the same for all tabs.
Now, if I go first time to my first tab I can expand or collapse any DetailRow in this grid. But if I go now to second, third or forth tab I can not expand or collapse any of DetailRows on those tabs, and still be able to work with first tab DetailViews.
If I go first to second tab - I'm able to expand or collapse all DetailViews on second and first tabs, but not on third or forth. Same way if I'm on third tab - first, second and third tabs' DetailViews are working like a charming, and no way to get it worked on forth tab.
It is funny, but if I'm going first of all to my forth tab - all the rest tabs (anyone of four tabs) DetailViews doing the job just perfect.
Just forgot to mention that our project has two master pages nested, and the Site.Master is the second one.
Also, we have try with the following approaches, described in:
1. Grid row expand collapse on row selection - Posted on May 7, 2012 (permalink) by Srikanth, and replied by Petur Subev;
2. Expand/Collapse all DetailViews in a grid - Posted on Dec 17, 2010 (permalink) , posted by Makoto.
We will greatly appreciate any help, explanation or sample code for the issue.
Grid.cshtml:
---------------
using Telerik.Web.Mvc.UI
@model IEnumerable<Rtr.Web.Application.Areas.Administration.Models.SupervisionModel>
<script type="text/javascript">
$(document).ready(function () {
$('th.t-hierarchy-cell').html('<a href="#" title="Expand/Collapse all" onclick="return toggleDetail(this);" class="t-icon t-plus"></a>');
});
function toggleDetail(e) {
var grid = $(e).closest('.t-grid').data('tGrid');
if ($(e).hasClass('t-minus')) {
grid.$rows().each(function (index) { grid.collapseRow(this); })
$(e).removeClass('t-minus');}
else {
grid.$rows().each(function (index) { grid.expandRow(this); })
$(e).addClass('t-minus'); }
return false;
}
function onDetailViewCollapse(e) {
var grid = $(e.target).data('tGrid');
grid.collapseRow(e.row);
}
function onDetailViewExpand(e) {
var grid = $(e.target).data('tGrid');
grid.expandRow(e.row);
}
</script>
@{
Html.Telerik().Grid(Model).Name("DashboardGrid").Footer(false)
.DataKeys(keys => keys.Add(k => k.Supervision.Id).RouteKey("SupervisionId"))
.DataBinding(dataBinding => dataBinding.Server())
.Columns(columns =>
{
columns.Template(@<text><img alt="@item.StateImage ).Width(45'>" src="@Url.Content(item.StateImage)"/></text>).Width(45);
columns.LoadSettings((IEnumerable<GridColumnSettings>)ViewData["Columns"]);
})
.DetailView(detailView => detailView.Template(t => Html.Partial("SupervisionDetail", t)))
.ClientEvents(events => events.OnDetailViewCollapse("onDetailViewCollapse").OnDetailViewExpand("onDetailViewExpand"))
.Render();
}
Site.Master:
---------------
<head>
<link href="<%=Url.Content("~/Content/css_reset.css")%>" rel="stylesheet" type="text/css" media="screen, print" />
<link href="<%=Url.Content("~/Content/default.css")%>" rel="stylesheet" type="text/css" media="screen, print" />
<link href="<%=Url.Content("~/Content/themes/base/jquery.ui.all.css")%>" rel="stylesheet" type="text/css" />
<link href="<%=Url.Content("~/Content/dd.css")%>" rel="stylesheet" type="text/css" />
<script src="<%=Url.Content("~/Scripts/jquery-1.7.1.min.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/jquery.ui.core.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/jquery.ui.widget.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/jquery-ui-1.8.11.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/modernizr-1.7.min.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/jquery.validate.min.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/jquery.validate.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/jquery.validate.unobtrusive.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/mvcfoolproof.unobtrusive.min.js")%>" type="text/javascript"></script>
<telerik:RadCodeBlock ID="RadCodeblock1" runat="server">
<%= Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.vista.css").Compress(true))%>
</telerik:RadCodeBlock>
<asp:ContentPlaceHolder runat="server" ID="HeadContent" />
</head>
<body>
<%= Html.Telerik().ScriptRegistrar().Globalization(true).jQuery(false).DefaultGroup(group => group..Combined(true) ) %>
</body>