locked
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
    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>
    
    
    
    
    

    Thursday, April 23, 2020 10:35 PM

Answers

  • 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,

    YongQing.

     

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