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.
Thank you SO much for this post! I have been struggling with this all morning, came across this, tried it, and it is finally working.
I greatly appreciate you putting this out there.
Kevin
Glad you like it, Kev :)
Such situations can be tricky to figure out!Cheers!
Hi I have the same situation and I'm trying to use Loader to change localization to Spanish ... No way, the grid is allways in English ... Any idea about what is happening ?
@section Grid {
@(Html.Infragistics() .Loader() .ScriptPath(Url.Content("~/Scripts/Infragistics/")) .CssPath(Url.Content("~/Content/Infragistics/")) .Locale("es") .Resources("igGrid.*") .Render() )
@(Html.Infragistics() .Grid(Model) .ID("gridPrincipal") .Width("100%") .Height("100%") .PrimaryKey("IDProjeto") .AutoGenerateColumns(false) .AutoGenerateLayouts(false) .Columns(column => { column.Unbound("Editar").HeaderText("Editar").Width("8%").Template("<center><a href='/Ease_Manager/GP/Projetos?idProjeto=${IDProjeto}' alt='Editar' title='Editar esse projeto.'><i class='glyphicon glyphicon-edit'></i></a></center>"); column.Unbound("Excluir").HeaderText("Excluir").Width("8%").Template("<center><a href='#' onclick='submitExcluir(${IDProjeto})' alt='Excluir' title='Excluir esse projeto.'><i class='glyphicon glyphicon-trash'></i></a></center>"); column.For(x => x.NomeProjeto).HeaderText("Nome").Width("44%"); column.For(x => x.DescricaoProjeto).HeaderText("Descrição").Width("40%"); }) .Features(features => { features.Sorting().Type(OpType.Local).ColumnSettings(setting => { setting.ColumnSetting().ColumnKey("Editar").AllowSorting(false); setting.ColumnSetting().ColumnKey("Excluir").AllowSorting(false);}); features.Paging().Type(OpType.Local); features.Filtering().Type(OpType.Local).ColumnSettings(setting => { setting.ColumnSetting().ColumnKey("Editar").AllowFiltering(false); setting.ColumnSetting().ColumnKey("Excluir").AllowFiltering(false);}); features.ColumnMoving().Mode(MovingMode.Immediate).MoveType(MovingType.Dom).ColumnSettings(setting => { setting.ColumnSetting().ColumnKey("Editar").AllowMoving(false); setting.ColumnSetting().ColumnKey("Excluir").AllowMoving(false);}); ; features.Resizing().ColumnSettings(setting => { setting.ColumnSetting().ColumnKey("Editar").AllowResizing(false); setting.ColumnSetting().ColumnKey("Excluir").AllowResizing(false);}); features.Hiding().ColumnSettings(setting => { setting.ColumnSetting().ColumnKey("Editar").AllowHiding(false); setting.ColumnSetting().ColumnKey("Excluir").AllowHiding(false);}); ; }) .DataSource(ViewBag.ListaProjetos) .DataBind() .Render() )