Menu Example - SlidingDataSet in edit mode

The purpose of this example is not to teach you how to utilize the DataGrid in general (though I do explain some of it), there is already a lots of books doing that, eg. "Building Web Solutions with ASP.NET and ADO.NET" by Dino Esposito (I think a very well written book above average quality). The purpose is instead to teach you how to utilize multiple DataGrids in a multilayered environment as that is how the SlidingDataSet aspires to help leverage the CMS and data reporting of today.

The complications of this example does not come from the SlidingMenu itself, it comes from the wish to work with with multiple DataGrids, whose are bind to partly unknown DataTables and at the same time you need to have a some housekeeping as you allow for sorting and general editing at the same time.

Luckily the XML/HTML markup is as always very simple and below is it all shown (except for the text of the first Group, Tips & Disclaimer). If you want to make this example yourself copy the XML/HTML markup to your clipboard by pressing the Clipboard button and paste it anywhere between the <FORM></FORM> tags in your .aspx-file.

GroupedCollection markup is blue, Comments are green.

0.	<wm:SlidingMenu id="smSlidingDataSetInEditMode" runat="server">
1.		<SlidingMenuStyle Width="100%" Height="95%" SlideSmootheness="20" />
2.		<GroupHeaderStyle Height="20" BorderWidth="1" BorderColor="white" BackgroundColor="f1f1f2" />
3.		<GroupCanvasStyle HorisontalScrollbar="Auto" />
4.		<!--The first Group is manually added-->
5.		<AddManualGroup>
6.			<GroupCanvasStyle BackgroundColor="white" />
7.			<GroupHeader>
8.				<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
9.					<tr>
10.						<td><img src="/images/pixel_transparent.gif" width="139" height="1"></td>
11.						<td align="center" width="100%"><span class="">TIPS & Disclaimer</span></td>
12.						<td><img src="/images/slidingmenu/example_SlidingMenuInEditMode/pen_w78h100_01.gif" border="0"></td>
13.						<td><img src="/images/pixel_transparent.gif" width="30" height="1"></td>
14.					</tr>
15.				</table>
16.			</GroupHeader>
17.			<GroupCanvas>
18.				<table class="text_bread" style="margin:5">
19.					<tr>
20.						<td>
21.					You can add, remove and change rows. However be aware ...
22.						</td>
23.					</tr>
24.				</table>
25.			</GroupCanvas>
26.		</AddManualGroup>
27.		<!--After the manual added Group comes the Databound Groups-->
28.		<DataBound>
29.			<HeaderTemplate>
30.				<!--Here I use a table to layout the GroupHeader-->
31.				<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
32.					<tr>
33.						<td><img src="/images/pixel_transparent.gif" width="139" height="1"></td>
34.						<td align="center" width="100%">
35.							<asp:Label ID="lblTableName" Runat="server"></asp:Label>
36.						</td>
37.						<td>
38.							<asp:Image ID="imgPen" Runat="server" BorderWidth="0"></asp:Image>
39.						</td>
40.						<td><img src="/images/pixel_transparent.gif" width="30" height="0"></td>
41.					</tr>
42.				</table>
43.			</HeaderTemplate>
44.			<CanvasTemplate>
45.				<!--And I use a table to layout the GroupCanvas as well-->
46.				<table width="100%" height="100%">
47.					<tr>
48.						<td align="center">
49.							<!--because of what may be an error in the SlidingMenu, I need to contain the SlidingMenu inside a table, if the SlidingMenu is to be horisontally centered using a table cell-->
50.							<table>
51.								<tr>
52.									<td>
53.										<asp:DataGrid ID="dgTable" Runat="server" OnItemCommand="ItemCommand" OnEditCommand="EditCommand" OnCancelCommand="CancelCommand" OnUpdateCommand="UpdateCommand" OnSortCommand="SortCommand" AllowSorting="True">
54.											<HeaderStyle BackColor="#993333" ForeColor="White" />
55.											<ItemStyle BackColor="#FFFF00" />
56.											<AlternatingItemStyle BackColor="#FFFF99" />
57.											<SelectedItemStyle BackColor="blue" ForeColor="white" />
58.											<Columns>
59.												<!--The ImageButton column that I use to enable row selection-->
60.												<asp:TemplateColumn>
61.													<ItemTemplate>
62.														<asp:ImageButton ID="ibRowSelect" Runat="server" CommandName="RowSelect" ImageUrl="/images/buttons/pin_unsticked.png" ImageAlign="AbsMiddle" />
63.													</ItemTemplate>
64.												</asp:TemplateColumn>
65.												<!--The standard edit column-->
66.												<asp:EditCommandColumn EditText="Edit" UpdateText="Update" CancelText="Cancel">
67.													<ItemStyle BackColor="blue" ForeColor="white" />
68.												</asp:EditCommandColumn>
69.												<!--The rest of the columns are auto created by the DataGrid-->
70.											</Columns>
71.										</asp:DataGrid>
72.									</td>
73.								</tr>
74.								<tr>
75.									<td>
76.										<!--The Add New Row and Delete Selected Row LinkButtons-->
77.										<asp:LinkButton ID="lbtnAddNewRow" Runat="server" OnCommand="AddNewRow">Add New Row</asp:LinkButton>
78.										<asp:LinkButton ID="lbtnDeleteSelectedRow" Runat="server" OnCommand="DeleteSelectedRow">Delete Selected Row</asp:LinkButton>
79.									</td>
80.								</tr>
81.							</table>
82.						</td>
83.					</tr>
84.				</table>
85.			</CanvasTemplate>
86.		</DataBound>
87.	</wm:SlidingMenu>

