NEWSLETTER
 Note: SlidingMenu v2.0 is NOT compatible with vs2005, please do not try to install SlidingMenu v2.0 with your vs2005 - it will not work.
With layered areas you can hold a lot more information on a lot less space - SlidingMenu slide through these layers!
  Menulab home >> SlidingMenu >> Examples >> SlidingDataSet in view mode         ASP.NET Offsite Freelance Programmer  
      DataBound
      Manual
 
 
 
 
 
 
SlidingMenu example : SlidingDataSet in view mode Menu Examples home
Categories
Customers
Employees
Order Details
Orders
Products
Shippers
Suppliers
SupplierIDCompanyNameContactNameContactTitleAddressCityRegionPostalCodeCountryPhoneFaxHomePage
1Exotic LiquidsCharlotte CooperPurchasing Manager49 Gilbert St.London EC1 4SDUK(171) 555-2222  
2New Orleans Cajun DelightsShelley BurkeOrder AdministratorP.O. Box 78934New OrleansLA70117USA(100) 555-4822 #CAJUN.HTM#
3Grandma Kelly's HomesteadRegina MurphySales Representative707 Oxford Rd.Ann ArborMI48104USA(313) 555-5735(313) 555-3349 
4Tokyo TradersYoshi NagaseMarketing Manager9-8 Sekimai Musashino-shiTokyo 100Japan(03) 3555-5011  
5Cooperativa de Quesos 'Las Cabras'Antonio del Valle Saavedra Export AdministratorCalle del Rosal 4OviedoAsturias33007Spain(98) 598 76 54  
6Mayumi'sMayumi OhnoMarketing Representative92 Setsuko Chuo-kuOsaka 545Japan(06) 431-7877 Mayumi's (on the World Wide Web)#http://www.microsoft.com/accessdev/sampleapps/mayumi.htm#
7Pavlova, Ltd.Ian DevlingMarketing Manager74 Rose St. Moonie PondsMelbourneVictoria3058Australia(03) 444-2343(03) 444-6588 
8Specialty Biscuits, Ltd.Peter WilsonSales Representative29 King's WayManchester M14 GSDUK(161) 555-4448  
9PB Knäckebröd ABLars PetersonSales AgentKaloadagatan 13Göteborg S-345 67Sweden 031-987 65 43031-987 65 91 
10Refrescos Americanas LTDACarlos DiazMarketing ManagerAv. das Americanas 12.890São Paulo 5442Brazil(11) 555 4640  
All the XML/HTML markup necessary for this example is shown below (there are no extra styles). However to get the markup code, click the Clipboard button to copy the code to your clipboard and paste it anywhere inside the <FORM></FORM> tags of your .aspx-file.
Each GroupHeader is defined on line 4-17 and you can see that I have used a HTML table to layout the GroupHeader, placing the Nothwind TableName (lblTableName) and Magnifier image. Each GroupCanvas (defined on line 18-28) is holding a very simple DataGrid, in this example the default workings of the DataGrid is just what we need and a HTML table is used to place the DataGrid in the middle of the GroupCanvas should the DataGrid be smaller than the GroupCanvas.
Notice that the SlidingMenu markup is close to default, only I have specified the size in percent and a faster slide and most importantly horisontal scroll on the GroupCanvas (see line 2) is set to auto (as horisontal scroll default is hidden).
SlidingMenu markup is blue, Comments are green.
0.<wm:SlidingMenu id="smSlidingDataSetInViewMode" runat="server">
1.     <SlidingMenuStyle Width="100%" Height="95%" SlideSmootheness="20" />
2.     <GroupCanvasStyle HorisontalScrollbar="Auto" />
3.     <DataBound>
4.         <HeaderTemplate>
5.             <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
6.                 <tr>
7.                     <td><img src="/images/pixel_transparent.gif" border="0" width="205" height="1"></td>
8.                     <td width="100%" align="center">
9.                         <asp:Label ID="lblTableName" Runat="server"></asp:Label>
10.                     </td>
11.                     <td>
12.                         <asp:Image ID="imgMagnifier" Runat="server" BorderWidth="0"></asp:Image>
13.                     </td>
14.                     <td style="border-width-top:1px"><img src="/images/pixel_transparent.gif" width="30" height="1"></td>
15.                 </tr>
16.             </table>
17.         </HeaderTemplate>
18.         <CanvasTemplate>
19.             <table width="100%" height="100%">
20.                 <tr>
21.                     <td align="center">
22.                         <asp:DataGrid ID="dgTable" Runat="server">
23.                             <AlternatingItemStyle BackColor="white" />
24.                         </asp:DataGrid>
25.                     </td>
26.                 </tr>
27.             </table>
28.         </CanvasTemplate>
29.     </DataBound>
30.</wm:SlidingMenu>
The point of this example is to make the simplest possible view of a whole DataSet. The relevant code first start on line 29 as it is without interest exactly how you populate your DataSet, the important thing is that you do have a DataSet and that you want to see what is in that DataSet.
In the next minor update, I plan to enable a DataSet as a DataSource and if the DataSource is a DataSet, then code pretty much like the one shown here will be contained within the SlidingMenu so that the SlidingDataSetInViewMode example can be automated, however I need to further evaluated on the possibilites of the SlidingDataSet.
On line 20, you can see that only the first 10 rows is selected from the Northwind database, this is only to avoid sending to large a stream to your browser, it has nothing to do with the limits of the SlidingMenu (I must admit I have not testet the practical limits, however the whole Northwind could be represented without problems).
If you want to make the example yourself, copy the C# code to your clipboard by pressing the Clipboard button (the copied code will also contain the necessary namespace using directives) and paste to any text editor. You will of course also need to copy the XML/HTML tags (XML tab) as well as the data source (DS tab) (remember to change the C# code on line 13 to point to the place there you save the Northwind database).
0.namespace YourNamespace
1.{
2.     public class YourClass : System.Web.UI.Page
3.     {
4.         protected Webmodelling.Controls.Menues.SlidingMenu smSlidingDataSetInViewMode;
5.         private DataSet mdsNorthwind;
6.    
7.         private void Page_Load(object sender, System.EventArgs e)
8.         {
9.             mdsNorthwind = new DataSet();
10.
11.             string appl_physical_path = Request.PhysicalApplicationPath;
12.             if (!appl_physical_path.EndsWith("\\")){appl_physical_path = appl_physical_path + "\\";} //old habit, sorry
13.             string physicalPath_Northwind = appl_physical_path + @"Data\Northwind.mdb";
14.             string connectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + physicalPath_Northwind;
15.
16.             OleDbDataAdapter objDataAdapter = new OleDbDataAdapter(new OleDbCommand());
17.             objDataAdapter.SelectCommand.Connection = new OleDbConnection(connectionString);
18.             objDataAdapter.SelectCommand.Connection.Open();
19.
20.             string sqlCategories = "SELECT TOP 10 * FROM Categories";
21.             objDataAdapter.SelectCommand.CommandText = sqlCategories;
22.             objDataAdapter.Fill(mdsNorthwind, "Categories");
23.            
24.             ... fetching the rest of the of the tables ...
25.
26.             objDataAdapter.SelectCommand.Connection.Close();
27.
28.             //The DataSource can be any IEnumerable, therefore also a DataTableCollection
29.             smSlidingDataSetInViewMode.DataSource = mdsNorthwind.Tables;
30.             //Delegate the GroupDataBound event to the smSlidingDataSetInViewMode_GroupDataBound function
31.             smSlidingDataSetInViewMode.GroupDataBound += new SlidingMenuGroupEventHandler(smSlidingDataSetInViewMode_GroupDataBound);
32.             //Raise the GroupDataBound event for each item (DataTable) in the Datasource (DataTableCollection)
33.             smSlidingDataSetInViewMode.DataBind();
34.         }
35.
36.         private void smSlidingDataSetInViewMode_GroupDataBound(object sender, Webmodelling.Controls.Menues.SlidingMenuGroupEventArgs e)
37.         {
38.             DataTableCollection dataSource = (DataTableCollection)smSlidingDataSetInViewMode.DataSource;
39.             DataTable dtCurrent = dataSource[e.GroupIndex]; //e.GroupIndex is used the same way as you normally use e.Item.ItemIndex
40.
41.             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
42.             System.Web.UI.WebControls.Image imgMagnifier = (System.Web.UI.WebControls.Image)e.GroupHeader.FindControl("imgMagnifier");
43.             DataGrid dgTable = (DataGrid)e.GroupCanvas.FindControl("dgTable");
44.
45.             lblTableName.Text = dtCurrent.TableName;
46.             //I postfixed the magnifier images with the numbers 1 to 8 corresponding to the GroupIndex (however the GroupIndex is zero indexed)
47.             imgMagnifier.ImageUrl = "/images/slidingmenu/example_SlidingMenuInViewMode/magnifier_w175h200_0" + (e.GroupIndex + 1) + ".gif";
48.             //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 (as there are tables in Northwind.mdb)).
49.             dgTable.DataSource = dtCurrent;
50.             dgTable.DataBind();
51.         }
52.     }
53.}
The data source of this example is the Northwind Access database. I guess most people have the Nothwind Access database already, however here I have zipped it together with the GroupHeader images making up the magnifier, just press the Download button to download.
Contact Menulab   |   Terms & Conditions   |   Privacy Policy   |   Sitemap   |   Copyright © Menulab 2003. All rights reserved.