Post
Ask Question

How to Create Dynamic Tab Control With Filter and Condition

The is the step-by-step procedure for creating dynamic tabs using SQL Server 2008 and above with conditions.

Program output

Tab Output

Step 1: Create .dbo (table) and sp (Stored Procedure) that is displayed at the front.

Table City

City Table

Table Property

Table Property

Stored Procedures

Stored Procedure
SQLServer Stored Procedure

Step 2: Write the Business Access Layer (BAL) that is in the App_Code Folder with this code:

 

  1. public String View_All_HotProperty(String PN, String PS, String PB)  
  2. {  
  3. try  
  4. {  
  5. output = String.Empty;  
  6. dt = new DataTable();  
  7. DataTable dt11 = new DataTable();  
  8. DataTable dt1 = new DataTable();  
  9. DataTable dt2 = new DataTable();  
  10. DataTable dt3 = new DataTable();  
  11. DataTable dt4 = new DataTable();  
  12. DataTable dt5 = new DataTable();  
  13. DataTable dt6 = new DataTable();  
  14. DataTable dt7 = new DataTable();  
  15. DataTable duplidt = new DataTable();  
  16. int c = 0;  
  17. int c1 = 0;  
  18. int t = 0;  
  19. int jump = 0;  
  20. string match = string.Empty;  
  21. int count=1;  
  22. int ii=0;  
  23. dt = objDal.GetDataTableHot(ref dt, "sp_View_All_HotProperty3");  
  24. dt1 = objDal.GetDataTableHot(ref dt1, "sp_View_All_HotProperty1");  
  25. dt2 = objDal.GetDataTableHot(ref dt2, "sp_View_All_HotProperty2");  
  26. dt3 = objDal.GetDataTableHot(ref dt3, "sp_View_All_HotProperty");  
  27. dt4 = objDal.GetDataTableHot(ref dt4, "sp_View_All_HotProperty4");  
  28. dt5 = objDal.GetDataTableHot(ref dt5, "sp_View_All_HotProperty5");  
  29. dt6 = objDal.GetDataTableHot(ref dt6, "sp_View_All_HotProperty6");  
  30. dt7 = objDal.GetDataTableHot(ref dt7, "sp_View_All_HotProperty7");  
  31. //dt1= dt.Select("sateid like '%"+1+"%'");  
  32. output = String.Empty;  
  33. output += "<div class=\"container\">";  
  34. output += "<ul class=\"tabs\">";  
  35. output += "<li><a href=\"#tab1\">Dubai</a></li>";  
  36. output += "<li><a href=\"#tab2\">Ajman</a></li>";  
  37. output += "<li><a href=\"#tab3\">Al ain</a></li>";  
  38. output += "<li><a href=\"#tab4\">Abu dhabi</a></li>";  
  39. output += "<li><a href=\"#tab5\">Fujairah</a></li>";  
  40. output += "<li><a href=\"#tab6\">Ras al kahimah</a></li>";  
  41. output += "<li><a href=\"#tab7\">Sharjah</a></li>";  
  42. output += "<li><a href=\"#tab8\">Umm al quwain</a></li>";  
  43. output += "</ul>";  
  44. output += "<div class=\"tab_container\">";  
  45. //For Tab1  
  46. output += "<div id=tab1 class=\"tab_content\">";  
  47. output += "<div class=\"pantool\">";  
  48. //For Abudhabi  
  49. output += "<div id=propheading><u>Dubai Properties For Sale and Rent</u> </div>";  
  50. // output += "<div id=propheading><hr></hr></div>";  
  51. output += "<div class=\"pan_tab1\">";  
  52. //for (int i = dt.Rows.Count; ; i++)  
  53. for (ii = dt.Rows.Count - 1; ii >= 0; ii--)  
  54. {  
  55. c = int.Parse(dt.Rows[0]["cityid"].ToString());  
  56. t = 0;  
  57. for (int j = 0; j < dt.Rows.Count; j++)  
  58. {  
  59. if (c == int.Parse(dt.Rows[j]["cityid"].ToString()))  
  60. {  
  61. t = t + 1;  
  62. jump = int.Parse(dt.Rows[j]["cityid"].ToString());  
  63. }  
  64. }  
  65. output += "<div class=\"pan_tab\">›  <a href='SearchwithLocation.aspx?id=" + dt.Rows[0]["cityid"].ToString() + "&for=" + dt.Rows[0]["PropFor"].ToString() + "'>" + dt.Rows[0]["cityname"].ToString() + "(" + t + ")" + "</a></div>";  
  66. output += "<div class=\"PropFor\">‹  " + dt.Rows[0]["PropFor"].ToString() + "</div>";  

Output

This output string variable provides this result:

First Tab

 

  1. match = dt.Rows[0]["cityname"].ToString();  
  2. foreach (DataRow dr in dt.Rows)  
  3. {  
  4. if (dr["cityname"].ToString() == match)  
  5. {  
  6. dr.Delete();  
  7. }  
  8. }  
  9. dt.AcceptChanges();  
  10. count = dt.Rows.Count;  
  11. ii = count;  
  12. output += "</div>";  
  13. //For Abudhabi  
  14. output += "</div>";  
  15. output += "</div>";  
  16. //For Tab2  
  17. output += "<div id=tab2 class=\"tab_content\">";  
  18. output += "<div class=\"pantool\">";  
  19. //For sale start  
  20. output += "<div id=propheading><u>Ajman Properties For Sale and Rent</u> </div>";  
  21. output += "<div class=\"pan_tab1\">";  
  22. for (ii = dt1.Rows.Count - 1; ii >= 0; ii--)  
  23. {  
  24. c = int.Parse(dt1.Rows[0]["cityid"].ToString());  
  25. t = 0;  
  26. for (int j = 0; j < dt1.Rows.Count; j++)  
  27. {  
  28. if (c == int.Parse(dt1.Rows[j]["cityid"].ToString()))  
  29. {  
  30. t = t + 1;  
  31. jump = int.Parse(dt1.Rows[j]["cityid"].ToString());  
  32. }  
  33. }  
  34. output += "<div class=\"pan_tab\">›  <a href='SearchwithLocation.aspx?id=" + dt1.Rows[0]["cityid"].ToString() + "'>" + dt1.Rows[0]["cityname"].ToString() + "(" + t + ")" + "</a></div>";  
  35. output += "<div class=\"PropFor\">‹  " + dt1.Rows[0]["PropFor"].ToString() + "</div>";  

Output

This output string variable provides this result:

Second Tab

  1. //For matching  
  2. match = dt1.Rows[0]["cityname"].ToString();  
  3. foreach (DataRow dr in dt1.Rows)  
  4. {  
  5. if (dr["cityname"].ToString() == match)  
  6. {  
  7. dr.Delete();  
  8. }  
  9. }  
  10. dt1.AcceptChanges();  
  11. count = dt1.Rows.Count;  
  12. ii = count;  
  13. }  
  14. output += "</div>";  
  15. //For sale End  
  16. output += "</div>";  
  17. output += "</div>";  
  18. //For Tab3  
  19. output += "<div id=tab3 class=\"tab_content\">";  
  20. output += "<div class=\"pantool\">";  
  21. //For Abudhabi  
  22. output += "<div id=propheading><u>Al ain Properties For Sale and Rent</u> </div>";  
  23. output += "<div class=\"pan_tab1\">";  
  24. for (ii = dt2.Rows.Count - 1; ii >= 0; ii--)  
  25. {  
  26. c = int.Parse(dt2.Rows[0]["cityid"].ToString());  
  27. t = 0;  
  28. for (int j = 0;j < dt2.Rows.Count; j++)  
  29. {  
  30. if (c == int.Parse(dt2.Rows[j]["cityid"].ToString()))  
  31. {  
  32. t = t + 1;  
  33. jump = int.Parse(dt2.Rows[j]["cityid"].ToString());  
  34. }  
  35. }  
  36. output += "<div class=\"pan_tab\">›  <a href='SearchwithLocation.aspx?id=" + dt2.Rows[0]["cityid"].ToString() + "'>" + dt2.Rows[0]["cityname"].ToString() + "(" + t + ")" + "</a></div>";  
  37. output += "<div class=\"PropFor\">‹  " + dt2.Rows[0]["PropFor"].ToString() + "</div>";   

Output

This output string variable provides this result:

Third Tab

  1. match = dt2.Rows[0]["cityname"].ToString();  
  2. foreach (DataRow dr in dt2.Rows)  
  3. {  
  4. if (dr["cityname"].ToString() == match)  
  5. {  
  6. dr.Delete();  
  7. }  
  8. }  
  9. dt2.AcceptChanges();  
  10. count = dt2.Rows.Count;  
  11. ii = count;  
  12. }  
  13. output += "</div>";  
  14. //For Abudhabi  
  15. output += "</div>";  
  16. output += "</div>";  
  17. //For Tab4  
  18. output += "<div id=tab4 class=\"tab_content\">";  
  19. output += "<div class=\"pantool\">";  
  20. //For Abudhabi  
  21. output += "<div id=propheading><u>Abu Dhabi Properties For Sale and Rent</u> </div>";  
  22. output += "<div class=\"pan_tab1\">";  
  23. for (ii = dt3.Rows.Count - 1; ii >= 0; ii--)  
  24. {  
  25. c = int.Parse(dt3.Rows[0]["cityid"].ToString());  
  26. t = 0;  
  27. for (int j = 0; j < dt3.Rows.Count; j++)  
  28. {  
  29. if (c == int.Parse(dt3.Rows[j]["cityid"].ToString()))  
  30. {  
  31. t = t + 1;  
  32. jump = int.Parse(dt3.Rows[j]["cityid"].ToString());  
  33. }  
  34. }  
  35. output += "<div class=\"pan_tab\">› <a href='SearchwithLocation.aspx?id=" + dt3.Rows[0]["cityid"].ToString() + "'>" + dt3.Rows[0]["cityname"].ToString() + "(" + t + ")" + "</a></div>";  
  36. output += "<div class=\"PropFor\">‹  " + dt3.Rows[0]["PropFor"].ToString() + "</div>";   

Output

This output string variable provides this result:

Fourth Tab

  1. match = dt3.Rows[0]["cityname"].ToString();  
  2. foreach (DataRow dr in dt3.Rows)  
  3. {  
  4. if (dr["cityname"].ToString() == match)  
  5. {  
  6. dr.Delete();  
  7. }  
  8. }  
  9. dt3.AcceptChanges();  
  10. count = dt3.Rows.Count;  
  11. ii = count;  
  12. }  
  13. output +="</div>";  
  14. //For Abudhabi  
  15. output += "</div>";  
  16. output += "</div>";  
  17. //For Tab5  
  18. output += "<div id=tab5 class=\"tab_content\">";  
  19. output += "<div class=\"pantool\">";  
  20. //For Abudhabi  
  21. output += "<div id=propheading><u>Fujairah Properties For Sale and Rent</u> </div>";  
  22. output += "<div class=\"pan_tab1\">";  
  23. for (ii = dt4.Rows.Count - 1; ii >= 0; ii--)  
  24. {  
  25. c = int.Parse(dt4.Rows[0]["cityid"].ToString());  
  26. t = 0;  
  27. for (int j = 0; j < dt4.Rows.Count; j++)  
  28. {  
  29. if (c == int.Parse(dt4.Rows[j]["cityid"].ToString()))  
  30. {  
  31. t = t + 1;  
  32. jump = int.Parse(dt4.Rows[j]["cityid"].ToString());  
  33. }  
  34. }  
  35. output += "<div class=\"pan_tab\">›  <a href='SearchwithLocation.aspx?id=" + dt4.Rows[0]["cityid"].ToString() + "'>" + dt4.Rows[0]["cityname"].ToString() + "(" + t + ")" + "</a></div>";  
  36. output += "<div class=\"PropFor\">‹  " + dt4.Rows[0]["PropFor"].ToString() + "</div>";   

Output

This output string variable provides this result :

Fifth Tab

  1. match = dt4.Rows[0]["cityname"].ToString();  
  2. foreach (DataRow dr in dt4.Rows)  
  3. {  
  4. if (dr["cityname"].ToString() == match)  
  5. {  
  6. dr.Delete();  
  7. }  
  8. }  
  9. dt4.AcceptChanges();  
  10. count = dt4.Rows.Count;  
  11. ii = count;  
  12. }  
  13. output += "</div>";  
  14. //For Abudhabi  
  15. output += "</div>";  
  16. output += "</div>";  
  17. //For Tab6  
  18. output += "<div id=tab6 class=\"tab_content\">";  
  19. output += "<div class=\"pantool\">";  
  20. //For Abudhabi  
  21. output += "<div id=propheading><u>Ras al kahimah Properties For Sale and Rent</u> </div>";  
  22. output += "<div class=\"pan_tab1\">";  
  23. for (ii = dt5.Rows.Count - 1; ii >= 0; ii--)  
  24. {  
  25. c = int.Parse(dt5.Rows[0]["cityid"].ToString());  
  26. t = 0;  
  27. for (int j = 0; j < dt5.Rows.Count; j++)  
  28. {  
  29. if (c == int.Parse(dt5.Rows[j]["cityid"].ToString()))  
  30. {  
  31. t = t + 1;  
  32. jump = int.Parse(dt5.Rows[j]["cityid"].ToString());  
  33. }  
  34. }  
  35. output += "<div class=\"pan_tab\">›  <a href='SearchwithLocation.aspx?id=" + dt5.Rows[0]["cityid"].ToString() + "'>" + dt5.Rows[0]["cityname"].ToString() + "(" + t + ")" + "</a></div>";  
  36. output += "<div class=\"PropFor\">‹  " + dt5.Rows[0]["PropFor"].ToString() + "</div>";   

Output

This output string variable provides this result :

Six Tab

  1. match = dt5.Rows[0]["cityname"].ToString();  
  2. foreach (DataRow dr in dt5.Rows)  
  3. {  
  4. if (dr["cityname"].ToString() == match)  
  5. {  
  6. dr.Delete();  
  7. }  
  8. }  
  9. dt5.AcceptChanges();  
  10. count = dt5.Rows.Count;  
  11. ii = count;  
  12. }  
  13. output += "</div>";  
  14. //For Abudhabi  
  15. output += "</div>";  
  16. output += "</div>";  
  17. //For Tab7  
  18. output += "<div id=tab7 class=\"tab_content\">";  
  19. output += "<div class=\"pantool\">";  
  20. //For Abudhabi  
  21. output += "<div id=propheading><u>Sharjah Properties For Sale and Rent</u> </div>";  
  22. output += "<div class=\"pan_tab1\">";  
  23. for (ii = dt6.Rows.Count - 1; ii >= 0; ii--)  
  24. {  
  25. c = int.Parse(dt6.Rows[0]["cityid"].ToString());  
  26. t = 0;  
  27. for (int j = 0; j < dt6.Rows.Count; j++)  
  28. {  
  29. if (c == int.Parse(dt6.Rows[j]["cityid"].ToString()))  
  30. {  
  31. t = t + 1;  
  32. jump = int.Parse(dt6.Rows[j]["cityid"].ToString());  
  33. }  
  34. }  
  35. output += "<div class=\"pan_tab\">›  <a href='SearchwithLocation.aspx?id=" + dt6.Rows[0]["cityid"].ToString() + "'>" + dt6.Rows[0]["cityname"].ToString() + "(" + t + ")" + "</a></div>";  
  36. output += "<div class=\"PropFor\">‹  " + dt6.Rows[0]["PropFor"].ToString() + "</div>";   

Output

This output string variable provides this result:

Seventh Tab

  1. match = dt6.Rows[0]["cityname"].ToString();  
  2. foreach (DataRow dr in dt6.Rows)  
  3. {  
  4. if (dr["cityname"].ToString() == match)  
  5. {  
  6. dr.Delete();  
  7. }  
  8. }  
  9. dt6.AcceptChanges();  
  10. count = dt6.Rows.Count;  
  11. ii = count;  
  12. }  
  13. output += "</div>";  
  14. //For Abudhabi  
  15. output += "</div>";  
  16. output += "</div>";  
  17. //For Tab8  
  18. output += "<div id=tab8 class=\"tab_content\">";  
  19. output += "<div class=\"pantool\">";  
  20. //For Abudhabi  
  21. output += "<div id=propheading><u>Umm al quwain Properties For Sale and Rent</u> </div>";  
  22. output += "<div class=\"pan_tab1\">";  
  23. for (ii = dt7.Rows.Count - 1; ii >= 0; ii--)  
  24. {  
  25. c = int.Parse(dt7.Rows[0]["cityid"].ToString());  
  26. t = 0;  
  27. for (int j = 0; j < dt7.Rows.Count; j++)  
  28. {  
  29. if (c == int.Parse(dt7.Rows[j]["cityid"].ToString()))  
  30. {  
  31. t = t + 1;  
  32. jump = int.Parse(dt7.Rows[j]["cityid"].ToString());  
  33. }  
  34. }  
  35. output += "<div class=\"pan_tab\">›  <a href='SearchwithLocation.aspx?id=" + dt7.Rows[0]["cityid"].ToString() + "'>" + dt7.Rows[0]["cityname"].ToString() + "(" + t + ")" + "</a></div>";  
  36. output += "<div class=\"PropFor\">‹  " + dt7.Rows[0]["PropFor"].ToString() + "</div>";   

Output

This output string variable provides this result:

Eighth Tab

  1. match = dt7.Rows[0]["cityname"].ToString();  
  2. foreach (DataRow dr in dt7.Rows)  
  3. {  
  4. if (dr["cityname"].ToString() == match)  
  5. {  
  6. dr.Delete();  
  7. }  
  8. }  
  9. dt7.AcceptChanges();  
  10. count = dt7.Rows.Count;  
  11. ii = count;  
  12. }  
  13. output += "</div>";  
  14. //For Abudhabi  
  15. output += "</div>";  
  16. output += "</div>";  
  17. //End Any Tab  
  18. output += "</div>";  
  19. output += "</div>";  
  20. return output;  
  21. }  
  22. catch (Exception ex)  
  23. {  
  24. }  
  25. return output;  
  26. }   

Note: This code also covers the deletion of duplicate data from a column with a condition. 

  1. match = dt7.Rows[0]["cityname"].ToString();  
  2. foreach (DataRow dr in dt7.Rows)  
  3. {  
  4. if (dr["cityname"].ToString() == match)  
  5. {  
  6. dr.Delete();  
  7. }  
  8. }  
  9. dt7.AcceptChanges();   

Match and delete data from a row and update the datatable.

Step 3: Call the above function at the .cs page with the following code:

  1. if (!IsPostBack)  
  2. output = objProject.View_All_HotProperty("1", "25", "5");   

Step 4: Call the above function at the .cs page with the following code:

Step 5: For Tab decoration use this jQuery and CSS:
 

 

  1. <script type="text/javascript">  
  2.     $(document).ready(function () {  
  3.         //Default Action  
  4.         $(".tab_content").hide(); //Hide all content  
  5.         $("ul.tabs li:first").addClass("active").show(); //Activate first tab  
  6.         $(".tab_content:first").show(); //Show first tab content  
  7.         //On Click Event  
  8.         $("ul.tabs li").click(function () {  
  9.             $("ul.tabs li").removeClass("active"); //Remove any "active" class  
  10.             $(this).addClass("active"); //Add "active" class to selected tab  
  11.             $(".tab_content").hide(); //Hide all tab content  
  12.             var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content  
  13.             $(activeTab).fadeIn(); //Fade in the active content  
  14.             return false;  
  15.         });  
  16.     });  
  17. </script>  
  18. <link href="TABSheet.css" rel="stylesheet" type="text/css" />  

 

TABSheet.css

  1. .container {width:auto; margin: 0px 0px 0px 0px;}  
  2. ul.tabs {  
  3. margin: 0;  
  4. padding: 0;  
  5. float: left;  
  6. list-style: none;  
  7. height: 34px;  
  8. border-bottom: 1px solid #999;  
  9. border-left: 1px solid #999;  
  10. border-right: 1px solid #1383A6;  
  11. width:630px;  
  12. background-color :#1383A6;  
  13. }  
  14. ul.tabs li {  
  15. float: left;  
  16. margin: 0;  
  17. padding: 0;  
  18. height: 31px;  
  19. line-height: 31px;  
  20. border: 1px solid #1383A6;  
  21. border-left: none;  
  22. margin-bottom:5px;  
  23. background:#1383A6;  
  24. /*background-image:url(images/banner-Head.png);*/  
  25. overflow: hidden;  
  26. position: relative;  
  27. width:auto;  
  28. }  
  29. ul.tabs li a {  
  30. text-decoration: none;  
  31. color: #FFFFFF;  
  32. display:block;  
  33. font-size: 1.2em;  
  34. padding: 0 8px;  
  35. border: 1px solid #1383A6;  
  36. outline: none;  
  37. }  
  38. ul.tabs li a:hover {  
  39. background:white;  
  40. color:Black ;  
  41. }  
  42. html ul.tabs li.active, html ul.tabs li.active a:hover {  
  43. background:#999;  
  44. color:#000000;  
  45. border-bottom:1px solid #fff;  
  46. }  
  47. .tab_container{  
  48. border: 0.1em solid #C0C0C0;  
  49. border-top: none;  
  50. clear: both;  
  51. float: left;  
  52. width: 100%;  
  53. background:#fff;  
  54. -moz-border-radius-bottomright: 5px;  
  55. -khtml-border-radius-bottomright: 5px;  
  56. -webkit-border-bottom-right-radius: 5px;  
  57. -moz-border-radius-bottomleft: 5px;  
  58. -khtml-border-radius-bottomleft: 5px;  
  59. -webkit-border-bottom-left-radius: 5px;  
  60. }  
  61. .tab_content {  
  62. padding: 20px;  
  63. font-size: 1.2em;  
  64. }  
  65. .tab_content h2 {  
  66. font-weight: normal;  
  67. padding-bottom: 10px;  
  68. border-bottom: 1px dashed #ddd;  
  69. font-size: 1.8em;  
  70. }  
  71. .tab_content h3 a{  
  72. color: #254588;  
  73. }  
  74. .tab_content img {  
  75. float: left;  
  76. margin: 0 20px 20px 0;  
  77. border: 1px solid #ddd;  
  78. padding: 5px;  
  79. }  
  80. .toolbar ul {  
  81. display:table-row;  
  82. }  
  83. .toolbar ul li  
  84. {  
  85. display: table-cell;  
  86. height:auto;  
  87. list-style-type: none;  
  88. margin: 10px;  
  89. vertical-align: middle;  
  90. }  
  91. .toolbar ul li a {  
  92. display:table-cell;  
  93. vertical-align: middle;  
  94. height:auto;  
  95. }  
  96. .toolbar ul li.button a {  
  97. height:50px;  
  98. border: solid 1px black;  
  99. }  
  100. .pantool  
  101. {  
  102. width:600px;  
  103. float:left;  
  104. height:210px;  
  105. border:solid 0px black;  
  106. }  
  107. .tab2_pan  
  108. {  
  109. width:200px;  
  110. height:auto;  
  111. float:left;  
  112. border:solid 0px black;  
  113. }  
  114. .pan_tab  
  115. {  
  116. width:150px;  
  117. float:left;  
  118. text-align:left;  
  119. }  
  120. .pan_tab1  
  121. {  
  122. height:200px;  
  123. float:left;  
  124. }  
  125. #propheading  
  126. {  
  127. float:none;  
  128. color:#1383A6;  
  129. font-family:Verdana;font-size:medium;text-decoration:uderline;  
  130. text-align :left;  
  131. }  
  132. .PropFor  
  133. {  
  134. width:150px;  
  135. float :left;  
  136. text-align :left;  
  137. color:#1383A6;  
  138. }   

Output

This output string variable provides this final result with select first tab:

Final Result

To see all the tab results, click one tab for the opt specific output by location.

Note: This code will make 8 tabs with conditions that you gave from the SQL Server side.

I hope this article is very valuable and profitable for making attractive dynamic tabs using SQL Server.


Similar Articles