Hi sani.ss501,
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
Model
public class CustomerModel
{
public DateTime? OrderDate { get; set; }
public string CustomerID { get; set; }
public string ContactName { get; set; }
public int EmployeeID { get; set; }
public string FirstName { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
NorthwindEntities entities = new NorthwindEntities();
List<CustomerModel> customers = (from o in entity.Orders
join c in entity.Customers on o.CustomerID equals c.CustomerID
join emp in entity.Employees on o.EmployeeID equals emp.EmployeeID
select new CustomerModel
{
CustomerID = c.CustomerID,
ContactName = c.ContactName,
EmployeeID = emp.EmployeeID,
FirstName = emp.FirstName,
OrderDate = o.OrderDate
}).ToList();
return View(customers);
}
}
View
@model IEnumerable<Filter_WebGrid_jQuery.Models.CustomerModel>
@{
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>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
.Grid
{
border: 1px solid #ccc;
border-collapse: collapse;
}
.Grid th
{
background-color: #F7F7F7;
font-weight: bold;
}
.Grid th, .Grid td
{
padding: 5px;
border: 1px solid #ccc;
}
.Grid, .Grid table td
{
border: 0px solid #ccc;
}
.Grid th a, .Grid th a:visited
{
color: #333;
}
</style>
</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("EmployeeID", "Employee Id"),
webGrid.Column("FirstName", "Employee Name"),
webGrid.Column("OrderDate", "Order Date") ))
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="~/Scripts/quicksearch.js"></script>
<script type="text/javascript">
$(function () {
//Add Header Row with TextBoxes.
var row = $("<TR />");
$("#WebGrid TR").eq(0).find("TH").each(function () {
row.append("<th><input type = 'text' /></th>");
});
$("#WebGrid TR").eq(0).after(row);
//Applying the QuickSearch Plugin to each TextBox.
$("#WebGrid TR").eq(1).find("INPUT").each(function (i) {
$(this).quicksearch("#WebGrid tr:not(:has(th))", {
'testQuery': function (query, txt, row) {
return $(row).children(":eq(" + i + ")").text().toLowerCase().indexOf(query[0].toLowerCase()) != -1;
}
});
});
});
</script>
</body>
</html>
