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 >> Xml Price list         ASP.NET Offsite Freelance Programmer  
      DataBound
      Manual
 
 
 
 
 
 
SlidingMenu example : Xml Price list Menu Examples home
Typically then databinding, there is not so much XML/HTML as most of the content tend to be embedded in the data source - therefore I show all the XML/HTML necessary for this example (click the Clipboard button to copy the code to your clipboard and paste it anywhere between the <FORM></FORM> tags in your .aspx-file.).
Notice that the XML/HTML tags are no different for the SlidingMenu nor other .NET WebControls whether you bind to a database or as here bind to an XML file.
SlidingMenu markup is blue, Comments are green.
0.<wm:SlidingMenu id=smPriceList runat="server">
1.     <SlidingMenuStyle Height="400" Width="200" BorderColor="#3366cc" />
2.     <GroupHeaderStyle BorderColor="#3366cc" BackgroundColor="white" />
3.     <GroupCanvasStyle BackgroundColor="white" />
4.     <DataBound>
5.         <!--The HeaderTemplate will instantiate on each item in the data source (that is: each product category in the xml file)-->
6.         <HeaderTemplate>
7.             <!--For each category I will write out the name of the category using this Label WebControl-->
8.             <asp:Label ID="lblProductCategory" Runat="server" CssClass="pricelist_categoryName"></asp:Label>
9.         </HeaderTemplate>
10.         <!--Like for the HeaderTemplate, the CanvasTemplate will also instantiate on each item (product category) in the data source-->
11.         <CanvasTemplate>
12.             <!--For each product category I will find a XmlNodeList containing all the products under that product category and I will bind this XmlNodeList to a DataGrid, so that each row of the DataGrid display one product-->
13.             <asp:DataGrid ID="dgProducts" Runat="server" Width="100%" GridLines="None" AutoGenerateColumns="False" ShowHeader="False">
14.                 <AlternatingItemStyle CssClass="pricelist_row_alternate" />
15.                 <Columns>
16.                     <asp:TemplateColumn>
17.                         <ItemTemplate>
18.                             <asp:Image ID="imgProductImage" Runat="server" Width="30px"></asp:Image>
19.                         </ItemTemplate>
20.                     </asp:TemplateColumn>
21.                     <asp:TemplateColumn>
22.                         <ItemTemplate>
23.                             <asp:HyperLink ID="hplProductName" Runat="server"></asp:HyperLink>
24.                         </ItemTemplate>
25.                     </asp:TemplateColumn>
26.                     <asp:TemplateColumn>
27.                         <ItemStyle Wrap=False HorizontalAlign="Right" />
28.                         <ItemTemplate>
29.                             <asp:Label ID="lblProductPrice" Runat="server"></asp:Label>
30.                         </ItemTemplate>
31.                     </asp:TemplateColumn>
32.                 </Columns>
33.             </asp:DataGrid>
34.         </CanvasTemplate>
35.     </DataBound>
36.</wm:SlidingMenu>
I have tried to make an example simple enough that everybody can follow it and advanced enough that you can get some real use of it. If you understand .NET databinding, you will be able to understand this example even without any XML experience. REMEMBER to look at the xml source (under the yellow DS-tab) as you look through the C# code.
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 as well as the XML source (remember to change the C# code on line 11 to point to the place there you save the XML source).
0.namespace YourNamespace
1.{
2.     public class YourClass : System.Web.UI.Page
3.     {
4.         //smPriceList is the SlidingMenu WebControl declared in XML/HTML view
5.         protected Webmodelling.Controls.Menues.SlidingMenu smPriceList;
6.    
7.         private void Page_Load(object sender, System.EventArgs e)
8.         {
9.             //The XmlDocument is an appropriate object for our use, it can read a physical path or a full URL (if your XML
10.             //source is remote) and parse the XML into a DOM and also supplying appropriate methods including XPath understanding.
11.             string physicalPath_xmlSource = MapPath("/data/PriceList.xml");
12.             XmlDocument xDoc = new XmlDocument();
13.             xDoc.Load(physicalPath_xmlSource);
14.
15.             XmlElement xeProducts = xDoc.DocumentElement; //xeProducts is now the products element in the XML source
16.             XmlNodeList xnlProductCategories = xeProducts.ChildNodes;// confused? check the XML source
17.
18.             smPriceList.DataSource = xnlProductCategories;
19.             //tell what function should listen for the GroupDataBound event (GroupDataBound will be raised on each item in the DataSource (each product category)
20.             smPriceList.GroupDataBound += new SlidingMenuGroupEventHandler(smPriceList_GroupDatabound);
21.             //ok raise the events (the function smPriceList_GroupDatabound will run on each product category)
22.             smPriceList.DataBind();
23.         }
24.
25.         protected void smPriceList_GroupDatabound(object sender, SlidingMenuGroupEventArgs e)
26.         {
27.             XmlNodeList dataSource = (XmlNodeList)smPriceList.DataSource;
28.             XmlNode xnCurrent = dataSource[e.GroupIndex];
29.             //Here xnCurrent is the current product category (remember this function runs once for each product category)
30.
31.             Label lblProductCategory = (Label)e.GroupHeader.FindControl("lblProductCategory");
32.             DataGrid dgProducts = (DataGrid)e.GroupCanvas.FindControl("dgProducts");
33.
34.             string productCategory = xnCurrent.SelectSingleNode("categoryDisplayName").InnerText;
35.             lblProductCategory.Text = productCategory;
36.
37.             //The SlidingMenu is bound to the list of product categories, and for each product category I bind a DataGrid to the list of product category child items
38.             //xnCurrent.SelectNodes("item") is the child items (products) under the current product category
39.             dgProducts.DataSource = xnCurrent.SelectNodes("item");
40.             //tell which function to call upon each product in the current product category
41.             dgProducts.ItemDataBound += new DataGridItemEventHandler(dgProducts_ItemDataBound);
42.             //ok, raise the ItemDataBound event for each item in the DataSource (each product) knowing that the dgProducts_ItemDataBound function will be called for these products
43.             dgProducts.DataBind();
44.
45.             //for fun: open the current Group of the SlidingMenu, if the current product category is "TV"
46.             if (xnCurrent.Name == "TV")
47.             {
48.                 e.GroupHeader.GroupHeaderStyles.OpenThisGroupAtStartup = true;
49.             }
50.         }
51.
52.         private void dgProducts_ItemDataBound(object sender, DataGridItemEventArgs e)
53.         {
54.             if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
55.             {
56.                 XmlNodeList dataSource = (XmlNodeList)((DataGrid)sender).DataSource;
57.                 XmlNode xnCurrent = dataSource[e.Item.ItemIndex];
58.                 //Here xnCurrent is the current item (which is a product)
59.
60.                 System.Web.UI.WebControls.Image imgProductImage = (System.Web.UI.WebControls.Image)e.Item.FindControl("imgProductImage");
61.                 HyperLink hplProductName = (HyperLink)e.Item.FindControl("hplProductName");
62.                 Label lblProductPrice = (Label)e.Item.FindControl("lblProductPrice");
63.
64.                 //If I am not sure, that the imageFile node exists, I use GetInnerText to avoid raising an error if I ask for InnerText on a null reference (imageFile will be a null reference if it does not exist in the Xml source) (in large Xml scenaries a function like GetInnerText comes in handy, here it is not really necessary)
65.                 string productImageFile = GetInnerText(xnCurrent.SelectSingleNode("imageFile"));
66.                 if (productImageFile != String.Empty)
67.                 {
68.                     string productImageUrl = "/images/slidingmenu/example_Pricelist/" + productImageFile;
69.                     imgProductImage.ImageUrl = productImageUrl;
70.                 }
71.                 else
72.                 {
73.                     imgProductImage.Visible = false;
74.                 }
75.
76.                 string productName = xnCurrent.SelectSingleNode("displayName").InnerText;
77.                 string productPrice = xnCurrent.SelectSingleNode("price").InnerText;
78.
79.                 hplProductName.Text = productName;
80.                 //Here I don't provide a real link to the product, however in real use, you will of course link to another page and append a productId or even take the URL from the XML file.
81.                 hplProductName.NavigateUrl = "pricelist.aspx";
82.                 lblProductPrice.Text = productPrice;
83.             }
84.         }
85.
86.         private string GetInnerText(XmlNode pXmlNode)
87.         {
88.             if (pXmlNode != null)
89.             {
90.                 return pXmlNode.InnerText.Trim();
91.             }
92.             return String.Empty;
93.         }
94.     }
95.}
This XML file is the source of this example. You can see it has a root element (called DocumentElement by .NET XmlDocument) named products. There is 4 child elements of products, MP3, TV, DVD and Cameras, these are the product categories. Under each category there is the individual products, here called item. Each item again have some child nodes describing a product - the name, the price and an eventually image file.
If you want to make this example yourself, copy the xml source to your clipboard by pressing the clipboard button and thereafter paste it to any text editor.
0.<?xml version="1.0" encoding="utf-8" ?>
1.<products>
2.     <MP3>
3.         <categoryDisplayName>MP3</categoryDisplayName>
4.         <categoryImageFile>category_mp3.gif</categoryImageFile>
5.         <item>
6.             <displayName>RIO 600 64 MB MP3 Audio Player 90260246</displayName>
7.             <price>$159.97</price>
8.             <imageFile>MP3_Rio600_09260246.gif</imageFile>
9.         </item>
10.         <item>
11.             <displayName>Rio 800 64MB MP3 Player 90260092</displayName>
12.             <price>$239.97</price>
13.             <imageFile>MP3_Rio800_90260092.gif</imageFile>
14.         </item>
15.         <item>
16.             <displayName>Samsung YP-NEU64B Hip Hop Series YEPP MP3</displayName>
17.             <price>$189.88</price>
18.             <imageFile>MP3_Samsung_YP-NEU64B.gif</imageFile>
19.         </item>
20.         <item>
21.             <displayName>Samsung YP-E64 In-Stock!! Yepp Portable MP3</displayName>
22.             <price>$129</price>
23.             <imageFile>MP3_Samsung_YP-E64.gif</imageFile>
24.         </item>
25.         <item>
26.             <displayName>Philips Expanium EXP103-17 MP3 / CD Player</displayName>
27.             <price>$149.97</price>
28.             <imageFile>MP3_Phillips_EXP103-17.gif</imageFile>
29.         </item>
30.         <item>
31.             <displayName>Pine SM320V 32MB MP3 Player With Voice Recording</displayName>
32.             <price>$154.97</price>
33.             <imageFile>MP3_Pine_SM320V.gif</imageFile>
34.         </item>
35.     </MP3>
36.     <TV>
37.         <categoryDisplayName>TVs</categoryDisplayName>
38.         <categoryImageFile>category_tv.gif</categoryImageFile>
39.         <item>
40.             <displayName>Panasonic 20" Stereo TV CT20D11</displayName>
41.             <price>$219.97</price>
42.             <imageFile>TV_Panasonic_CT20D11.gif</imageFile>
43.         </item>
44.         <item>
45.             <displayName>Philips 25PS40S 25"Stereo Television</displayName>
46.             <price>$249.97</price>
47.             <imageFile>TV_Phillips_25PS40S.gif</imageFile>
48.         </item>
49.         <item>
50.             <displayName>Philips 20PF9925 20" LCD Flat TV</displayName>
51.             <price>$1.349.97</price>
52.             <imageFile>TV_Phillips_20PF9925.gif</imageFile>
53.         </item>
54.         <item>
55.             <displayName>RCA 25" Stereo TV With Remote</displayName>
56.             <price>$229.97</price>
57.             <imageFile>TV_RCA_F25216BC.gif</imageFile>
58.         </item>
59.         <item>
60.             <displayName>Toshiba 20AF42 20" Color FST PureFlat TV</displayName>
61.             <price>$259.97</price>
62.             <imageFile>TV_Toshiba_20AF42.gif</imageFile>
63.         </item>
64.         <item>
65.             <displayName>Samsung 25" Stereo TV TXJ2554</displayName>
66.             <price>$239.77</price>
67.             <imageFile>TV_Samsung_TXJ2554.gif</imageFile>
68.         </item>
69.         <item>
70.             <displayName>Philips 42FD9932 42" Plasma Flat TV</displayName>
71.             <price>$4,299.00</price>
72.             <imageFile>TV_Phillips_42FD9932.gif</imageFile>
73.         </item>
74.     </TV>
75.     <DVD>
76.         <categoryDisplayName>DVDs</categoryDisplayName>
77.         <categoryImageFile>category_dvd.gif</categoryImageFile>
78.         <item>
79.             <displayName>JVC XV523GD DVD Player</displayName>
80.             <price>$235.77</price>
81.             <imageFile></imageFile>
82.         </item>
83.         <item>
84.             <displayName>JVC XV-S45GD DVD Player</displayName>
85.             <price>$129.97</price>
86.             <imageFile></imageFile>
87.         </item>
88.         <item>
89.             <displayName>Toshiba SD3205 5-Disc DVD Player</displayName>
90.             <price>$329.97</price>
91.             <imageFile></imageFile>
92.         </item>
93.         <item>
94.             <displayName>Toshiba SDV280 Combination DVD/VCR</displayName>
95.             <price>$189.97</price>
96.             <imageFile></imageFile>
97.         </item>
98.         <item>
99.             <displayName>Sony DVP-S570D DVD Player</displayName>
100.             <price>$279.97</price>
101.             <imageFile></imageFile>
102.         </item>
103.         <item>
104.             <displayName>Panasonic DVD-LV70 Portable DVD With Built-in 7" Screen</displayName>
105.             <price>$539.97</price>
106.             <imageFile></imageFile>
107.         </item>
108.         <item>
109.             <displayName>Samsung DVD-M101 DVD Player</displayName>
110.             <price>$129.97</price>
111.             <imageFile></imageFile>
112.         </item>
113.         <item>
114.             <displayName>Apex AD1200 DVD Player With MP3 and Picture CD</displayName>
115.             <price>$88.97</price>
116.             <imageFile></imageFile>
117.         </item>
118.         <item>
119.             <displayName>Apex PD-10 Portable DVD Player With 5.6" Screen</displayName>
120.             <price>$189.77</price>
121.             <imageFile></imageFile>
122.         </item>
123.     </DVD>
124.     <Cameras>
125.         <categoryDisplayName>Cameras</categoryDisplayName>
126.         <categoryImageFile>category_camera.gif</categoryImageFile>
127.         <item>
128.             <displayName>Canon Sure Shot SS85</displayName>
129.             <price>$148.77</price>
130.             <imageFile>Camera_Canon_SS85.gif</imageFile>
131.         </item>
132.         <item>
133.             <displayName>Canon Brand New SS60 Sure Shot</displayName>
134.             <price>$99.77</price>
135.             <imageFile>Camera_Canon_SS60.gif</imageFile>
136.         </item>
137.         <item>
138.             <displayName>Kodak KDC240 Digital Camera</displayName>
139.             <price>$399.97</price>
140.             <imageFile>Camera_Kodak_KDC240.gif</imageFile>
141.         </item>
142.         <item>
143.             <displayName>Olympus OLY700 2.1 27Zoom Digital Camera</displayName>
144.             <price>$549.97</price>
145.             <imageFile>Camera_Olympus_OLY700.gif</imageFile>
146.         </item>
147.         <item>
148.             <displayName>Toshiba PDR-M25 2.2 Megapixel Digital Camera</displayName>
149.             <price>$149.77</price>
150.             <imageFile>Camera_Toshiba_PDR_M25.gif</imageFile>
151.         </item>
152.         <item>
153.             <displayName>Toshiba PDR-3310 3.2 Mega-Pixel Digital Camera</displayName>
154.             <price>$249.97</price>
155.             <imageFile>Camera_Toshiba_PDR-3310.gif</imageFile>
156.         </item>
157.         <item>
158.             <displayName>Panasonic SV-AV30 eWear SD w/Cradle for TV Recording</displayName>
159.             <price>$329.88</price>
160.             <imageFile>Camera_Panasonic_SV-AV30.gif</imageFile>
161.         </item>
162.     </Cameras>
163.</products>
Contact Menulab   |   Terms & Conditions   |   Privacy Policy   |   Sitemap   |   Copyright © Menulab 2003. All rights reserved.