http://mattberseth2.com/demo/Default.aspx?Name=4+New+Grouping+Grid+Skins%3a+Vista%2c+Bold%2c+Win2k3+and+Soft&Filter=All
Code<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<link rel="stylesheet" type="text/css" href="_assets/css/core.css" />
<link rel="stylesheet" type="text/css" href="_assets/skins/soft/core.css" />
<link rel="stylesheet" type="text/css" href="_assets/skins/win2k3/core.css" />
<link rel="stylesheet" type="text/css" href="_assets/skins/vista/core.css" />
<link rel="stylesheet" type="text/css" href="_assets/skins/bold/core.css" />
<script runat="server" type="text/C#">
/// <summary>
///
/// </summary>
/// <param name="sender"></param>
/// <param name="args"></param>
protected void PagerCommand(object sender, DataPagerCommandEventArgs e)
{
switch (e.CommandName)
{
case "Next":
// guard against going off the end of the list
e.NewStartRowIndex = Math.Min(e.Item.Pager.StartRowIndex + e.Item.Pager.MaximumRows, e.Item.Pager.TotalRowCount - e.Item.Pager.MaximumRows);
e.NewMaximumRows = e.Item.Pager.MaximumRows;
break;
case "Previous":
// guard against going off the begining of the list
e.NewStartRowIndex = Math.Max(0, e.Item.Pager.StartRowIndex - e.Item.Pager.MaximumRows);
e.NewMaximumRows = e.Item.Pager.MaximumRows;
break;
case "Last":
// the
e.NewStartRowIndex = e.Item.Pager.TotalRowCount - e.Item.Pager.MaximumRows;
e.NewMaximumRows = e.Item.Pager.MaximumRows;
break;
case "First":
default:
e.NewStartRowIndex = 0;
e.NewMaximumRows = e.Item.Pager.MaximumRows;
break;
}
}
/// <summary>
///
/// </summary>
/// <param name="sender"></param>
/// <param name="args"></param>
protected void LvSorting(object sender, ListViewSortEventArgs args)
{
this.lds.OrderGroupsBy = string.Format("Key {0}", args.SortDirection);
}
/// <summary>
///
/// </summary>
/// <param name="sender"></param>
/// <param name="args"></param>
protected void LvSorted(object sender, EventArgs args)
{
LinkButton btn = this.lv.FindControl("btnSort") as LinkButton;
// replace the asc class with desc or vice versa
if (btn.CssClass.Contains("asc"))
{
btn.CssClass = btn.CssClass.Replace("asc", "desc");
}
else
{
btn.CssClass = btn.CssClass.Replace("desc", "asc");
}
}
</script>
<script type="text/javascript">
function toggleGroup(e, numberOfRows){
// get a reference to the row and table
var tr = e.parentNode.parentNode;
var table = tr.parentNode.parentNode;
// do some simple math to determine how many
// rows we need to hide/show
var startIndex = tr.rowIndex + 1;
var stopIndex = startIndex + parseInt(numberOfRows);
// if the img src ends with plus, then we are expanding the
// rows. go ahead and remove the hidden class from the rows
// and update the image src
if(Sys.UI.DomElement.containsCssClass(e, 'expand')){
for(var i = startIndex; i < stopIndex; i++){
Sys.UI.DomElement.removeCssClass(table.rows[i], 'hidden');
}
// remove expand class and add collapse
Sys.UI.DomElement.removeCssClass(e, 'expand');
Sys.UI.DomElement.addCssClass(e, 'collapse');
}
else{
for(var i = startIndex; i < stopIndex; i++){
Sys.UI.DomElement.addCssClass(table.rows[i], 'hidden');
}
// remove collapse class and add expand
Sys.UI.DomElement.removeCssClass(e, 'collapse');
Sys.UI.DomElement.addCssClass(e, 'expand');
}
}
</script>
</head>
<body>
<form id="frm" runat="server">
<div>
<asp:ScriptManager ID="scriptManager" runat="server" />
<asp:LinqDataSource
ID="lds" runat="server"
ContextTypeName="NorthwindDataContext"
TableName="Orders"
Select="new(Key, Count() as Count, It as Items)" GroupBy="customerid" OrderGroupsBy="Key"
AutoPage="true" AutoSort="true"
/>
<div>
<script type="text/javascript">
function pageLoad(){
var _radioButtons = [$get('vista'), $get('bold'), $get('win2k3'), $get('soft')];
var e = $get('demo-grid');
// remove all classes
e.className = '';
for(var i = 0; i < _radioButtons.length; i++) {
if(_radioButtons[i].checked) {
Sys.UI.DomElement.addCssClass(e, _radioButtons[i].value);
}
}
}
function onSkinRadioClick(sender){
var e = $get('demo-grid');
// remove all classes
e.className = '';
alert(sender.value);
// apply the class from the radio button
Sys.UI.DomElement.addCssClass(e, sender.value);
}
</script>
<h3>Grouping Grid Themes</h3>
<p>A while back I a wrote a post showing how you can use ASP.NET 3.5's new ListView and LinqDataSource controls to create a pretty sweet looking grouping grid. Well I recently created a few additional skins for my original grid that I thought I would share.</p>
<br />
<input id="vista" type="radio" name="skin" onclick="onSkinRadioClick(this);" value="vista-grid" checked="checked" />Vista
<input id="bold" type="radio" name="skin" onclick="onSkinRadioClick(this);" value="bold-grid" />Bold
<input id="win2k3" type="radio" name="skin" onclick="onSkinRadioClick(this);" value="win2k3-grid" />Windows 2003
<input id="soft" type="radio" name="skin" onclick="onSkinRadioClick(this);" value="soft-grid" />Soft
<br />
<br />
<asp:UpdatePanel ID="upd" runat="server">
<ContentTemplate>
<asp:ListView ID="lv" runat="server" DataSourceID="lds" OnSorting="LvSorting" OnSorted="LvSorted">
<LayoutTemplate>
<div id="demo-grid" class="vista-grid">
<div class="titlebar">My Customers<asp:LinkButton ID="btnSort" runat="server" CssClass="sort asc" CommandName="Sort"/></div>
<table class="datatable" cellpadding="0" cellspacing="0">
<tr class="header">
<th class="first"> </th>
<th>ID</th>
<th>Date Ordered</th>
<th>Date Required</th>
<th>Freight</th>
<th>Date Shipped</th>
</tr>
<tr id="itemPlaceholder" runat="server" />
</table>
<table class="datapager" cellpadding="0" cellspacing="0">
<tr>
<asp:DataPager ID="pager" runat="server" PageSize="6">
<Fields>
<asp:TemplatePagerField OnPagerCommand="PagerCommand">
<PagerTemplate>
<td class="commands">
<asp:LinkButton ID="btnFirst" runat="server" CommandName="First" CssClass="first-page page-command" AlternateText="First Page" ToolTip="First Page" />
<asp:LinkButton ID="btnPrevious" runat="server" CommandName="Previous" CssClass="prev-page page-command" AlternateText="Previous Page" ToolTip="Previous Page" />
<asp:LinkButton ID="btnNext" runat="server" CommandName="Next" CssClass="next-page page-command" AlternateText="Next Page" ToolTip="Next Page" />
<asp:LinkButton ID="btnLast" runat="server" CommandName="Last" CssClass="last-page page-command" AlternateText="Last Page" ToolTip="Last Page" />
</td>
<td class="info">
Page
<b>
<%# Container.TotalRowCount > 0 ? Math.Ceiling(((double)(Container.StartRowIndex + Container.MaximumRows) / Container.MaximumRows)) : 0 %>
</b>
of
<b>
<%# Math.Ceiling((double)Container.TotalRowCount / Container.MaximumRows)%>
</b>
(<%# Container.TotalRowCount %> items)
</td>
</PagerTemplate>
</asp:TemplatePagerField>
</Fields>
</asp:DataPager>
</tr>
</table>
</div>
</LayoutTemplate>
<ItemTemplate>
<tr class="group">
<th class="first">
<a class="toggle expand" title='Group: <%# Eval("Key")%>' href="#" onclick="toggleGroup(this, '<%# Eval("count") %>');" />
</th>
<th colspan="5"><%# Eval("Key")%> (<%# Eval("Count") %> Orders)</th>
</tr>
<asp:ListView ID="lvItems" runat="server" DataSource='<%# Eval("Items") %>'>
<LayoutTemplate>
<tr runat="server" id="itemPlaceholder" />
</LayoutTemplate>
<ItemTemplate>
<tr class='hidden <%# Container.DisplayIndex % 2 == 0 ? "item" : "altitem" %>'>
<td class="first"> </td>
<td><%# Eval("orderid") %></td>
<td><%# Eval("orderdate", "{0:MM/dd/yyyy}")%></td>
<td><%# Eval("requireddate", "{0:MM/dd/yyyy}")%></td>
<td><%# Eval("freight", "{0:c}") %></td>
<td><%# Eval("requireddate", "{0:MM/dd/yyyy}")%></td>
</tr>
</ItemTemplate>
</asp:ListView>
</ItemTemplate>
</asp:ListView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</form>
</body>
</html>