Hi jordan,
I have created a sample which full fill your requirement you need to modify the code according to your requirement.
SQL
CREATE TABLE tblColorProduct(ProductID INT,ColorID INT,ProductName VARCHAR(50), imgExtension VARCHAR(60), CreatedBy VARCHAR(50), CreatedDate VARCHAR(50))
INSERT INTO tblColorProduct VALUES(1, 1, 'Chrysanthemum','.jpg','Test','12/05/2016')
INSERT INTO tblColorProduct VALUES(2, 2, 'Desert','.jpg','Test','12/05/2016')
INSERT INTO tblColorProduct VALUES(3, 3, 'Hydrangeas','.jpg','Test','12/05/2016')
INSERT INTO tblColorProduct VALUES(4, 4, 'Jellyfish','.jpg','Test','12/05/2016')
INSERT INTO tblColorProduct VALUES(5, 5, 'Koala','.jpg','Test','12/05/2016')
INSERT INTO tblColorProduct VALUES(6, 1, 'Lighthouse','.jpg','Test','12/05/2016')
INSERT INTO tblColorProduct VALUES(7, 2, 'Penguins','.jpg','Test','12/05/2016')
INSERT INTO tblColorProduct VALUES(8, 3, 'Tulips','.jpg','Test','12/05/2016')
INSERT INTO tblColorProduct VALUES(9, 4, 'Product10','.jpg','Test','12/05/2016')
INSERT INTO tblColorProduct VALUES(10, 5,'Product1','.jpg','Test','12/05/2016')
INSERT INTO tblColorProduct VALUES(11, 1,'Product2','.jpg','Test','12/05/2016')
INSERT INTO tblColorProduct VALUES(12, 2,'Product3','.jpg','Test','12/05/2016')
INSERT INTO tblColorProduct VALUES(13, 3,'Product4','.jpg','Test','12/05/2016')
INSERT INTO tblColorProduct VALUES(14, 4,'Product5','.jpg','Test','12/05/2016')
INSERT INTO tblColorProduct VALUES(15, 5,'Product6','.jpg','Test','12/05/2016')
INSERT INTO tblColorProduct VALUES(16, 1,'Product7','.jpg','Test','12/05/2016')
INSERT INTO tblColorProduct VALUES(17, 2,'Product8','.jpg','Test','12/05/2016')
INSERT INTO tblColorProduct VALUES(18, 3,'Product9','.jpg','Test','12/05/2016')
HTML
<div>
<div>
<input type="button" id="btnShow" value="Show Popup" />
<div id="dialog" style="display: none" align="center">
<button id="btnApply" runat="server" class="btn applyFilters lfloat">
APPLY</button>
<span class="sd-icon close-adv sd-icon-delete-sign"></span>
<ul>
<li>
<label>
<ul class="checkbox-grid">
<ul id="list" runat="server">
</ul>
</ul>
</label>
</li>
</ul>
</div>
<div id="filters" runat="server">
</div>
</div>
<div>
<%--<tr>
<td colspan="2">
<div class="searchresults" runat="server" id="resultdata">
</div>
</td>
</tr>--%>
<div id="Div2" runat="server">
</div>
</div>
</div>
<div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-git2.js" type="text/javascript"></script>
<%--<link href="StyleSheet.css" rel="stylesheet" type="text/css" />--%>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
<link href="https://i3.sdlcdn.com/css/17jan1484753660937/snap/pages/searchResult/scss/searchResult.min.css"
rel="stylesheet" type="text/css" />
<link href="https://i2.sdlcdn.com/css/17jan1484753660937/snap/common/scss/base.min.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
modal: true,
autoOpen: false,
width: 877,
height: 500
});
$("#btnShow").click(function () {
$('#dialog').dialog('open');
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$('[id*=btnApply]').on('click', function () {
var category_list = [];
$('#list :input:checked').each(function () {
var category = $(this).val();
category_list.push(category);
});
if (category_list.length == 0)
$('.resultblock').fadeIn();
else {
$('.resultblock').each(function () {
var item = $(this).attr('data-tag');
if (jQuery.inArray(item, category_list) > -1) {
$(this).fadeIn('slow');
}
else {
$(this).hide();
}
});
}
$('#dialog').dialog('close');
});
});
</script>
</div>
C#
protected void Page_Load(object sender, EventArgs e)
{
cldo();
}
public void cldo()
{
string str = string.Empty;
string str1 = string.Empty;
DataTable dtColorTable = new DataTable();
dtColorTable.Columns.Add("ColorId");
dtColorTable.Columns.Add("ColorName");
dtColorTable.Rows.Add(1, "Red");
dtColorTable.Rows.Add(2, "Blue");
dtColorTable.Rows.Add(3, "Black");
dtColorTable.Rows.Add(4, "Green");
dtColorTable.Rows.Add(5, "Yellow");
DataTable dtProductTable = new DataTable();
dtProductTable.Columns.Add("ProductID");
dtProductTable.Columns.Add("ColorID");
dtProductTable.Columns.Add("ProductName");
dtProductTable.Rows.Add(1, 1, "Chrysanthemum");
dtProductTable.Rows.Add(2, 2, "Desert");
dtProductTable.Rows.Add(3, 3, "Hydrangeas");
dtProductTable.Rows.Add(4, 4, "Jellyfish");
dtProductTable.Rows.Add(5, 5, "Koala");
dtProductTable.Rows.Add(6, 1, "Lighthouse");
dtProductTable.Rows.Add(7, 2, "Penguins");
dtProductTable.Rows.Add(8, 3, "Tulips");
dtProductTable.Rows.Add(9, 4, "Product10");
dtProductTable.Rows.Add(10, 5, "Product1");
dtProductTable.Rows.Add(11, 1, "Product2");
dtProductTable.Rows.Add(12, 2, "Product3");
dtProductTable.Rows.Add(13, 3, "Product4");
dtProductTable.Rows.Add(14, 4, "Product5");
dtProductTable.Rows.Add(15, 5, "Product6");
dtProductTable.Rows.Add(16, 1, "Product7");
dtProductTable.Rows.Add(17, 2, "Product8");
dtProductTable.Rows.Add(18, 3, "Product9");
string result = string.Empty;
//clsColor objcolor = new clsColor(true)
//clsColorProduct objProduct = new clsColorProduct(true);
for (int i = 0; i < dtColorTable.Rows.Count; i++)
{
str += "<li class='listclass'><div class='filterblock' style='display: inline-flex;'><input type='checkbox' id=" + dtColorTable.Rows[i]["ColorId"].ToString() + " name='chk' value=" + dtColorTable.Rows[i]["ColorName"].ToString() + " class='category'><div class='font'><div class='Color' style=background-color:" + dtColorTable.Rows[i]["ColorName"].ToString() + "></div></div><label class='font' for=" + dtColorTable.Rows[i]["ColorId"].ToString() + ">" + dtColorTable.Rows[i]["ColorName"].ToString() + "</label><label> [" + GetCount(Convert.ToInt32(dtColorTable.Rows[i]["ColorId"])) + "] </label></div></li>";
if (dtColorTable.Rows[i]["ColorId"].ToString() != "0")
{
str1 += "<td><div class='resultblock' ColorID=" + dtColorTable.Rows[i]["ColorId"].ToString() + " data-tag=" + dtColorTable.Rows[i]["ColorName"].ToString() + "><div class='desc'><div class='desc_text'><div class='main'><div class='sub'><div class='box'>" + dtColorTable.Rows[i]["ColorName"].ToString() + "<span class=''><img height='10px' style='margin-left: 4px;margin: 0px 0px -1px 4px;'/></span></div></div></div></div></div></div></td>";
// objProduct.getColorp();
for (int j = 0; j < dtProductTable.Rows.Count; j++)
{
if (dtColorTable.Rows[i]["ColorId"].ToString() == dtProductTable.Rows[j]["ColorID"].ToString())
{
result += "<td><div class='resultblock' data-tag=" + dtColorTable.Rows[i]["ColorName"].ToString() + "><div class='desc'><div class='desc_text'><img style='width:250px;height:280px;' src='images/Product/" + dtProductTable.Rows[j]["ProductName"].ToString() + ".jpg" + "' alt='" + dtProductTable.Rows[j]["ProductName"].ToString() + @"' /></div></div></div></td>";
//sugg.Visible = true;
}
}
}
}
list.InnerHtml = str;
filters.InnerHtml = result;
// sugg.InnerHtml = str1;
}
public int GetCount(int colorId)
{
int count = 0;
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
string query = "SELECT COUNT(ColorID) [Count] FROM tblColorProduct WHERE ColorID = @CountId";
using (SqlCommand cmd = new SqlCommand(query, con))
{
con.Open();
cmd.Parameters.AddWithValue("@CountId", colorId);
object returnedCount = cmd.ExecuteScalar();
if (returnedCount != null)
{
count = Convert.ToInt32(returnedCount);
}
else
{
count = 0;
}
con.Close();
}
}
return count;
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs)
cldo()
End Sub
Public Sub cldo()
Dim str As String = String.Empty
Dim str1 As String = String.Empty
Dim dtColorTable As New DataTable()
dtColorTable.Columns.Add("ColorId")
dtColorTable.Columns.Add("ColorName")
dtColorTable.Rows.Add(1, "Red")
dtColorTable.Rows.Add(2, "Blue")
dtColorTable.Rows.Add(3, "Black")
dtColorTable.Rows.Add(4, "Green")
dtColorTable.Rows.Add(5, "Yellow")
Dim dtProductTable As New DataTable()
dtProductTable.Columns.Add("ProductID")
dtProductTable.Columns.Add("ColorID")
dtProductTable.Columns.Add("ProductName")
dtProductTable.Rows.Add(1, 1, "Chrysanthemum")
dtProductTable.Rows.Add(2, 2, "Desert")
dtProductTable.Rows.Add(3, 3, "Hydrangeas")
dtProductTable.Rows.Add(4, 4, "Jellyfish")
dtProductTable.Rows.Add(5, 5, "Koala")
dtProductTable.Rows.Add(6, 1, "Lighthouse")
dtProductTable.Rows.Add(7, 2, "Penguins")
dtProductTable.Rows.Add(8, 3, "Tulips")
dtProductTable.Rows.Add(9, 4, "Product10")
dtProductTable.Rows.Add(10, 5, "Product1")
dtProductTable.Rows.Add(11, 1, "Product2")
dtProductTable.Rows.Add(12, 2, "Product3")
dtProductTable.Rows.Add(13, 3, "Product4")
dtProductTable.Rows.Add(14, 4, "Product5")
dtProductTable.Rows.Add(15, 5, "Product6")
dtProductTable.Rows.Add(16, 1, "Product7")
dtProductTable.Rows.Add(17, 2, "Product8")
dtProductTable.Rows.Add(18, 3, "Product9")
Dim result As String = String.Empty
'clsColor objcolor = new clsColor(true)
'clsColorProduct objProduct = new clsColorProduct(true);
For i As Integer = 0 To dtColorTable.Rows.Count - 1
str += "<li class='listclass'><div class='filterblock' style='display: inline-flex;'><input type='checkbox' id=" + dtColorTable.Rows(i)("ColorId").ToString() + " name='chk' value=" + dtColorTable.Rows(i)("ColorName").ToString() + " class='category'><div class='font'><div class='Color' style=background-color:" + dtColorTable.Rows(i)("ColorName").ToString() + "></div></div><label class='font' for=" + dtColorTable.Rows(i)("ColorId").ToString() + ">" + dtColorTable.Rows(i)("ColorName").ToString() + "</label><label> [" + GetCount(Convert.ToInt32(dtColorTable.Rows(i)("ColorId"))) + "] </label></div></li>"
If dtColorTable.Rows(i)("ColorId").ToString() <> "0" Then
str1 += "<td><div class='resultblock' ColorID=" + dtColorTable.Rows(i)("ColorId").ToString() + " data-tag=" + dtColorTable.Rows(i)("ColorName").ToString() + "><div class='desc'><div class='desc_text'><div class='main'><div class='sub'><div class='box'>" + dtColorTable.Rows(i)("ColorName").ToString() + "<span class=''><img height='10px' style='margin-left: 4px;margin: 0px 0px -1px 4px;'/></span></div></div></div></div></div></div></td>"
' objProduct.getColorp();
For j As Integer = 0 To dtProductTable.Rows.Count - 1
If dtColorTable.Rows(i)("ColorId").ToString() = dtProductTable.Rows(j)("ColorID").ToString() Then
'sugg.Visible = true;
result += "<td><div class='resultblock' data-tag=" + dtColorTable.Rows(i)("ColorName").ToString() + "><div class='desc'><div class='desc_text'><img style='width:250px;height:280px;' src='images/Product/" + dtProductTable.Rows(j)("ProductName").ToString() + ".jpg" + "' alt='" + dtProductTable.Rows(j)("ProductName").ToString() + "' /></div></div></div></td>"
End If
Next
End If
Next
list.InnerHtml = str
filters.InnerHtml = result
' sugg.InnerHtml = str1;
End Sub
Public Function GetCount(colorId As Integer) As Integer
Dim count As Integer = 0
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New SqlConnection(constr)
Dim query As String = "SELECT COUNT(ColorID) [Count] FROM tblColorProduct WHERE ColorID = @CountId"
Using cmd As New SqlCommand(query, con)
con.Open()
cmd.Parameters.AddWithValue("@CountId", colorId)
Dim returnedCount As Object = cmd.ExecuteScalar()
If returnedCount IsNot Nothing Then
count = Convert.ToInt32(returnedCount)
Else
count = 0
End If
con.Close()
End Using
End Using
Return count
End Function
ScreenShot