MvcContrib网格中的分层数据

Question

Is it possible to show a class with a nested IEnumerable property within MvContribGrid such as...

public class ParentViewModel
{
    IEnumerable<Parent> Parents {get;set;}
}

public Class Parent
{
     public string Name{get;set;}
     public IEnumerable<Children> Children {get;set}
}

Answer 1

I had similar requirement, but i used ajax for Hierarchical information showing. It help me two ways. One the child information is loaded when requested. so i dont have to load all information on one go and also helped in multiple level Hierarchy.

I used Jquery Datatable along with mvccontrib grid for pagination search and for Hierarchical data expand collapse link were introduced

Updated: In my exmple i have created first column with some concat information on first column which is required me to identify the row i have clicked. class .expand is to tell on click it should be expanded.a $.ajax call be made and information retrieved will be appended to the clicked row. expand/collapse are js method. you will see below this code.

<%Html.Grid(Model)
    .Columns(column =>
            {%>
            <% <td><a id="<%= c.Desc %>_<%= c.No %>" href="#" class="expand"></a></td>                
            <% }).Attributes(c => new Dictionary<string, object> { { "padding-left", " 5px" } });                
                column.For(c => c.Date).Format("{0:dd/MM/yyyy}").Named("Date");
                column.For(c => c.Desc).Named("Description");                   
               }).Attributes(id => "example")
            .Empty("----------- No Ledger Details for current month/Search -----------    ").Render();%>

I used jquery datatable for pagination and search in populated rows.and also used tabletool plugin for jquery datatable which help in exporting result to csv/xls/pdf. and copy pasting my content.

 <script language="javascript" type="text/javascript">
  $(document).ready(function () {
    $('#example').dataTable({
        "sDom": 'T<"clear">lfrtip',
        "bProcessing": true,
        "bPaginate": true,
        "sPaginationType": "full_numbers",
        "bFilter": true,
        "iDisplayLength": 10,
        "bSort": false,
        "oTableTools": {
            "sRowSelect": "multi",
            "sSwfPath": "../../../../Content/media/swf/copy_cvs_xls_pdf.swf",
            "aButtons": ["select_all", "select_none", "copy", "print", {
                "sExtends": "collection",
                "sButtonText": "Save",
                "aButtons": ["csv", "xls", "pdf"]
            }]
        }
    });

});
</script>

For collapse/Expand

$("#example a.collapse").live('click', function (event) {
            event.preventDefault();
            $(this).closest('tr').next().slideUp().remove();
            $(this).removeClass("expand");
            $(this).addClass("collapse");
        });
        $("#example a.expand").live('click', function (event) {
            event.preventDefault();
            var parent = $(this).closest('tr');
            var linkid = $(this).attr('id');
            var parts = linkid.split("_");
            var billNo = parts[1];                
            loadBillDetails(parent, billNo);                
            $(this).removeClass("collapse");
            $(this).addClass("expand");
        });

        function loadBillDetails(parent, billNo) {
            var defaultParameters = "{BillNo:" + billNo + "}";
            $.ajax({
                type: "POST",
                url: '<%=Url.Action("GetBillDetails", "Order") %>',
                data: defaultParameters,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: (function (data) {
                    var str = "<tr style='padding:5px;'><td colspan=7><div style='width: 850px; max-height: 300px; overflow: auto; background-color: #F4F4F4;'>";
                    str += "<table width='100%' id='billDetails'><tr align='left'><th>BillNo</th><th>ProductName</th><th>OrderNo</th><th>RollNo</th><th>Qty</th><th>Rate</th><th></th><th></th><th></th><th></th></tr>";
                    if (data.BillDetails.length > 0) {
                        for (var y = 0; y < data.BillDetails.length; y++) {
                            str += "<tr><td>" + data.BillDetails[y].FinalBillNo + "</td><td>" + data.BillDetails[y].ProductName + "</td><td>" + data.BillDetails[y].OrderNo + "</td><td>" + data.BillDetails[y].RollsNo + "</td><td>" + data.BillDetails[y].Qty + "</td><td>" + data.BillDetails[y].Rate + "</td><td></td><td></td><td></td></tr>";
                        }
                        str += "</table></div></td></tr>";
                    }
                    else {
                        str = "<tr style='padding:7px;'><td colspan=6>No order found.</td></tr>";
                    }
                    var newRow = $(str);
                    parent.after(newRow).slideDown();
                }),
                error: (function () {
                    parent.after("<tr style='padding:5px;'><td colspan=5>An Error has occurred.</td></tr>");
                })
            });
        }

    });