Views->Shared->_Layout.cshtml:
<!DOCTYPE
html>
<html>
<head>
<meta
charset="utf-8"
/>
<title>@ViewBag.Title</title>
<link
href="@Url.Content("~/Content/Site.css")"
rel="stylesheet"
type="text/css"
/>
<script
src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"
type="text/javascript"></script>
<script
src="@Url.Content("~/Scripts/modernizr-1.7.min.js")"
type="text/javascript"></script>
</head>
<body>
<div
class="page">
<header>
<div
id="title">
<h1>Mvc
Collapsible Webgrid</h1>
</div>
<div
id="logindisplay">
@Html.Partial("_LogOnPartial")
</div>
<nav>
<ul
id="menu">
<li>@Html.ActionLink("Home",
"Index",
"Home")</li>
<li>@Html.ActionLink("About",
"About",
"Home")</li>
</ul>
</nav>
</header>
<section
id="main">
@RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
Controllers->HomeController.cs:
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.Mvc;
using
MvcCollapsibleWebgrid.Models;
namespace
MvcCollapsibleWebgrid.Controllers
{
public
class
HomeController
: Controller
{
public
ActionResult
Index()
{
List<Hotels>
allOrder = new
List<Hotels>();
var
Restorent = new
List<Hotels.Restaurants>();
var
menus = new
List<Hotels.RestaurantsMenu>();
//First
Hotel and Menus
menus.Add(new
Hotels.RestaurantsMenu
{ MenuId = 1, ItemName = "Menu1",
Price = "10"});
menus.Add(new
Hotels.RestaurantsMenu
{ MenuId = 2, ItemName = "Menu2",
Price = "11"});
menus.Add(new
Hotels.RestaurantsMenu
{ MenuId = 3, ItemName = "Menu3",
Price = "12"});
menus.Add(new
Hotels.RestaurantsMenu
{ MenuId = 4, ItemName = "Menu4",
Price = "13"});
Restorent.Add(new
Hotels.Restaurants
{ Rid = 1, _restaurantsmenu = menus, Location = "Mumbai",
RestaurantsName = "Hotel
1",
Rating = "7
Star"
});
//Second
Hotel and menus
var
menus1 = new
List<Hotels.RestaurantsMenu>();
menus1.Add(new
Hotels.RestaurantsMenu
{ MenuId = 1, ItemName = "Menu5",
Price = "14",
Rid = "01"
});
menus1.Add(new
Hotels.RestaurantsMenu
{ MenuId = 2, ItemName = "Menu6",
Price = "15",
Rid = "02"
});
menus1.Add(new
Hotels.RestaurantsMenu
{ MenuId = 3, ItemName = "Menu7",
Price = "16",
Rid = "03"
});
menus1.Add(new
Hotels.RestaurantsMenu
{ MenuId = 4, ItemName = "Menu8",
Price = "17",
Rid = "04"
});
Restorent.Add(new
Hotels.Restaurants
{ Rid = 2, _restaurantsmenu = menus1, Location = "Pune",
RestaurantsName = "Hotel
2",
Rating = "5
Star"
});
//Third
Hotel and menus
var
menus2 = new
List<Hotels.RestaurantsMenu>();
menus2.Add(new
Hotels.RestaurantsMenu
{ MenuId = 1, ItemName = "Menu9",
Price = "18"});
menus2.Add(new
Hotels.RestaurantsMenu
{ MenuId = 2, ItemName = "Menu10",
Price = "19"
});
menus2.Add(new
Hotels.RestaurantsMenu
{ MenuId = 3, ItemName = "Menu11",
Price = "20"
});
menus2.Add(new
Hotels.RestaurantsMenu
{ MenuId = 4, ItemName = "Menu12",
Price = "21"});
Restorent.Add(new
Hotels.Restaurants
{ Rid = 3, _restaurantsmenu = menus2, Location = "Mumbai",
RestaurantsName = "Hotel
3",
Rating = "7
Star"
});
return
View(Restorent);
}
public
ActionResult
About()
{
return
View();
}
}
}
In Models:
Models->Hotels.cs
Models->Hotels.cs
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
namespace
MvcCollapsibleWebgrid.Models
{
public
class
Hotels
{
public
IEnumerable<Restaurants>
_restaurants { get;
set;
}
public
List<RestaurantsMenu>
_restaurantsmenu { get;
set;
}
public
class
Restaurants
{
public
int
Rid { get;
set;
}
public
string
RestaurantsName { get;
set;
}
public
string
Location { get;
set;
}
public
string
Rating { get;
set;
}
public
List<RestaurantsMenu>
_restaurantsmenu { get;
set;
}
}
public
class
RestaurantsMenu
{
public
int
MenuId { get;
set;
}
public
string
ItemName { get;
set;
}
public
string
Price { get;
set;
}
public
string
Rid { get;
set;
}
}
}
}
Views->Home->Index.cshtml
@model
IEnumerable<MvcCollapsibleWebgrid.Models.Hotels.Restaurants>
@{
ViewBag.Title
= "Hotel
Details";
WebGrid
grid = new
WebGrid(source:
Model, canSort: false,
canPage: true);
}
<style
type="text/css">
th,
td
{
padding:
5px;
}
th
{
background-color:
rgb(248,
248, 248);
}
#gridT,
#gridT
tr
{
border:
1px
solid
#0D857B;
}
#subT,
#subT
tr
{
border:
1px
solid
#f3f3f3;
}
#subT
{
margin:
0px
0px
0px
10px;
padding:
5px;
width:
95%;
}
#subT
th
{
font-size:
12px;
}
.hoverEff
{
cursor:
pointer;
}
.hoverEff:hover
{
background-color:
rgb(248,
242, 242);
}
.expand
{
background-image:
url(/Content/themes/base/images/pm.png);
background-position:
-22px;
background-repeat:
no-repeat;
}
.collapse
{
background-image:
url(/Content/themes/base/images/pm.png);
background-position:
-2px;
background-repeat:
no-repeat;
}
</style>
<div
id="main"
style="padding:
25px; background-color:
white;">
@grid.GetHtml(
htmlAttributes:
new
{ id = "gridT",
width = "700px"
},
columns:
grid.Columns(
grid.Column("Rid",
"Rid"),
grid.Column("RestaurantsName",
"RestaurantsName"),
grid.Column("Location",
"Location"),
grid.Column("Rating",
"Rating"),
grid.Column("_restaurantsmenu",
format: (item) =>
{
;
WebGrid
subGrid = new
WebGrid(source:
item._restaurantsmenu);
return
subGrid.GetHtml(
htmlAttributes:
new
{ id = "subT"
},
columns:
subGrid.Columns(
subGrid.Column("MenuId",
"MenuId"),
subGrid.Column("ItemName",
"ItemName"),
subGrid.Column("Price",
"Price"),
subGrid.Column("Rid",
"Rid"))
);
})))
</div>
<script
language="javascript"
type="text/javascript">
$(document).ready(function
() {
var
size = $("#main
#gridT > thead > tr >th").size();
$("#main
#gridT > thead > tr >th").last().remove();
$("#main
#gridT > thead > tr").prepend("<th></th>");
$("#main
#gridT > tbody > tr").each(function
(i, el) {
$(this).prepend(
$("<td></td>")
.addClass("expand")
.addClass("hoverEff")
.attr('title',
"click
for show/hide")
);
var
table = $("table",
this).parent().html();
$(this).after("<tr><td></td><td
style='padding:5px; margin:0px;' colspan='"
+ (size - 1) + "'>"
+ table + "</td></tr>");
$("table",
this).parent().remove();
$(".hoverEff",
this).live("click",
function
() {
$(this).parent().closest("tr").next().slideToggle(100);
$(this).toggleClass("expand
collapse");
});
});
$("#main
#gridT > tbody > tr td.expand").each(function
(i, el) {
$(this).toggleClass("expand
collapse");
$(this).parent().closest("tr").next().slideToggle(100);
});
});
</script>
download pm.png image and add into image folder:
Content->themes->base->images
Content->themes->base->images
========================================================================