User1360833881 posted
I have implemented the webgrid using the below article
https://www.aspsnippets.com/Articles/Column-Wise-Search-and-Filter-in-WebGrid-using-TextBox-in-ASPNet-MVC.aspx
Data is loading in grid, but Header with Filter is not getting added.
Because on load of this page, I am getting below Javascript errors.
1. 0x800a1391 - javascript runtime error 'jquery' is undefined
2. 0x800a1391 - JavaScript runtime error: '$' is undefined
Kindly check my code and correct me, where I am doing wrong. Thanks.
public ActionResult REDFLoggerDetails()
{
try
{
var objApplicationInputBL = new REDF_BL();
RequestResponse objRequestResponse = new RequestResponse();
objRequestResponse.RequestResponseInfo = objApplicationInputBL.GetRequestResponse();
return View(objRequestResponse.RequestResponseInfo);
}
catch (Exception)
{
throw;
}
}
@{
ViewBag.Title = "REDFLoggerDetails";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@model IEnumerable<REDF_DataContracts.RequestResponse>
<h2>REDFLoggerDetails</h2>
@{
WebGrid webGrid = new WebGrid(source: Model, canPage: true, canSort: true);
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="~/Scripts/quicksearch.js"></script>
<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>
@webGrid.GetHtml(
htmlAttributes: new { @id = "WebGrid", @class = "Grid" },
columns: webGrid.Columns(
webGrid.Column("ServiceType", "Service Name"),
webGrid.Column("NID", "Legal ID"),
webGrid.Column("ResponseCodeValue", "Response Code"),
webGrid.Column("ResponseResult", "Response Result"),
webGrid.Column("UserID", "User Name"),
webGrid.Column("CreatedDate", "Date")))
<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>