How to Create Nested Gridview with Expand Collapse in MVC4.

Description:-

            In this Example we Explain that How to Create Nested Grdview with expand and Collapse Facility in MVC.

What is Nested Gridview :-

            A Gridview Inside Another Gridview is Called a Nested Gridview.this is Generally used when we have to Define a long Information of the any object.

For Example:-

            If we want to Display all Data of the Student then one Gridview can not hold all the Information of the Student.so at that time we can create a part of the Information like Education Information,General Information,Other Information so we can Define all Information of the user by Category wise in Different Gridview like Nested Grid view.

Export Gridview Data to Excelsheet in MVC import/Export data in Excelsheet in mvc4

Display Footer and Grand total in webgrid in MVC MVC4 webgrid with Footer Template

Upload multiple Files with Progressbar upload multiple file at a time with progressbar


Bind country and state in DropdownList in MVC bind dropdownList in MVC4

To DownLoad the Complete Project Click the Below Download Image Link




Step 1:- Put this code in Index.cshtml in Home Folder that all ready provide by mvc.

step 2:-Now Run the Program.

Code For Nested Gridview:-

<script language="javascript">

    function detailSection(id, count) {

        for (i = 1; i <= count; i++) {

            if ($('#details1' + id + '_' + (2 * i - 1)).is(':visible')) {

                $('#details1' + id + '_' + (2 * i - 1)).css('display', 'none');

                $('#details2' + id + '_' + (2 * i)).css('display', 'none');

             

            } else {

                $('#details1' + id + '_' + (2 * i - 1)).css('display', 'block');

                $('#details2' + id + '_' + (2 * i)).css('display', 'block');

              

            }

        }

    }

    function detailSection1(id, count) {

        for (i = 1; i <= count; i++) {

            if ($('#details3' + id + '_' + (i)).is(':visible')) {

                $('#details3' + id + '_' + (i)).css('display', 'none');

                $('#details4' + id + '_' + (i + 1)).css('display', 'none');

                $('#details5' + id + '_' + (i + 2)).css('display', 'none');

              

            } else {

                $('#details3' + id + '_' + (i)).css('display', 'block');

                $('#details4' + id + '_' + (i + 1)).css('display', 'block');

                $('#details5' + id + '_' + (i + 2)).css('display', 'block');

              

            }

        }

    }

</script>

@model IEnumerable<popup.Models.Order>

@{

    ViewBag.Title = "NestedGrid";

}

@{

    var Orders = new List<popup.Models.Order>();

    var products1 = new List<popup.Models.Product>();

    var productsDetails1 = new List<popup.Models.ProductDetails>();

    productsDetails1.Add(new popup.Models.ProductDetails { ProductDetailsId = 1, Cost = "$ 345", Color="Black" });

    products1.Add(new popup.Models.Product { ProductId = 1,  ProductDetailsList=productsDetails1,Name = "laptop" });

    products1.Add(new popup.Models.Product { ProductId = 5, ProductDetailsList = productsDetails1, Name = "pen drive" });

    products1.Add(new popup.Models.Product { ProductId = 7, ProductDetailsList = productsDetails1, Name = "Mobile" });

    Orders.Add(new popup.Models.Order { OrderId = 1, ProductList = products1, OrderDate = DateTime.Now });

    var products2 = new List<popup.Models.Product>();

    products2.Add(new popup.Models.Product { ProductId = 3, ProductDetailsList = productsDetails1, Name = "Hard disk" });

    products2.Add(new popup.Models.Product { ProductId = 4, ProductDetailsList = productsDetails1, Name = "Mouse" });

    Orders.Add(new popup.Models.Order { OrderId = 2, ProductList = products2, OrderDate = DateTime.Now });

    var products3 = new List<popup.Models.Product>();

    products3.Add(new popup.Models.Product { ProductId = 2, ProductDetailsList = productsDetails1, Name = "CD" });

    products3.Add(new popup.Models.Product { ProductId = 6, ProductDetailsList = productsDetails1, Name = "Speaker" });

    Orders.Add(new popup.Models.Order { OrderId = 3, ProductList = products3, OrderDate = DateTime.Now });

   

   

        WebGrid topGrid = new WebGrid(Orders);

       

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title></title>

</head>

<body>

  

                                                                                                                                      

     <div id="grid">

@topGrid.GetHtml(columns:

    topGrid.Columns(

                                topGrid.Column("OrderId", "Order", format: (item) => { return new HtmlString("<a href='#' onclick='detailSection("+ item.WebGrid.Rows.IndexOf(item)+","+item.WebGrid.Rows.Count+")' style='width: 10em'>" + item.OrderId + "</a>"); }),

            topGrid.Column("ProductList", format: (item1) =>

        {

          

            WebGrid subGrid = new WebGrid(item1.ProductList);

            var pIndex = item1.WebGrid.Rows.IndexOf(item1);

            var counter = 0;

            return subGrid.GetHtml(

         columns: subGrid.Columns(

             subGrid.Column("ProductId", "ProductId", format: (subitem) => { return new HtmlString("<a href='#' id='details1" + pIndex + "_" + ++counter + "' onclick='detailSection1(" + subitem.WebGrid.Rows.IndexOf(subitem) + "," + subitem.WebGrid.Rows.Count + ")'style='text-align: left;color: red;height:120px; width: 175px; padding-right: 1em; display:none;'>" + subitem.ProductId + "</a>"); }),

             subGrid.Column("Name", "Name", format: (subitem) => { return new HtmlString("<div id='details2"+pIndex+ "_"+ ++counter+"' style='text-align: left;color: red;height:120px; width: 175px; padding-right: 1em; display:none;'>" + subitem.Name + "</div>"); }),

              topGrid.Column("ProductDetailsList", format: (item2) =>

        {

            WebGrid subGrid1 = new WebGrid(item2.ProductDetailsList);

            var pIndex1 = item2.WebGrid.Rows.IndexOf(item2);

            var counter1 = 0;

            return subGrid1.GetHtml(

         columns: subGrid1.Columns(

             subGrid1.Column("ProductDetailsId", "ProductDetailsId", format: (subitem1) => { return new HtmlString("<div id='details3" + pIndex1 + "_" + ++counter1 + "' style='text-align: left;color: red;height:120px; width: 175px; padding-right: 1em; display:none;'>" + subitem1.ProductDetailsId + "</div>"); }),

             subGrid1.Column("Cost", "Cost", format: (subitem1) => { return new HtmlString("<div id='details4" + pIndex1 + "_" + ++counter1 + "' style='text-align: left;color: red;height:120px; width: 175px; padding-right: 1em; display:none;'>" + subitem1.Cost + "</div>"); }),

             subGrid1.Column("Color", "Color", format: (subitem1) => { return new HtmlString("<div id='details5" + pIndex1 + "_" + ++counter1 + "' style='text-align: left;color: red;height:120px; width: 175px; padding-right: 1em; display:none;'>" + subitem1.Color + "</div>"); })

        ));

        }

            )));

        })

       

       

         ,topGrid.Column("OrderDate")

   

))

</div>

</body>

</html>