This article is an extension of my previous article. If you have not taken a look at it kindly click the following link.

http://www.c-sharpcorner.com/UploadFile/17e8f6/nested-repeater-control-in-Asp-Net-4-0/

Well in the preceding article we have nested a repeater control inside one another, but the scenario changes every time, you might want to display data in a more standardized and sophisticated way than just displaying it inside a table control or something like that. Now in this article we will basically learn how to display a GridView control inside a repeater control.

For demonstrating this article we will use a scenario of members placing orders in an online shopping website. Let's say we have a member who place orders for 7 different items respective to the quantity. Now for displaying that member's private data (such as their mailing address, any member instruction given for dispatching data, orderDate, OrderID, Member Name, Membership_ID etc.) along with the products that he/she has added to the cart (details such as productName,Quantities of the product, MRP's of the products etc.) to the administrator of the website. Now from the preceding scenario we will try to create a front end for the administrator who will learn the latest order details placed by the member.

The final output of what we will display will be like the following:

Repeater1.jpg

OK now let's start with the code. For demonstrating the preceding I've used an Oracle Database. The script for it has been included in the article folder.

The following is it:

  1. CREATE TABLE HQM_ADMIN.MEMBERSHIP
  2. (
  3. MEMBERSHIP_ID VARCHAR2(30 BYTE),
  4. MEMBERTITLE VARCHAR2(6 BYTE),
  5. MEMBERNAME VARCHAR2(30 BYTE),
  6. USERNAME VARCHAR2(100 BYTE) NOT NULL,
  7. WORD VARCHAR2(20 BYTE) NOT NULL,
  8. ADDRESS VARCHAR2(500 BYTE)
  9. )
  10. CREATE SEQUENCE HQM_ADMIN.MEMBERSHIP_SEQ
  11. START WITH 5
  12. MAXVALUE 9999999999999999999999999999
  13. MINVALUE 1
  14. NOCYCLE
  15. NOCACHE
  16. NOORDER;
  17. CREATE OR REPLACE PROCEDURE HQM_ADMIN.prc_addmember (
  18. v_title VARCHAR2,
  19. v_name VARCHAR2,
  20. v_address VARCHAR2,
  21. v_username VARCHAR2,
  22. v_word VARCHAR2
  23. )
  24. AS
  25. v_memid VARCHAR (20) := '';
  26. n_memid NUMBER := 0;
  27. BEGIN
  28. n_memid := membership_seq.NEXTVAL;
  29. IF (n_memid < 10)
  30. THEN
  31. v_memid := 'M00' || n_memid;
  32. ELSE
  33. v_memid := 'M0' || n_memid;
  34. END IF;
  35. INSERT INTO membership
  36. (membership_id, membertitle, membername, username, WORD, address)
  37. VALUES (v_memid, v_title, v_name, v_username, v_word,
  38. v_address
  39. );
  40. END;
NOTE: here you could use the Lpad function of Oracle for appending the M00 or M0 with the v_memid variable.

  1. select * from Membership
  2. CREATE TABLE HQM_ADMIN.TBL_MST_ORDERS
  3. (
  4. ORDERID VARCHAR2(30 BYTE),
  5. MEM_ID VARCHAR2(30 BYTE) NOT NULL,
  6. ORDER_VALUE FLOAT(126) NOT NULL,
  7. CUSTOMER_INSTRUCTION VARCHAR2(2000 BYTE),
  8. ORDER_COMMENTS VARCHAR2(2000 BYTE),
  9. ORDER_DATE DATE DEFAULT sysdate,
  10. ORDER_DELIVEREDSTATUS INTEGER DEFAULT 0,
  11. ORDER_DELIVERYDATE DATE DEFAULT null,
  12. ORDER_CANCELLEDFLAG INTEGER DEFAULT 0
  13. )
  14. CREATE SEQUENCE HQM_ADMIN.ORDER_SEQ
  15. START WITH 5
  16. MAXVALUE 9999999999999999999999999999
  17. MINVALUE 1
  18. NOCYCLE
  19. NOCACHE
  20. NOORDER;
  21. CREATE OR REPLACE PROCEDURE HQM_ADMIN.prc_addorder (
  22. v_memberid VARCHAR,
  23. f_ordervalue FLOAT,
  24. v_custinfo VARCHAR
  25. )
  26. AS
  27. n_orderid NUMBER;
  28. v_orderid VARCHAR (30);
  29. BEGIN
  30. n_orderid := order_seq.NEXTVAL;
  31. IF (n_orderid < 10)
  32. THEN
  33. v_orderid := 'O00' || n_orderid;
  34. ELSE
  35. v_orderid := 'O0' || n_orderid;
  36. END IF;
  37. INSERT INTO tbl_mst_orders
  38. (orderid, mem_id, order_value, customer_instruction
  39. )
  40. VALUES (v_orderid, v_memberid, f_ordervalue, v_custinfo
  41. );
  42. END;

NOTE: here you could use the Lpad function of Oracle for appending the O00 or O0 with the v_orderID variable.

  1. CREATE TABLE HQM_ADMIN.TBL_MST_ORDERDESCRIPTION
  2. (
  3. ORDERID VARCHAR2(30 BYTE) NOT NULL,
  4. PRODNAME VARCHAR2(30 BYTE) NOT NULL,
  5. QUANTITY INTEGER NOT NULL,
  6. MRP FLOAT(126) DEFAULT 0,
  7. ITEM_CANCELLEDFLAG INTEGER DEFAULT 0,
  8. ITEM_COMMENTS VARCHAR2(4000 BYTE) DEFAULT 'No Comments'
  9. )
  10. Insert into TBL_MST_ORDERDESCRIPTION
  11. (ORDERID, PRODNAME, QUANTITY, MRP, ITEM_CANCELLEDFLAG, ITEM_COMMENTS)
  12. Values
  13. ('O002', 'Bluetooth Dongle', 1, 300, 0, 'No Comments');
  14. Insert into TBL_MST_ORDERDESCRIPTION
  15. (ORDERID, PRODNAME, QUANTITY, MRP, ITEM_CANCELLEDFLAG, ITEM_COMMENTS)
  16. Values
  17. ('O002', 'Wireless Mouse', 1, 700, 0, 'No Comments');
  18. Insert into TBL_MST_ORDERDESCRIPTION
  19. (ORDERID, PRODNAME, QUANTITY, MRP, ITEM_CANCELLEDFLAG, ITEM_COMMENTS)
  20. Values
  21. ('O002', 'Pen Drive', 2, 300, 0, 'No Comments');
  22. Insert into TBL_MST_ORDERDESCRIPTION
  23. (ORDERID, PRODNAME, QUANTITY, MRP, ITEM_CANCELLEDFLAG, ITEM_COMMENTS)
  24. Values
  25. ('O002', 'HeadSets', 1, 500, 0, 'No Comments');
  26. Insert into TBL_MST_ORDERDESCRIPTION
  27. (ORDERID, PRODNAME, QUANTITY, MRP, ITEM_CANCELLEDFLAG, ITEM_COMMENTS)
  28. Values
  29. ('O002', 'External Hard Drive', 1, 3400, 0, 'No Comments');
  30. COMMIT;
  31. Insert into TBL_MST_ORDERDESCRIPTION
  32. (ORDERID, PRODNAME, QUANTITY, MRP, ITEM_CANCELLEDFLAG, ITEM_COMMENTS)
  33. Values
  34. ('O003', 'LCD Monitor', 4, 3500, 0, 'No Comments');
  35. Insert into TBL_MST_ORDERDESCRIPTION
  36. (ORDERID, PRODNAME, QUANTITY, MRP, ITEM_CANCELLEDFLAG, ITEM_COMMENTS)
  37. Values
  38. ('O003', 'Wireless Mouse', 1, 700, 0, 'No Comments');
  39. Insert into TBL_MST_ORDERDESCRIPTION
  40. (ORDERID, PRODNAME, QUANTITY, MRP, ITEM_CANCELLEDFLAG, ITEM_COMMENTS)
  41. Values
  42. ('O003', 'KeyBoard', 1, 1300, 0, 'No Comments');
  43. Insert into TBL_MST_ORDERDESCRIPTION
  44. (ORDERID, PRODNAME, QUANTITY, MRP, ITEM_CANCELLEDFLAG, ITEM_COMMENTS)
  45. Values
  46. ('O004', 'CPU', 1,8000 , 0, 'No Comments');
  47. Insert into TBL_MST_ORDERDESCRIPTION
  48. (ORDERID, PRODNAME, QUANTITY, MRP, ITEM_CANCELLEDFLAG, ITEM_COMMENTS)
  49. Values
  50. ('O004', 'Wireless Mouse', 1, 700, 0, 'No Comments');
  51. Insert into TBL_MST_ORDERDESCRIPTION
  52. (ORDERID, PRODNAME, QUANTITY, MRP, ITEM_CANCELLEDFLAG, ITEM_COMMENTS)
  53. Values
  54. ('O004', 'KeyBoard', 1, 1300, 0, 'No Comments');
  56. CREATE OR REPLACE PROCEDURE HQM_ADMIN.prc_getallmemberorders (
  57. tempcursor OUT sys_refcursor
  58. )
  59. AS
  60. BEGIN
  61. OPEN tempcursor FOR
  62. SELECT a.orderid, b.membership_id, membertitle, membername, address,
  63. order_value, customer_instruction, prodname, quantity, mrp,
  64. a.order_date, a.order_comments,Address
  65. FROM tbl_mst_orders a INNER JOIN membership b
  66. ON a.mem_id = b.membership_id
  67. INNER JOIN tbl_mst_orderdescription c ON a.orderid = c.orderid
  68. WHERE a.order_cancelledflag = 0
  69. AND a.order_deliveredstatus = 0
  70. AND c.item_cancelledflag = 0;
  71. END;

Our Membership Table contains 3 records like the following with some dummy data:

Repeater2.jpg

Our tbl_mst_Orders table contains 3 records with some dummy data; see:

Repeater3.jpg

Our tbl_mst_orderDescription contains the following dummy data:

Repeater4.jpg

We've used some CSS. The following is the CSS file for that:

  1. body {
  2. /* background: #e5e5e5;*/
  3. background: white;
  4. font-size: .80em;
  5. font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
  6. margin: 10px auto;
  7. padding: 0px;
  8. /*color: #696969;*/
  9. color: #3f3f3f;
  10. }
  11. a:visited a:link {
  12. color: #FFFFFF;
  13. }
  14. a:hover {
  15. color: #08D1D5;
  16. text-decoration: none;
  17. }
  18. a:active {
  19. color: #08F990;
  20. }
  21. p {
  22. margin-bottom: 10px;
  23. line-height: 1.6em;
  24. color: black;
  25. }
  27. /* PRIMARY LAYOUT ELEMENTS ----------------------------*/
  28. .page {
  29. width: 1100px;
  30. background-color: #fff;
  31. margin: 20px auto 0px auto;
  32. }
  33. .footer {
  34. color: #4e5766;
  35. padding: 8px 0px 0px 0px;
  36. margin: 0px auto;
  37. width: 1250px;
  38. text-align: center;
  39. line-height: normal;
  40. }
  41. .floatRight {
  42. display: block;
  43. float: right;
  44. vertical-align: top;
  45. width: 220px;
  46. }
  48. .center {
  49. margin-left: 350px;
  50. margin-right: auto;
  51. }
  52. #main {
  53. /*to display the block level elements to the center of the page such as the <p> <div> or <h1> tags*/
  54. margin-left: auto;
  55. margin-right: auto;
  56. width: 960px;
  57. }
  59. /* MISC -------------------------------*/
  60. .clear {
  61. clear: both;
  62. }
  63. .title {
  64. display: block;
  65. float: left;
  66. text-align: left;
  67. width: auto;
  68. }
  69. .title a {
  70. color: #778899;
  71. }
  73. /***********Page Div, TextBox,Dropdownlist,GridView Styling********/
  74. /************Button Styling*************/
  75. .addbtn {
  76. background: url(image/btnbg.png) no-repeat;
  77. padding: 2px 0px;
  78. color: #FFFFFF;
  79. font-weight: bold;
  80. border: 0;
  81. width: 56px;
  82. font-size: 12px;
  83. text-align: center;
  84. cursor: pointer;
  85. }
  86. .addbtn:hover {
  87. background: url(image/btnbg.png) no-repeat bottom;
  88. }
  89. .plainButton {
  90. border: 1px solid #777777;
  91. /*background: #6e9e2d;*/
  92. background: silver;
  93. color: white;
  94. font: bold 11px 'Trebuchet MS';
  95. padding: 4px;
  96. cursor: pointer;
  97. -moz-border-radius: 4px;
  98. -webkit-border-radius: 4px;
  99. }
  100. .blueButton {
  101. background: #5B74A8;
  102. background: -moz-linear-gradient(top, #5B74A8 0%, #5B74A8 100%);
  103. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5B74A8), color-stop(100%, #5B74A8));
  104. background: -webkit-linear-gradient(top, #5B74A8 0%, #5B74A8 100%);
  105. background: -o-linear-gradient(top, #5B74A8 0%, #5B74A8 100%);
  106. background: -ms-linear-gradient(top, #5B74A8 0%, #5B74A8 100%);
  107. background: linear-gradient(top, #5B74A8 0%, #5B74A8 100%);
  108. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5B74A8', endColorstr='#5B74A8', GradientType=0);
  109. padding: 2px 6px;
  110. color: #fff;
  111. font-family: 'Helvetica', sans-serif;
  112. font-size: 11px;
  113. cursor: hand;
  114. border-radius: 0;
  115. -moz-border-radius: 0;
  116. -webkit-border-radius: 0;
  117. border: 1px solid #1A356E;
  118. }
  120. /************End of Button Styling*************/
  121. /********GridView********/
  122. .fortd .grid1 th.txtgreen2 {
  123. color: #009315;
  124. }
  125. .fortd .grid1 th.txtblue2 {
  126. color: #326BD2;
  127. }
  128. .backGround02 {
  129. background: #f9f9f9;
  130. }
  131. .grid1 {
  132. margin: 0;
  133. width: 100%;
  134. height: auto;
  135. border: 1px solid #d4d4d4 !important;
  136. border-bottom: 0px !important;
  137. }
  138. .grid1 th {
  139. background: url(image/thbg.png) repeat-x bottom;
  140. font-size: 11px;
  141. font-weight: bold;
  142. color: #333;
  143. padding: 10px 10px;
  144. border: 0px !important;
  145. }
  146. .grid1 td {
  147. border: 0px !important;
  148. border-bottom: 1px solid #d4d4d4 !important;
  149. color: #666;
  150. padding: 6px 10px 6px 10px;
  151. text-align: center;
  152. vertical-align: middle;
  153. }
  154. .grid1 td a {
  155. font-size: 11px;
  156. font-weight: bold;
  157. color: #3c94dc;
  158. text-decoration: underline;
  159. }
  160. .grid1 td a:hover {
  161. color: #333;
  162. }
  164. /***************End of GridView**************/
  165. /***********Tabular Div Styling**************/
  166. .parentDiv {
  167. width: 100%;
  168. float: left;
  169. }
  170. .gqmn03 {
  171. float: left;
  172. width: 100%;
  173. padding-bottom: 3px;
  174. display: none;
  175. }
  176. .divDivider {
  177. float: left;
  178. width: 100%;
  179. padding-bottom: 3px;
  180. margin-bottom: 0px;
  181. }
  182. .gqmn01sub {
  183. float: left;
  184. width: 100%;
  185. padding-bottom: 7px;
  186. }
  187. .gqmn01_lt {
  188. float: left;
  189. font-size: 11px;
  190. padding: 3px 10px 0 8px;
  191. padding-bottom: 10px;
  192. }
  193. .gqmn01_lt label {
  194. padding: 0 10px 0 0;
  195. }
  197. .gqmn01_rt {
  198. float: left;
  199. }
  200. .additionalInfo .gqmn01sub {
  201. width: 470px;
  202. float: left;
  203. padding: 0 0 0 0;
  204. }
  205. .subElements {
  206. width: 550px;
  207. float: left;
  208. padding: 0 0 0 0;
  209. }
  210. .gqmn03sub {
  211. width: 100%;
  212. float: left;
  213. padding: 0 0 0 0;
  214. }
  215. .additionalInfo .subText {
  216. width: 100%;
  217. padding-bottom: 7px;
  218. }
  219. .additionalInfo .subTextLabel {
  220. width: 190px;
  221. }
  222. .additionalInfo .txtbg02 {
  223. float: left;
  224. }
  225. .biggerTxt {
  226. width: 100%;
  227. padding-bottom: 7px;
  228. height: 30px;
  229. }
  230. .subText {
  231. float: left;
  232. }
  233. .subText label b {
  234. color: #CC0000;
  235. font-size: 10px;
  236. font-weight: normal;
  237. }
  238. .subTextLabel {
  239. width: 128px;
  240. padding-left: 8px;
  241. font-weight: normal;
  242. float: left;
  243. text-align: right;
  244. color: #666666;
  245. padding: 4px 8px 0 0;
  246. }
  248. /******End Of Tabular Div Styling*************/
  249. /************Form Elements TextBox Styles*************/
  250. .txtArea {
  251. border-radius: 5px;
  252. }
  253. .txtbg3 {
  254. border: 1px solid #c6c6c6;
  255. color: #333333;
  256. font-size: 11px;
  257. font-family: Arial, Helvetica, sans-serif;
  258. padding: 2px;
  259. width: 186px;
  260. float: left;
  261. border-radius: 5px;
  262. }
  263. .txtbg02 {
  264. width: 217px;
  265. height: 23px;
  266. border: 0;
  267. padding: 0 5px;
  268. line-height: 21px;
  269. border-radius: 5px;
  270. }
  272. /******End Of TextBox Styling***********/
  273. /***End of Page Div, TextBox,Dropdownlist,GridView Styling*****/
  274. /*************Width Section*************/
  275. .w100 {
  276. width: 100%;
  277. height: 35px;
  278. }
  279. .w100>p {
  280. width: 30%;
  281. float: left;
  282. text-align: center;
  283. }
  284. .w90 {
  285. width: 90%;
  286. }
  287. .w80 {
  288. width: 80%;
  289. }
  290. .w60 {
  291. width: 60%;
  292. }
  293. .w45 {
  294. width: 45%;
  295. }
  296. .w30 {
  297. width: 30%;
  298. }
  299. .w10 {
  300. width: 10%;
  301. }
  303. /*************Box Styling************/
  304. .h2txt {
  305. font-family: Arial, Helvetica, sans-serif;
  306. color: #333333;
  307. font-size: 13px;
  308. font-weight: bold;
  309. }
  310. .h2txt img {
  311. vertical-align: middle;
  312. cursor: pointer;
  313. float: left;
  314. margin-right: 8px;
  315. }
  316. .box1 {
  317. width: 1050px;
  318. padding: 5px 15px;
  319. background-color: Silver;
  320. color: white;
  321. margin-bottom: 20px;
  322. margin-top: 10px;
  323. border-radius: 5px;
  324. }
  325. .box2 {
  326. width: 790px;
  327. padding: 4px 15px;
  328. margin: 4px auto auto 5px;
  329. height: 20px;
  330. background-color: silver;
  331. /*#ED8029*/
  332. color: white;
  333. border-radius: 5px;
  334. }
  335. .transitionColor {
  336. -webkit-transition: background-color 5s;
  337. -moz-transition: background-color 5s;
  338. -o-transition: background-color 5s;
  339. -ms-transition: background-color 5s;
  340. transition: background-color 5s;
  341. background-color: #A7B526;
  342. }
  344. /**************End of Box Styling**********/
  345. /*************Height Section***************/
  346. .h100 {
  347. height: 100%;
  348. }
  349. .h50 {
  350. height: 50%;
  351. }
  352. .h30 {
  353. height: 30%;
  354. }
  356. /**************End of Height Section********************/
  357. /*******************Margin Section********************/
  358. .mt30 {
  359. margin-top: 30px;
  360. }
  361. .mt5 {
  362. margin-top: 5px;
  363. }
  364. .mtp5 {
  365. margin-top: 5%;
  366. }
  367. .w100 p {
  368. float: left;
  369. width: 30%;
  370. text-align: center;
  371. }
  372. .mtp10 {
  373. margin-top: 10%;
  374. }
  375. .mtp30 {
  376. margin-top: 30%;
  377. }
  378. .mlf5 {
  379. margin-left: 5%;
  380. }
  381. .mlf10 {
  382. margin-left: 10%;
  383. }
  384. .mlf25 {
  385. margin-left: 25%;
  386. }
  387. .left5 {
  388. float: left;
  389. margin-left: 5%;
  390. }
  392. /************End Of Margin Section****************/
  393. .amount {
  394. font-family: Arial, Helvetica, sans-serif;
  395. font-size: 20px;
  396. font-weight: normal;
  397. color: #006BB2;
  398. padding: 0px;
  399. }
  400. .amount A {
  401. color: #006BB2;
  402. text-decoration: none;
  403. }
  404. .PRICE A:hover {
  405. color: #006BB2;
  406. text-decoration: underline;
  407. }
  408. .amount2 {
  409. font-family: Arial, Helvetica, sans-serif;
  410. font-size: 12px;
  411. font-weight: normal;
  412. color: #1F1F99;
  413. padding: 0px;
  414. padding-right: 5px;
  415. vertical-align: bottom;
  416. margin-right: 5px;
  417. font-weight: bold;
  418. }
  419. .amount2 A {
  420. color: #1F1F99;
  421. text-decoration: none;
  422. }
  423. .amount2 A:hover {
  424. color: #1F1F99;
  425. text-decoration: underline;
  426. }

The following is the Markup file for it:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <title></title>
  6. <link rel="Stylesheet" type="text/css" href="Style.css" />
  7. <script type="text/javascript">
  8. function confirmCancellOrder(chkObj) {
  9. var checkBoxObj = chkObj;
  10. if (checkBoxObj.checked == true) {
  11. var x = confirm("Do you want to Cancelled Order?");
  12. if (x == true) {
  13. __doPostBack('<%=udpOrderDescription.ClientID %>', "");
  14. }
  15. else
  16. return false;
  17. }
  18. else {
  19. chkObj.checked = false;
  20. return false;
  21. }
  22. }
  23. function changeDeliveredQuantity(txtObj) {
  24. var textBoxObj = txtObj;
  25. if (textBoxObj.value == "") {
  26. textBoxObj.value = 0;
  27. alert('Enter a value');
  28. __doPostBack('<%=udpOrderDescription.ClientID %>', "");
  29. }
  30. else if (!isNaN(textBoxObj.value)) {
  31. __doPostBack('<%=udpOrderDescription.ClientID %>', "");
  32. }
  33. else {
  34. textBoxObj.value = 0;
  35. alert('Only Numeric values are allowed');
  36. }
  37. }
  38. </script>
  39. </head>
  40. <body>
  41. <form id="form1" runat="server">
  42. <div class="page">
  43. <asp:ScriptManager ID="ScriptManager1" runat="server">
  44. </asp:ScriptManager>
  45. <asp:UpdatePanel ID="udpOrderDescription" runat="server">
  46. <ContentTemplate>
  47. <asp:Repeater ID="parentRepeater" runat="server" OnItemDataBound="parentRepeater_ItemDataBound">
  48. <HeaderTemplate>
  49. <div class="parentDiv additionalInfo">
  50. <h2 class="h2txt box1">
  51. <asp:Label ID="Label1" Font-Bold="true" runat="server" Text="Online Computer Store"></asp:Label>
  52. </h2>
  53. </HeaderTemplate>
  54. <ItemTemplate>
  55. <div class="divDivider" id="divDetail1">
  56. <div class="subElements">
  57. <div class="subText">
  58. <label class="subTextLabel">
  59. Order ID:
  60. </label>
  61. <asp:Label ID="lblOrderID" runat="server" CssClass="txtbg3" Font-Bold="true" Text='<%#Eval("OrderID") %>'></asp:Label>
  62. </div>
  63. <div class="subText">
  64. <label class="subTextLabel">
  65. Member ID:
  66. </label>
  67. <asp:Label ID="lblMemberID" Font-Bold="true" runat="server" CssClass="txtbg3" Text='<%#Eval("Membership_ID") %>'></asp:Label>
  68. </div>
  69. <div class="subText">
  70. <label class="subTextLabel">
  71. Address:
  72. </label>
  73. <asp:TextBox ID="txtAddress" Text='<%#Eval("Address") %>' runat="server" Enabled="false"
  74. CssClass="txtArea" TextMode="MultiLine" Rows="2" Columns="35"></asp:TextBox>
  75. </div>
  76. <div class="subText">
  77. <label class="subTextLabel">
  78. Order Comments:
  79. </label>
  80. <asp:TextBox ID="txtOrderComments" Text='<%#Eval("order_comments") %>' runat="server"
  81. CssClass="txtArea" TextMode="MultiLine" Rows="2" Columns="35"></asp:TextBox>
  82. </div>
  83. </div>
  84. <div class="subElements">
  85. <div class="subText">
  86. <label class="subTextLabel">
  87. Order Date:
  88. </label>
  89. <asp:Label ID="lblOrderDate" runat="server" CssClass="txtbg3" Font-Bold="true" Text='<%#Convert.ToDateTime(Eval("Order_Date")).ToString("dd MMM yyyy") %>'></asp:Label>
  90. </div>
  91. <div class="subText">
  92. <label class="subTextLabel">
  93. Name:
  94. </label>
  95. <asp:Label ID="lblName" runat="server" CssClass="txtbg3" Font-Bold="true" Text='<%#Eval("MemberName") %>'></asp:Label>
  96. </div>
  97. <div class="subText">
  98. <label class="subTextLabel">
  99. Customer Instructions:
  100. </label>
  101. <asp:TextBox ID="txtCustInstruction" Enabled="false" runat="server" TextMode="MultiLine"
  102. CssClass="txtArea" Rows="2" Columns="35" Text='<%#Eval("Customer_Instruction") %>'></asp:TextBox>
  103. </div>
  104. <div class="subText">
  105. <label class="subTextLabel">
  106. Order Cancelled:<asp:HiddenField ID="hdnOrderID" runat="server" Value='<%#Eval("OrderID") %>' />
  107. </label>
  108. <asp:CheckBox ID="chkOrderCancelled" runat="server" AutoPostBack="true" onClick="javascript:return confirmCancellOrder(this);" />
  109. </div>
  110. </div>
  111. </div>
  112. <div class="divDivider" id="divDetail2">
  113. <asp:GridView ID="gvwProductDescription" runat="server" AutoGenerateColumns="false"
  114. CssClass="grid1" AlternatingRowStyle-CssClass="backGround02" ShowFooter="true"
  115. OnRowDataBound="gvwProductDescription_RowDataBound">
  116. <Columns>
  117. <asp:TemplateField HeaderText="Sr.No">
  118. <ItemTemplate>
  119. <asp:Label ID="lblSrNo" runat="server" Text='<%#Container.DataItemIndex + 1%>'></asp:Label>
  120. <asp:HiddenField ID="hdnGridOrderId" runat="server" Value='<%#Bind("OrderID") %>' />
  121. </ItemTemplate>
  122. </asp:TemplateField>
  123. <asp:BoundField DataField="ProdName" HeaderText="Product ID" />
  124. <asp:TemplateField HeaderText="Quantity">
  125. <ItemTemplate>
  126. <asp:Label ID="lblQuantity" runat="server" Text='<%#Bind("Quantity") %>'></asp:Label>
  127. </ItemTemplate>
  128. <FooterTemplate>
  129. <asp:Label ID="lblLabel" runat="server" Text="<b>Total Bill:</b>"></asp:Label>
  130. </FooterTemplate>
  131. </asp:TemplateField>
  132. <asp:BoundField DataField="MRP" HeaderText="MRP" />
  133. <asp:TemplateField HeaderText="Total">
  134. <ItemTemplate>
  135. <asp:Label ID="lblTotal" CssClass="amount2" runat="server" Text='<%#Bind("Total") %>'></asp:Label>
  136. </ItemTemplate>
  137. <FooterTemplate>
  138. <asp:Label ID="lblGrandTotal" CssClass="amount" runat="server"></asp:Label>
  139. <asp:Button ID="btnDelivered" runat="server" Text="Deliver" CommandName="Delivered"
  140. CssClass="addbtn" />
  141. </FooterTemplate>
  142. </asp:TemplateField>
  143. </Columns>
  144. </asp:GridView>
  145. </div>
  146. <div class="divDivider" id="divDetail3">
  147. <hr style="width: 100%; height: 10px; background-color: #0e0e6c; border: 2px solid silver;" />
  148. </div>
  149. </ItemTemplate>
  150. <FooterTemplate>
  151. <div class="divDivider">
  152. <asp:Button ID="btnFirst" runat="server" Text="<<" CssClass="left5" OnClick="CommonButton_Click" />
  153. <asp:Button ID="btnPrevious" runat="server" Text="<" CssClass="left5" OnClick="CommonButton_Click" />
  154. <asp:Button ID="btnNext" runat="server" Text=">" CssClass="left5" OnClick="CommonButton_Click" />
  155. <asp:Button ID="btnLast" runat="server" Text=">>" CssClass="left5" OnClick="CommonButton_Click" />
  156. </div>
  157. </div>
  158. </FooterTemplate>
  159. </asp:Repeater>
  160. </ContentTemplate>
  161. </asp:UpdatePanel>
  162. </div>
  163. </form>
  164. </body>
  165. </html>

The following is the source code for it:

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. using System.Data;
  8. using System.Data.OracleClient;
  9. public partial class _Default : System.Web.UI.Page
  10. {
  11. OracleConnection con;
  12. OracleDataAdapter da;
  13. DataSet ds;
  14. DataTable dtRepeaterTable;
  15. OracleCommand cmd;
  16. PagedDataSource pageDataSource = new PagedDataSource();
  17. private const string _dbCon = "DATA SOURCE=DHQMDB;WORD=hqm321;PERSIST SECURITY INFO=True;USER ID=HQM_ADMIN";
  18. public int CurrentPage
  19. {
  20. get
  21. {
  22. // look for current page in ViewState
  23. object o = this.ViewState["_CurrentPage"];
  24. if (o == null)
  25. return 0; // default to showing the first page
  26. else
  27. return (int)o;
  28. }
  29. set
  30. {
  31. this.ViewState["_CurrentPage"] = value;
  32. }
  33. }
  34. protected void Page_Load(object sender, EventArgs e)
  35. {
  36. if (!IsPostBack)
  37. LoadAllCurrentOrders();
  38. }
  39. /// <summary>
  40. /// This function is used for loading all the current and active order which
  41. /// needs to be delivered
  42. /// </summary>
  43. private void LoadAllCurrentOrders()
  44. {
  45. if (ViewState["repeaterData"] == null)
  46. {
  47. con = new OracleConnection(_dbCon);
  48. da = new OracleDataAdapter("prc_getallmemberorders", con);
  49. da.SelectCommand.CommandType = CommandType.StoredProcedure;
  50. OracleParameter outPara = new OracleParameter("tempcursor", OracleType.Cursor);
  51. outPara.Direction = ParameterDirection.Output;
  52. da.SelectCommand.Parameters.Add(outPara);
  53. ds = new DataSet();
  54. da.Fill(ds);
  55. if (ds.Tables[0].Rows.Count > 0)
  56. {
  57. ViewState["currentOrders"] = ds;
  58. dtRepeaterTable = new DataTable();
  59. string[] parentCols = { "OrderId", "Membership_Id", "Order_Date", "MemberName", "Customer_Instruction", "OrderValue", "Order_Comments", "Address" };
  60. foreach (string str in parentCols)
  61. {
  62. dtRepeaterTable.Columns.Add(str);
  63. }
  64. var varHeadingTable = ds.Tables[0].AsEnumerable().GroupBy(x => x["OrderID"].ToString()).Select(grp => grp.First()).Distinct();
  65. foreach (var res in varHeadingTable)
  66. {
  67. DataRow dr = dtRepeaterTable.NewRow();
  68. dr[0] = res["OrderID"];
  69. dr[1] = res["Membership_ID"];
  70. dr[2] = res["Order_Date"];
  71. dr[3] = res["MemberTitle"] + " " + res["MemberName"];
  72. dr[4] = res["Customer_Instruction"];
  73. dr[5] = res["Order_Value"];
  74. dr[6] = res["order_comments"];
  75. dr[7] = res["Address"];
  76. dtRepeaterTable.Rows.Add(dr);
  77. }
  78. ViewState["repeaterData"] = dtRepeaterTable;
  79. }
  80. }
  81. else
  82. dtRepeaterTable = (DataTable)ViewState["repeaterData"];
  83. if (dtRepeaterTable.Rows.Count > 0)
  84. {
  85. pageDataSource.DataSource = dtRepeaterTable.DefaultView;
  86. pageDataSource.PageSize = 2;
  87. pageDataSource.AllowPaging = true;
  88. pageDataSource.CurrentPageIndex = CurrentPage;
  89. ViewState["totalCount"] = pageDataSource.PageCount;
  90. parentRepeater.DataSource = pageDataSource;
  91. parentRepeater.DataBind();
  92. RepeaterItem footerRepeaterItem = (RepeaterItem)parentRepeater.Controls[parentRepeater.Controls.Count - 1];
  93. Button btnFirst = (Button)footerRepeaterItem.FindControl("btnFirst");
  94. Button btnPrevious = (Button)footerRepeaterItem.FindControl("btnPrevious");
  95. Button btnNext = (Button)footerRepeaterItem.FindControl("btnNext");
  96. Button btnLast = (Button)footerRepeaterItem.FindControl("btnLast");
  97. btnFirst.Enabled = !pageDataSource.IsFirstPage;
  98. btnPrevious.Enabled = !pageDataSource.IsFirstPage;
  99. btnNext.Enabled = !pageDataSource.IsLastPage;
  100. btnLast.Enabled = !pageDataSource.IsLastPage;
  101. }
  102. }
  103. private DataTable LoadOrderDetails(string orderID)
  104. {
  105. ds = (DataSet)ViewState["currentOrders"];
  106. DataTable dtGridTable = new DataTable();
  107. var varGridTable = ds.Tables[0].AsEnumerable().Where(x => x["OrderID"].ToString() == orderID).Select(d => d);
  108. string[] gridCols = { "OrderID", "ProdName", "Quantity", "MRP", "Total" };
  109. foreach (string str in gridCols)
  110. dtGridTable.Columns.Add(str);
  111. foreach (var res in varGridTable)
  112. {
  113. DataRow dr = dtGridTable.NewRow();
  114. dr[0] = res["OrderID"];
  115. dr[1] = res["ProdName"];
  116. dr[2] = res["Quantity"];
  117. dr[3] = res["MRP"];
  118. dr[4] = float.Parse(res["Quantity"].ToString()) * float.Parse(res["MRP"].ToString());
  119. dtGridTable.Rows.Add(dr);
  120. }
  121. return dtGridTable;
  122. }
  123. protected void parentRepeater_ItemDataBound(object sender, RepeaterItemEventArgs e)
  124. {
  125. if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
  126. {
  127. Label lblOrderID = (Label)e.Item.FindControl("lblOrderID");
  128. GridView gvwProducts = (GridView)e.Item.FindControl("gvwProductDescription");
  129. DataTable dt = LoadOrderDetails(lblOrderID.Text);
  130. ViewState["gridTable"] = dt;
  131. gvwProducts.DataSource = dt;
  132. gvwProducts.DataBind();
  133. }
  134. }
  135. protected void gvwProductDescription_RowDataBound(object sender, GridViewRowEventArgs e)
  136. {
  137. if (e.Row.RowType == DataControlRowType.Footer)
  138. {
  139. GridView gvwProduct = (GridView)sender;
  140. Label lblGrandTotal = (Label)e.Row.FindControl("lblGrandTotal"); ;
  141. if (ViewState["gridTable"] != null)
  142. {
  143. DataTable dt = (DataTable)ViewState["gridTable"];
  144. float total = dt.AsEnumerable().Sum(x => float.Parse(x["Total"].ToString()));
  145. lblGrandTotal.Text = total.ToString();
  146. }
  147. }
  148. }
  149. #region Pagination Events
  150. protected void CommonButton_Click(object sender, EventArgs e)
  151. {
  152. Button b = (Button)sender;
  153. if (b.ID == "btnFirst")
  154. {
  155. CurrentPage = 0;
  156. LoadAllCurrentOrders();
  157. }
  158. else if (b.ID == "btnPrevious")
  159. {
  160. CurrentPage -= 1;
  161. LoadAllCurrentOrders();
  162. }
  163. else if (b.ID == "btnNext")
  164. {
  165. CurrentPage += 1;
  166. LoadAllCurrentOrders();
  167. }
  168. else if (b.ID == "btnLast")
  169. {
  170. CurrentPage = Convert.ToInt32(ViewState["totalCount"].ToString()) - 1;
  171. LoadAllCurrentOrders();
  172. }
  173. }
  174. #endregion
  175. }

Here I've used ViewState but of course there are multiple ways to maintain the state of the application. You could go for session or any way you prefer the most. This is just a dummy application for demonstration purpose.

Hope you liked the article.