Hi zeeshanpas,
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
NorthwindEntities entities = new NorthwindEntities();
return View(entities.Customers.Take(5).ToList());
}
}
View
@model IEnumerable<Filter_WebGrid_jQuery.Customer>
@{
Layout = null;
WebGrid webGrid = new WebGrid(source: Model, canPage: false, canSort: false);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
@webGrid.GetHtml(
htmlAttributes: new { @id = "WebGrid", @class = "Grid" },
columns: webGrid.Columns(
webGrid.Column("CustomerID", "Customer Id"),
webGrid.Column("ContactName", "Customer Name"),
webGrid.Column("Country", "Country")))
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var customers = { "ALFKI": "Maria Anders", "ANATR": "Ana Trujillo", "ANTON": "Antonio Moreno", "AROUT": "Thomas Hardy", "BERGS": "Christina Berglund" };
var countries = { "Austria": "Austria", "France": "France", "Brazil": "Brazil", "Ireland": "Ireland", "Italy": "Italy" };
var row = $("<TR />");
var id = $('<select onchange="OnChange(0,this);" />').append($("<option>Select</option>"));
$.each(customers, function (key, value) {
$(id).append($("<option></option>").attr("value", key).text(key));
});
row.append("<th>" + $(id)[0].outerHTML + "</th>");
var name = $('<select onchange="OnChange(1,this);" />').append($("<option>Select</option>"));
$.each(customers, function (key, value) {
$(name).append($("<option></option>").attr("value", value).text(value));
});
row.append("<th>" + $(name)[0].outerHTML + "</th>");
var country = $('<select onchange="OnChange(2,this);" />').append($("<option>Select</option>"));
$.each(countries, function (key, value) {
$(country).append($("<option></option>").attr("value", key).text(value));
});
row.append("<th>" + $(country)[0].outerHTML + "</th>");
$("#WebGrid TR").eq(0).after(row);
});
function OnChange(colIndex, ele) {
var query = $(ele).find('option:selected').text().toLowerCase();
$("#WebGrid tr:not(:has(th))").each(function (i) {
if (query == "select" || ($(this).find("td:eq(" + colIndex + ")").text().toLowerCase().indexOf(query) == 0)) {
$(this).show();
} else {
$(this).hide();
}
});
}
</script>
</body>
</html>
Screenshot
