|
|
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demo1.aspx.cs" Inherits="Demo1" %>
<%@ Register TagPrefix="UC" Namespace="MyControls" %>
<!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 runat="server">
<title>Expandable Grid Demo 1</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
var controls = {
ColumnsCountList: "<%= ColumnsCountList.ClientID %>",
AnimationTimeList: "<%= AnimationTimeList.ClientID %>",
MultipleExpandCheckBox: "<%= MultipleExpandCheckBox.ClientID %>"
};
function ChangeSetting() {
var pageUrl = window.location.href.split("?")[0];
var columnsCount = $("#" + controls.ColumnsCountList).val();
var animationTime = $("#" + controls.AnimationTimeList).val();
var allowMultiExpand = $("#" + controls.MultipleExpandCheckBox).prop("checked") ? "1" : "0";
var newUrl = pageUrl + "?ColumnsCount=" + columnsCount + "&AnimationTime=" + animationTime + "&AllowMultiExpand=" + allowMultiExpand;
window.location.href = newUrl;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<h1>Demo 1</h1>
<p>This demo shows the mode that the detail row rendered by a list of columns</p>
<fieldset class="setting">
<legend>Setting</legend>
<table>
<tr>
<td class="label">Number of columns per row in detail: </td>
<td class="value">
<asp:DropDownList ID="ColumnsCountList" runat="server">
<asp:ListItem Text="One" Value="1"></asp:ListItem>
<asp:ListItem Text="Two" Value="2"></asp:ListItem>
<asp:ListItem Text="Three" Value="3" Selected="True"></asp:ListItem>
<asp:ListItem Text="Four" Value="4"></asp:ListItem>
</asp:DropDownList>
</td>
<td class="label">Expand Animation Time (milliseconds)</td>
<td class="value">
<asp:DropDownList ID="AnimationTimeList" runat="server">
<asp:ListItem Text="0" Value="0"></asp:ListItem>
<asp:ListItem Text="500" Value="500" Selected></asp:ListItem>
<asp:ListItem Text="1000" Value="1000"></asp:ListItem>
<asp:ListItem Text="1500" Value="1500"></asp:ListItem>
</asp:DropDownList>
</td>
<td class="label">Allow multiple row expand</td>
<td class="value">
<asp:CheckBox runat="server" ID="MultipleExpandCheckBox" Checked="true" />
</td>
</tr>
<tr>
<td colspan="6" style="text-align: center">
<input type="button" value="Change Setting" onclick="ChangeSetting()" />
</td>
</tr>
</table>
</fieldset>
<UC:ExpandableGridView runat="server" ID="DemoGrid1" AutoGenerateColumns="false" CssClass="datatable">
<RowStyle CssClass="row" />
<AlternatingRowStyle CssClass="alt-row" />
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" />
<asp:BoundField DataField="FullName" HeaderText="Full Name" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" />
<asp:BoundField DataField="City" HeaderText="City" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" />
<asp:BoundField DataField="State" HeaderText="State" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" />
<asp:BoundField DataField="Department" HeaderText="Department" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" />
<asp:BoundField DataField="Title" HeaderText="Title" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" />
</Columns>
</UC:ExpandableGridView>
</form>
</body>
</html>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
I am Sitang Ruan, a .Net developer focus on web application development for 6 years. I like to write elegant and efficient codes to provide user a smooth and solid experience. I also like to take very complicated and challenging tasks.
Submit an article or tip