Post
Ask Question

GridView Inside Repeater Control in ASP.Net

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');  
  55.   
  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. }  
  26.   
  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. }  
  47.   
  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. }  
  58.   
  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. }  
  72.   
  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. }  
  119.   
  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. }  
  163.   
  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. }  
  196.   
  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. }  
  247.   
  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. }  
  271.   
  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. }  
  302.   
  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. }  
  343.   
  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. }  
  355.   
  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. }  
  391.   
  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.


Similar Articles