If I use Html.Infragistics().Loader() to load resource, can I put the load helper into layout file?

510

Spark posted over 12 years ago

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?

Parents

2735

Suggested Answer
Stanimir Todorov posted over 12 years ago

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
Cancel
Reply

Reject Answer

Cancel
385

Charlie posted over 12 years ago in reply to Stanimir Todorov

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
Cancel
Reply

Cancel

6279

Suggested Answer

[Infragistics] Borislav Traykov posted over 12 years ago in reply to Charlie

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.

t71858.zip

Reply

30

Kevin Wood posted over 11 years ago in reply to [Infragistics] Borislav Traykov

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
Cancel
Reply

Cancel

Children

25

Clovis Rodrigues posted over 9 years ago in reply to [Infragistics] Borislav Traykov

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 ?

Thanks

@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()
)
Cancel
Reply

Cancel
6279

[Infragistics] Borislav Traykov posted over 11 years ago in reply to Kevin Wood

Glad you like it, Kev :)

Such situations can be tricky to figure out!

Cheers!
Cancel
Reply

Cancel