The c# of this example is rather complicated and there is a lot of it too. Here I show only the SlidingMenu GroupDataBound event handler, smSlidingDataSetInEditMode_GroupDataBound, however if you click the Clipboard button all the c# code used in this example will be copied to your clipboard, just paste it to any text editor. If you try to make this example yourself take care that you change the code to point correctly to there you place the Northwind Access database (also this example instantiates Northwind databases per Session, which complicates that part of the code slightly).

The most important to notice here is that it is necessary to work with 2 different indexes, one index for all the Groups within the SlidingMenu and one index for the DataSource items (DataTables). These 2 indexes is different in this example because I have placed a Manual added Group before the DataBound Groups, this means that in the overall index the manual added Group will have index 0 and the first DataBound Group will have index 1, while in the index for DataBound Groups, the first DataBound Group will have index 0, see line 2 in the code below.

The SlidingMenu has a DataTableCollection as its DataSource, as this SlidingMenu will slide through the DataTables of a DataSet enabling editing on the data source beneath, the Northwind Access database.

0.	private void smSlidingDataSetInEditMode_GroupDataBound(object sender, Webmodelling.Controls.Menues.SlidingMenuGroupEventArgs e)
1.	{
2.		int AllGroupsIndex = smSlidingDataSetInEditMode.ManualGroupsBeforeDataBound + e.GroupIndex;
3.
4.		LinkButton lbtnAddNewRow = (LinkButton)e.GroupCanvas.FindControl("lbtnAddNewRow");
5.		LinkButton lbtnDeleteSelectedRow = (LinkButton)e.GroupCanvas.FindControl("lbtnDeleteSelectedRow");
6.		DataTableCollection dataSource = (DataTableCollection)smSlidingDataSetInEditMode.DataSource;
7.		DataTable dtCurrent = dataSource[e.GroupIndex]; //e.GroupIndex is used the same way as you normally use e.Item.ItemIndex
8.
9.		Label lblTableName = (Label)e.GroupHeader.FindControl("lblTableName"); //normally you write e.Item.FindControl, however the SlidingMenu is a slightly more complex dividing the item (Group) into a GroupHeader and a GroupCanvas
10.		System.Web.UI.WebControls.Image imgPen = (System.Web.UI.WebControls.Image)e.GroupHeader.FindControl("imgPen");
11.		DataGrid dgTable = (DataGrid)e.GroupCanvas.FindControl("dgTable");
12.
13.		lblTableName.Text = dtCurrent.TableName;
14.		imgPen.ImageUrl = "/images/slidingmenu/example_SlidingMenuInEditMode/pen_w78h100_0" + (AllGroupsIndex + 1) + ".gif";
15.		//in the current canvas I here write out the current DataTable using a DataGrid (there are just as many GroupCanvas as there are Tables in the DataTableCollection datasource. Remember, the SlidingMenu instantiate a GroupCanvas for each item in the datasource (here each DataTable in the DataTableCollection)
16.		dgTable.DataSource = dtCurrent;
17.		DataView dvCurrent = new DataView(dtCurrent);
18.		dgTable.DataBind();
19.
20.		string currentColor = "#" + (string)malColors[e.GroupIndex % malColors.Count]; //it is not easy to find good use of the modulus in webprogramming anymore after .Net, however here is an example
21.		dgTable.HeaderStyle.BackColor = System.Drawing.ColorTranslator.FromHtml(currentColor);
22.		dgTable.HeaderStyle.ForeColor = System.Drawing.Color.White;
23.		lblTableName.ForeColor = System.Drawing.ColorTranslator.FromHtml(currentColor);
24.		lblTableName.Font.Bold = true;
25.
26.		//we need to be able to retrieve the GroupIndex (the index of the layer, this DataGrid belongs to) in a context, where we only have the DataGrid, it corresponds to the DataGrid.DataKeyField (normally a unique identifier for the DataGridItems) but here a level higher (a unique identifier for the DataGrid itself - the index of the layer for this DataGrid, however starting from the first databound layer, not starting from eventually beginning manually added layers)
27.		dgTable.DataMember = e.GroupIndex.ToString();
28.
29.		//Adding an identifier to the "Add new row" LinkButton
30.		lbtnAddNewRow.CommandArgument = e.GroupIndex.ToString(); //the LinkButton comes with several fields that can hold its position in a collection or array of linkbuttons (here I use the CommandArgument)
31.		lbtnDeleteSelectedRow.CommandArgument = e.GroupIndex.ToString();
32.
33.		//At each pageload, the "Add new row" LinkButton must be testet inside each SlidingMenuGroup as I don't want to enable the LinkButton if a new row is not finished adding
34.		DataRow lastRow = mdsNorthwind.Tables[e.GroupIndex].Rows[mdsNorthwind.Tables[e.GroupIndex].Rows.Count - 1];
35.		lbtnAddNewRow.Enabled = (lastRow.RowState == DataRowState.Unchanged) ? true : false;
36.		lbtnDeleteSelectedRow.Enabled = (lastRow.RowState == DataRowState.Unchanged && dgTable.SelectedIndex != -1) ? true : false;
37.	}

This is a stripped down version of the Northwind Access database. The reason for that is twofold, partly I want to decrease the size of the stream sent to the browser as this example runs on the Internet, partly there are parts of the Northwind that cannot be well handled by the code of this example. The download also contains the 5 images that together makes up the pen spanding the GroupHeaders.