locked
Nesting a sub grid with Html.Grid()? RRS feed

  • Question

  • User1256846193 posted

    Is it possible to do nested grids with Html.Grid()? like so: nested grid example

    I've found a lot of tutorials that use Grid.GetHtml(), however, my boss is insisting I use Html.Grid() for consistency in the project.

    If not, does anybody know where the official Microsoft documentation for Html.Grid() can be found.  All I can seem to find is the documentation for System.Windows.Controls Grid Class and GridView, not Html.Grid().

    Thanks all.

    Wednesday, October 3, 2018 9:18 PM

Answers

  • User1724605321 posted

    Hi tixekni ,

    You can refer to the document of the GridMVC . I search the internet and also not find nested grid code sample using GridMVC . But in discussion in that document :

    https://archive.codeplex.com/?p=gridmvc#

    Someone has wrote a code sample to implement nested grid (you can search keywords"nested"):

    I looked for an example of nested grid, but couldn't find one. I experimented with it and got it working. I thought I share the code in case some body wants to do the same thing:

        <div >
        @helper RenderPartColumn(Request r, Log l)
        {
            <form method="POST" action="@Url.RouteUrl(new { controller = "Report", action = "Index" })" >
                <div  style="overflow-y: scroll; height:300px;">@*scrollable div*@
               @Html.Grid(Model.GetPartsByModelName(r.OrderNumber)).Columns(columns =>
               {
                   columns.Add(c => c.Name).Titled("Part Name").Sortable(true).SetWidth(30).Filterable(true);
                   columns.Add(c => c.PartType).Titled("Type").Sortable(true).SetWidth(30).Filterable(true);
    
               })
               </div>
            </form>
        }
       @Html.Grid(Model.LogByOrderNumber()).Columns(columns =>
        {
            columns.Add(c => c.Request.ModelName).Encoded(false).Titled("Model Name").Sortable(true).SetWidth(60);
            columns.Add(c => c.Request.ProjectName).Encoded(false).Titled("Project Name").Sortable(true).SetWidth(60);
            columns.Add(c => c.Request.OrderNumber).Encoded(false).Sanitized(false).Titled("Part Information").RenderValueAs(a => RenderPartColumn(a.Request, a.Log).ToHtmlString());
    
        }).WithPaging(20)
        </div>

    LogByOrderNumber() gives me data for the 1st level grid and GetPartsByModelName() gives me data for 2nd level grid. I use RenderValueAs() to render the second grid. You have to put the inner grid in some kind of html tag like div to make it work. 

    Hope that helps.

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 4, 2018 5:57 AM

All replies

  • User1724605321 posted

    Hi tixekni ,

    You can refer to the document of the GridMVC . I search the internet and also not find nested grid code sample using GridMVC . But in discussion in that document :

    https://archive.codeplex.com/?p=gridmvc#

    Someone has wrote a code sample to implement nested grid (you can search keywords"nested"):

    I looked for an example of nested grid, but couldn't find one. I experimented with it and got it working. I thought I share the code in case some body wants to do the same thing:

        <div >
        @helper RenderPartColumn(Request r, Log l)
        {
            <form method="POST" action="@Url.RouteUrl(new { controller = "Report", action = "Index" })" >
                <div  style="overflow-y: scroll; height:300px;">@*scrollable div*@
               @Html.Grid(Model.GetPartsByModelName(r.OrderNumber)).Columns(columns =>
               {
                   columns.Add(c => c.Name).Titled("Part Name").Sortable(true).SetWidth(30).Filterable(true);
                   columns.Add(c => c.PartType).Titled("Type").Sortable(true).SetWidth(30).Filterable(true);
    
               })
               </div>
            </form>
        }
       @Html.Grid(Model.LogByOrderNumber()).Columns(columns =>
        {
            columns.Add(c => c.Request.ModelName).Encoded(false).Titled("Model Name").Sortable(true).SetWidth(60);
            columns.Add(c => c.Request.ProjectName).Encoded(false).Titled("Project Name").Sortable(true).SetWidth(60);
            columns.Add(c => c.Request.OrderNumber).Encoded(false).Sanitized(false).Titled("Part Information").RenderValueAs(a => RenderPartColumn(a.Request, a.Log).ToHtmlString());
    
        }).WithPaging(20)
        </div>

    LogByOrderNumber() gives me data for the 1st level grid and GetPartsByModelName() gives me data for 2nd level grid. I use RenderValueAs() to render the second grid. You have to put the inner grid in some kind of html tag like div to make it work. 

    Hope that helps.

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 4, 2018 5:57 AM
  • User1256846193 posted

    Thank you so much Nan.

    If I may ask, what is this line doing? What is r and l?

    @helper RenderPartColumn(Request r, Log l)
    Thursday, October 4, 2018 7:00 PM
  • User1724605321 posted

    Hi tixekni ,

    That are just objects , you can modify the code to get properties/values based on your requirement .

    Best Regards,

    Nan Yu

    Friday, October 5, 2018 8:30 AM