This question is locked. New answers and comments are not allowed.
Hi folks,
I'm using the new Telerik_Extensions_for_ASPNET_MVC_2009_3_1218 (with ASP.Net MVC 2 RC).
I have a Telerik grid in a partial view (returned by a controller action as PartialViewResult).
When I use Html.RenderAction to make it appear, the grid performs as expected.
However, if the grid is put in a Telerik TabStrip (loaded into a tab item via LoadContentFrom), the Grid appears fine, until you try to use any of the functionality (e.g. click a column heading to sort).
At this point, the rest of the page disappears, TabStrip, container page, master page etc! All that is left is the grid content from the partial view AND it no longer has any styling. But the javascript (i.e. sorting) continues to work correctly!
Here's my tabstrip:
<% Html.Telerik().TabStrip()
.Name("TabStrip")
.Items(items =>
{
items.Add().Text("Payments")
.LoadContentFrom("DisplayClientPayments", "Payments");
items.Add().Text("Plans").LoadContentFrom("DisplayClientPlans", "Payments");
}).SelectedIndex(0)
.Render();
%>
Here is a controller action:
public PartialViewResult DisplayClientPayments()
{
//.. code omitted getting list of type List<Payment>.
return PartialView("ClientPaymentsControl", list);
}
Here's a partial view:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<List<Payment>>" %>
<%
Html.Telerik().Grid(Model)
.Name("PaymentsGrid")
.Columns(columns =>
{
columns.Add(x => x.CreatedOn);
columns.Add(x => x.Type);
columns.Add(x => x.SubType);
})
.Sortable()
.Pageable()
.Render();
%>
Any ideas?
Cheers
Matt
I'm using the new Telerik_Extensions_for_ASPNET_MVC_2009_3_1218 (with ASP.Net MVC 2 RC).
I have a Telerik grid in a partial view (returned by a controller action as PartialViewResult).
When I use Html.RenderAction to make it appear, the grid performs as expected.
However, if the grid is put in a Telerik TabStrip (loaded into a tab item via LoadContentFrom), the Grid appears fine, until you try to use any of the functionality (e.g. click a column heading to sort).
At this point, the rest of the page disappears, TabStrip, container page, master page etc! All that is left is the grid content from the partial view AND it no longer has any styling. But the javascript (i.e. sorting) continues to work correctly!
Here's my tabstrip:
<% Html.Telerik().TabStrip()
.Name("TabStrip")
.Items(items =>
{
items.Add().Text("Payments")
.LoadContentFrom("DisplayClientPayments", "Payments");
items.Add().Text("Plans").LoadContentFrom("DisplayClientPlans", "Payments");
}).SelectedIndex(0)
.Render();
%>
Here is a controller action:
public PartialViewResult DisplayClientPayments()
{
//.. code omitted getting list of type List<Payment>.
return PartialView("ClientPaymentsControl", list);
}
Here's a partial view:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<List<Payment>>" %>
<%
Html.Telerik().Grid(Model)
.Name("PaymentsGrid")
.Columns(columns =>
{
columns.Add(x => x.CreatedOn);
columns.Add(x => x.Type);
columns.Add(x => x.SubType);
})
.Sortable()
.Pageable()
.Render();
%>
Any ideas?
Cheers
Matt
6 Answers, 1 is accepted
0
Hello Matthew,
Can you please confirm that you have a ScriptRegistrar on the page, and that it includes the grid scripts? The behavior that you describe sounds like the scenario where the javascript isn't loaded.
<% Html.Telerik().ScriptRegistrar()
.Scripts(scripts => scripts
.Add("telerik.common.js")
.Add("telerik.grid.js"))
.Render(); %>
Regards,
Alex
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Can you please confirm that you have a ScriptRegistrar on the page, and that it includes the grid scripts? The behavior that you describe sounds like the scenario where the javascript isn't loaded.
<% Html.Telerik().ScriptRegistrar()
.Scripts(scripts => scripts
.Add("telerik.common.js")
.Add("telerik.grid.js"))
.Render(); %>
Regards,
Alex
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
M D
Top achievements
Rank 1
Rank 1
answered on 21 Dec 2009, 01:16 PM
Thanks you for the prompt response and suggestion.
I am now using the Registrar you supplied in my master page (I hadn't been explicitly stating the script names). My master page is below. The problem still persists.
I've noticed that when I click the sorting/paging link of a Grid within a TabStrip my URL changes from:
http://localhost:1936/Payments
to:
http://localhost:1936/Payments/DisplayClientPayments?PaymentsGrid-orderBy=SignedAmount-asc&PaymentsGrid-page=1
DisplayClientPayments is the name of the action that returns the partial view that contains the grid.
Surely this is the problem? The Grid sorting etc links are returning a path directly to the action that returns the partial view.
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="ClientPortalBase.master.cs" Inherits="Moneycorp.Web.UI.ClientPortal.Master_Pages.ClientPortalBase" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<style type="text/css">
</style>
<script type="text/javascript" src="../../Scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../../Scripts/MicrosoftAjax.js"></script>
<script type="text/javascript" src="../../Scripts/MicrosoftMvcAjax.js"></script>
<title><%= PageTitle %></title>
<link type="text/css" rel="stylesheet" href="~/Content/ClientPortalBase.css" />
<link href="../../Content/dataTables.css" rel="stylesheet" type="text/css" />
<link href="../../Content/dataTables_jui.css" rel="stylesheet" type="text/css" />
<asp:contentplaceholder id="headerContentHolder" runat="server" />
<%
Html.Telerik().StyleSheetRegistrar()
.DefaultGroup(group => group.Add("telerik.common.css")
.Add("telerik.Office2007.css")
)
.Render();
%>
</head>
<body>
<form id="form1" runat="server">
<div id="PageFrame">
<div id="Header" align="right">
</div>
<ul>
<li><a href="../Home/">Home</a></li>
<li><%= Html.ActionLink("Payments", "Index", "Payments")%></li>
</ul>
<div id="MenuStrip" align="center">
<table width="100%">
<tr>
<td align="left" valign="bottom">
<div id="title">
<span ><%= PageSubTitle %></span>
<asp:LoginStatus ID="userStatus"
runat="server"
CssClass="master"
OnLoggedOut="userStatus_LoggedOut"
LoginText="[Login]"
LogoutText="[Logout]"
LogoutAction="Redirect"
LogoutPageUrl="~/Login.aspx" />
</div>
</td>
<td align="right">
<img id="imglogo" src="../Content/Images/logo.png" />
</td>
</tr>
</table>
</div>
<div id="FormBody">
<div id="masterContent" class="master">
<asp:contentplaceholder id="mainContentHolder" runat="server" />
</div>
<div id="masterFooter" class="master">
</div>
</div>
</div>
</form>
<% Html.Telerik().ScriptRegistrar()
.Scripts(scripts => scripts
.Add("telerik.common.min.js")
.Add("telerik.grid.min.js")
.Add("telerik.grid.filtering.min.js")
.Add("telerik.tabstrip.min.js")
)
.Render(); %>
</body>
</html>
I am now using the Registrar you supplied in my master page (I hadn't been explicitly stating the script names). My master page is below. The problem still persists.
I've noticed that when I click the sorting/paging link of a Grid within a TabStrip my URL changes from:
http://localhost:1936/Payments
to:
http://localhost:1936/Payments/DisplayClientPayments?PaymentsGrid-orderBy=SignedAmount-asc&PaymentsGrid-page=1
DisplayClientPayments is the name of the action that returns the partial view that contains the grid.
Surely this is the problem? The Grid sorting etc links are returning a path directly to the action that returns the partial view.
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="ClientPortalBase.master.cs" Inherits="Moneycorp.Web.UI.ClientPortal.Master_Pages.ClientPortalBase" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<style type="text/css">
</style>
<script type="text/javascript" src="../../Scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../../Scripts/MicrosoftAjax.js"></script>
<script type="text/javascript" src="../../Scripts/MicrosoftMvcAjax.js"></script>
<title><%= PageTitle %></title>
<link type="text/css" rel="stylesheet" href="~/Content/ClientPortalBase.css" />
<link href="../../Content/dataTables.css" rel="stylesheet" type="text/css" />
<link href="../../Content/dataTables_jui.css" rel="stylesheet" type="text/css" />
<asp:contentplaceholder id="headerContentHolder" runat="server" />
<%
Html.Telerik().StyleSheetRegistrar()
.DefaultGroup(group => group.Add("telerik.common.css")
.Add("telerik.Office2007.css")
)
.Render();
%>
</head>
<body>
<form id="form1" runat="server">
<div id="PageFrame">
<div id="Header" align="right">
</div>
<ul>
<li><a href="../Home/">Home</a></li>
<li><%= Html.ActionLink("Payments", "Index", "Payments")%></li>
</ul>
<div id="MenuStrip" align="center">
<table width="100%">
<tr>
<td align="left" valign="bottom">
<div id="title">
<span ><%= PageSubTitle %></span>
<asp:LoginStatus ID="userStatus"
runat="server"
CssClass="master"
OnLoggedOut="userStatus_LoggedOut"
LoginText="[Login]"
LogoutText="[Logout]"
LogoutAction="Redirect"
LogoutPageUrl="~/Login.aspx" />
</div>
</td>
<td align="right">
<img id="imglogo" src="../Content/Images/logo.png" />
</td>
</tr>
</table>
</div>
<div id="FormBody">
<div id="masterContent" class="master">
<asp:contentplaceholder id="mainContentHolder" runat="server" />
</div>
<div id="masterFooter" class="master">
</div>
</div>
</div>
</form>
<% Html.Telerik().ScriptRegistrar()
.Scripts(scripts => scripts
.Add("telerik.common.min.js")
.Add("telerik.grid.min.js")
.Add("telerik.grid.filtering.min.js")
.Add("telerik.tabstrip.min.js")
)
.Render(); %>
</body>
</html>
0
M D
Top achievements
Rank 1
Rank 1
answered on 21 Dec 2009, 01:53 PM
I would add though...
When I sort and page on the "working" Grid i.e. the one returned by RenderPartial, outside the TabStrip, it is posting the entire page back to the server (then displaying the correct sort/page). I'm beginning to think that's not the correct behaviour... it should just be performing jQuery or postback on the specific Grid, not posting the entire page?
Therefore it is posting the entire page because I have wrongly configured the scripts?
So in my TabStrip/Grid I have encountered a problem that would only occur if a user had JavaScript disabled (or the site had configured scripts wrongly) AND there was a TabStrip/Grid combo?
You have my Master Page, and when I change the name of a script file to a non-existent one, Telerik throws a runtime error, so it can find the correct files.
Hey! And one other thing, according to Firefox Web Developer plugin, when the Grid is in the TabStrip the inline code is:
BUT when the Grid is outside the TabStrip, the inline code is
Is the problem that Grids in the TabStrip are somehow not geting jQuery registration?
Thanks for the help.
When I sort and page on the "working" Grid i.e. the one returned by RenderPartial, outside the TabStrip, it is posting the entire page back to the server (then displaying the correct sort/page). I'm beginning to think that's not the correct behaviour... it should just be performing jQuery or postback on the specific Grid, not posting the entire page?
Therefore it is posting the entire page because I have wrongly configured the scripts?
So in my TabStrip/Grid I have encountered a problem that would only occur if a user had JavaScript disabled (or the site had configured scripts wrongly) AND there was a TabStrip/Grid combo?
You have my Master Page, and when I change the name of a script file to a non-existent one, Telerik throws a runtime error, so it can find the correct files.
Hey! And one other thing, according to Firefox Web Developer plugin, when the Grid is in the TabStrip the inline code is:
//<![CDATA[
jQuery(document).ready(function(){
jQuery('#TabStrip').tTabStrip();});
jQuery(window).unload(function(){
});
//]]>
BUT when the Grid is outside the TabStrip, the inline code is
//<![CDATA[
jQuery(document).ready(function(){
jQuery('#PaymentsGrid').tGrid({columns:[{"name":null,"type":""},{"name":"Type","type":"String"},{"name":"SubType","type":"String"},{"name":"Channel","type":"String"},{"name":"SignedAmount","type":"Number"},{"name":"UnsignedAmount","type":"Number"},{"name":"ClientReference","type":"String"},{"name":null,"type":""}], total:122, sortMode:'single'});
jQuery('#TabStrip').tTabStrip();});
jQuery(window).unload(function(){
});
//]]>
Is the problem that Grids in the TabStrip are somehow not geting jQuery registration?
Thanks for the help.
0
Accepted
Hi,
Please examine the attached test project which implements the required functionality. Let me know if I am missing something.
All the best,
Georgi Krustev
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Please examine the attached test project which implements the required functionality. Let me know if I am missing something.
All the best,
Georgi Krustev
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
M D
Top achievements
Rank 1
Rank 1
answered on 21 Dec 2009, 04:02 PM
Hi,
Thank you very much for the time helping me resolve this. The error on my part was that I thought Ajax was supported out of the box, and missed the need for
"a new action method which is decorated with the GridActionAttribute and returns result of type IGridModel. "
and
Took me a while to spot it.
Great work by you guys.
Matt
Thank you very much for the time helping me resolve this. The error on my part was that I thought Ajax was supported out of the box, and missed the need for
"a new action method which is decorated with the GridActionAttribute and returns result of type IGridModel. "
and
.Ajax(ajax => ajax.Action("_AjaxBinding", "Home"))
Took me a while to spot it.
Great work by you guys.
Matt
0
M
Top achievements
Rank 1
Rank 1
answered on 08 Jan 2010, 12:59 PM
Hi,
I have a similar problem with ajaxifying the grid in combination with the usage of the new Area functionality in MVC2.
THe following code just doesn't seem to work:
I have a similar problem with ajaxifying the grid in combination with the usage of the new Area functionality in MVC2.
THe following code just doesn't seem to work:
.Ajax(settings => settings.Action(
"OverviewAjax", "Home", new { area = "MvcTestApp" }))
This is the resulting error message
\Areas\MvcTestApp\Views\Home\OverviewAjax.aspx(16): error CS1026: ) expectedand trace:
<span id="lblDebugInfo"><strong><b>Fout in: </b></strong> at System.Web.Compilation.BuildManager.CompileWebFile(VirtualPath virtualPath)at System.Web.Compilation.BuildManager.GetVPathBuildResultInternal(VirtualPath virtualPath, BooleannoBuild, Boolean allowCrossApp, Boolean allowBuildInPrecompile)at System.Web.Compilation.BuildManager.GetVPathBuildResultWithNoAssert(HttpContext context, VirtualPathvirtualPath, Boolean noBuild, Boolean allowCrossApp, Boolean allowBuildInPrecompile)at System.Web.Compilation.BuildManager.GetVirtualPathObjectFactory(VirtualPath virtualPath, HttpContextcontext, Boolean allowCrossApp, Boolean noAssert)at System.Web.Compilation.BuildManager.CreateInstanceFromVirtualPath(VirtualPath virtualPath, TyperequiredBaseType, HttpContext context, Boolean allowCrossApp, Boolean noAssert)at System.Web.Compilation.BuildManager.CreateInstanceFromVirtualPath(String virtualPath, Type requiredBaseType)at System.Web.Mvc.BuildManagerWrapper.System.Web.Mvc.IBuildManager.CreateInstanceFromVirtualPath(StringvirtualPath, Type requiredBaseType)at System.Web.Mvc.WebFormViewEngine.FileExists(ControllerContext controllerContext, String virtualPath)at System.Web.Mvc.VirtualPathProviderViewEngine.GetPathFromGeneralName(ControllerContext controllerContext, List`1 locations, String name, String controllerName, String areaName, String cacheKey, String[]& searchedLocations)at System.Web.Mvc.VirtualPathProviderViewEngine.GetPath(ControllerContext controllerContext, String[] locations, String[] areaLocations, String locationsPropertyName, String name, String controllerName, String cacheKeyPrefix, Boolean useCache, String[]& searchedLocations)at System.Web.Mvc.VirtualPathProviderViewEngine.FindView(ControllerContext controllerContext, StringviewName, String masterName, Boolean useCache)at System.Web.Mvc.ViewEngineCollection.<>c__DisplayClass6.<FindView>b__5(IViewEngine e)at System.Web.Mvc.ViewEngineCollection.Find(Func`2 cacheLocator, Func`2 locator)at System.Web.Mvc.ViewEngineCollection.FindView(ControllerContext controllerContext, String viewName, String masterName)at System.Web.Mvc.ViewResult.FindView(ControllerContext context)at System.Web.Mvc.ViewResultBase.ExecuteResult(ControllerContext context)at System.Web.Mvc.ControllerActionInvoker.InvokeActionResult(ControllerContext controllerContext,ActionResult actionResult)at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass14.<InvokeActionResultWithFilters>b__11()at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContextpreContext, Func`1 continuation)at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass14.<>c__DisplayClass16.<InvokeActionResultWithFilters>b__13()at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultWithFilters(ControllerContext controllerContext, IList`1 filters, ActionResult actionResult)at System.Web.Mvc.ControllerActionInvoker.InvokeAction(ControllerContext controllerContext, StringactionName)</span><br /><span id="lblController"><strong>Controller:</strong> home</span><br /><span id="lblAction">
Any ideas?
Marcel