Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Spark
510
If I use Html.Infragistics().Loader() to load resource, can I put the load helper into layout file?
posted

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 Reply
  • 6279
    Suggested Answer
    posted 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
Children