Header with Filter is not getting added in webgrid in MVC RRS feed

  • Question

  • User1360833881 posted

    I have implemented the webgrid using the below article

    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()
                    var objApplicationInputBL = new REDF_BL();
                    RequestResponse objRequestResponse = new RequestResponse();
                    objRequestResponse.RequestResponseInfo = objApplicationInputBL.GetRequestResponse();
                    return View(objRequestResponse.RequestResponseInfo);
                catch (Exception)
        ViewBag.Title = "REDFLoggerDetails";
        Layout = "~/Views/Shared/_Layout.cshtml";
    @model IEnumerable<REDF_DataContracts.RequestResponse>
        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">
                font-family: Arial;
                font-size: 10pt;
                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;
            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;

    Thursday, April 23, 2020 10:35 PM


  • User665608656 posted

    Hi,  alibasha202

    First, about "Javascript errors." After you quote "Layout =" ~ / Views / Shared / _Layout.cshtml ";", you should put js and js references in "@section scripts {}", and you don't need to quote "jquery.min" .js ". Because in the "_Layout.cshtml" page, jquery related files are referenced by default.

    Secondly, regarding the absence of your search, you need to check the reference of the quicksearch.js file. The file name I downloaded according to the link you gave is called "jquery.quicksearch.js" instead of "quicksearch.js".


    Quick reference js:

    drag and drop the files you need to the page and then release it, and relevant links will be generated.

     The place I modified is marked in red .

    Here is the result.

    Best Regards,



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 24, 2020 5:37 AM