In my project, I use the load helper in to layout file, like following
<head> <title>@ViewBag.Title</title> @ContentHelper.LinkCSS(Url.Content("~/Resources/Layout/css/Layout.css"))@* @ContentHelper.LinkCSS(Url.Content("~/Resources/Infragistics/css/structure/infragistics.css")) @ContentHelper.LinkCSS(Url.Content("~/Resources/Infragistics/css/themes/infragistics/infragistics.theme.css"))*@ @ContentHelper.Script(Url.Content("~/Resources/Common/JS/jquery-1.5.1.js")) @ContentHelper.Script(Url.Content("~/Resources/Common/JS/jquery-ui-1.8.11.js")) @ContentHelper.Script(Url.Content("~/Resources/Common/JS/modernizr-1.7.min.js")) @ContentHelper.Script(Url.Content("~/Resources/Infragistics/JS/infragistics.loader.js")) @*@ContentHelper.Script(Url.Content("~/Resources/Infragistics/JS/infragistics.js"))*@ @(Html.Infragistics() .Loader() .Resources("igGrid.*") .ScriptPath(Url.Content("~/Resources/Infragistics/JS/")) .CssPath(Url.Content("~/Resources/Infragistics/css/")) .Render())</head>
and put the grid helper into antoher cshtml file, like following.
@( Html.Infragistics().Grid<MockPosition>().ID("MockPositionGrid") .AvgRowHeight("25") .Columns(column => { column.For(x => x.MarketPrice).DataType("number").HeaderText("Price").Format("0.00").Width("80px"); column.For(x => x.Units).DataType("number").HeaderText("Units").Format("0.00").Width("160px"); column.For(x => x.MarketValue).DataType("number").HeaderText("Value").Format("0.00").Width("160px"); column.For(x => x.Cost).DataType("number").HeaderText("Cost").Format("0.00").Width("160px"); column.For(x => x.BookValue).DataType("number").HeaderText("Book Value").Format("0.00").Width("160px"); column.For(x => x.FxUnrealizedGainLoss).DataType("number").HeaderText("FX P/L").Format("0.00").Width("160px"); column.For(x => x.UnrealizedGainLoss).DataType("number").HeaderText("Mkt P/L").Format("0.00").Width("160px"); column.For(x => x.Duration).DataType("number").HeaderText("Duration").Format("0.00").Width("100px"); }) .Features(features => { features.Paging(); features.Sorting(); }) .DataSourceUrl(Url.Action("RequestMockPosition", "Home")) .Width("100%") .Height("100%") .DataBind() .Render()
It does not works.
But if I put the loader and grid into a same file, it works.
Is there any way to allow I put loader into layout file, and put grid into another file?
Hello spark_li,
It should work. Could you try to put the loader at the end of layout file? it should be after the grid initialization, because sometimes cause problems in head.
I noticed that you added script resource .Resources("igGrid.*") in loader. It is necessary, because MVC wrapper load it automatically.
Regards,
Stanimir
Stanimir,
I was having the same problem when I read about the Known Issues and Limitations 2012 vol1 in the online help, and found: "MVC Loader does not function properly in an MVC Razor layout view solution".
So, I'm guessing that I have to place the call to Html.Infragistics().Loader() into every view? Could you confirm this?
Thanks
Hi Charlie,Actually there's a slight "workaround" to this which we've used in our Samples Browser. For example, take a look at the All Features Enabled sample. If you look closely , you will notice that the igLoader is placed in the a "renderable" section called "Header", while the grid - in another section called "MainContent".So by using RenderSection we can trick the grid to be on the same page as the loader.Note that we can put the igLoader in the _Layout page without it being in a section.However, we need to enforce the grid (in this scenario - this applies for any control of ours) to be rendered in a section which will be rendered by the _Layout page.I know that this might seem comples, so here's how such a _Layout page would look like:
@using Infragistics.Web.Mvc <!DOCTYPE html> <html> <head> <title>Layout-defined title</title> <script type="text/javascript" src="code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="ajax.googleapis.com/.../jquery-ui.min.js"></script> <script type="text/javascript" src="localhost/.../infragistics.loader.js"></script> <style type="text/css"> body { font-size: 12px; } </style> @(Html.Infragistics().Loader() .ScriptPath(Url.Content("http://localhost/ig_ui12.1/js/")) .CssPath(Url.Content("localhost/.../")) .Render() ) @RenderSection("Header", true) </head> <body> @RenderBody() @RenderSection("Grid", true) </body> </html>
And here is my actual view:
@section Grid { <div> @( Html.Infragistics().Grid(Model) .ID("Grid1") .AutoGenerateColumns(false) .AutoGenerateLayouts(false) .LoadOnDemand(false) .DataSourceUrl(Url.Action("GetData")) .Caption("Projects") .Features(feature => { feature.GroupBy() .Type(OpType.Local); feature.Paging() .Type(OpType.Local); feature.Sorting() .Type(OpType.Local); }) .Columns(column => { column.For(project => project.ProjectId).HeaderText("Project ID").DataType("number").Width("150px"); column.For(project => project.Name).HeaderText("Name").DataType("string ").Width("200px"); column.For(project => project.StartDate).HeaderText("Start Date").DataType("date").Width("240px"); column.For(project => project.EndDate).HeaderText("End Date").DataType("date").Width("240px"); column.For(project => project.IsPostponed).HeaderText("Is Postponed?").DataType("bool").Width("80px"); } ) .PrimaryKey("ProjectId") .DataBind().Render() ) </div> }
What I'd recommend first though is to take a look at this tutorial: http://www.codeproject.com/Articles/383145/RenderBody-RenderPage-and-RenderSection-methods-in - as the author points out RenderSection is used to render pieces of the _Layout page and not parts of the current page.I think that there might be a better workaround using the RenderPage method, but I haven't investigated it myself.Hope this helps.PS: I'm attaching an MVC project which demonstrates the solution I gave in this post.
Borislav- Thanks for the help. If in the example above I remove "@RenderSection("Header", true) " from the _Layout page, and the <div></div> from the view, it works well.
I see - they must have been left over from my experiments on the sample (sorry about that).Still, glad you liked the solution :)