Sorting/ Filtering attributes not working in Grid.Mvc

Question

The code for my Mvc Grid is shown below but for some reason the sortable and filterable attributes don't work as stated in the codePlex documentation. I am developing in .NET 4.5 using html5 and bootstrap.css:

@Html.Grid(Model.Item2).Named("ViewEntries").Columns(columns =>
                    {
                        columns.Add(c => c.entryName).Titled("Entry Name").Sortable(true).Filterable(true);
                        columns.Add(c => c.entryDate).Titled("Date").Sortable(true);
                        columns.Add(c => c.entryDetails).Titled("Details").Sortable(true);
                        columns.Add().Titled("Name1").RenderValueAs(c => Name1((int)c.name1)).Sortable(true).Filterable(true);
                        columns.Add().Titled("Name2").RenderValueAs(c => Name2((int)c.name2)).Sortable(true).Filterable(true);
                        columns.Add().Titled("Name3").RenderValueAs(c => Name3((int)c.name3)).Sortable(true).Filterable(true);
                    }).WithPaging(10)

Any help would be greatly appreciated, thanks.

Answer 1

So the reason that this wasn't working was that gridmvc.css wasn't actually being referenced in the layout file in the first place. As soon as I added it, filtering works as intended on the normally rendered columns.

Now the problem I am having is getting filtering to work on columns that are rendered via a html helper but this just requires some research in to creating custom filterable widgets. Thanks for all the help guys =]

Answer 2

Change your code as below

@Html.Grid(Model.Item2).Named("ViewEntries").Columns(columns =>
                    {
                        columns.Add(c => c.entryName).Titled("Entry Name").Sortable(true).Filterable(true);
                        columns.Add(c => c.entryDate).Titled("Date").Sortable(true);
                        columns.Add(c => c.entryDetails).Titled("Details").Sortable(true);
                        columns.Add().Titled("Name1").RenderValueAs(c => Name1((int)c.name1)).Sortable(true).Filterable(true);
                        columns.Add().Titled("Name2").RenderValueAs(c => Name2((int)c.name2)).Sortable(true).Filterable(true);
                        columns.Add().Titled("Name3").RenderValueAs(c => Name3((int)c.name3)).Sortable(true).Filterable(true);
                    }).WithPaging(10).Sortable(true).Filterable(true).WithMultipleFilters()

---

Use Inspect element in google chrome(Select the Grid Title bar and click right button and use inspect element).If it shows the classes in the following image, then the problem is due to either css or js.That mean class names is started with "grid-" and check whether the grid-filter-btn is rendered in the DOM

Answer 3

My solution was adding :

<link href="@Url.Content("~/Content/Gridmvc.css")" rel="stylesheet" type="text/css" />

to the head section

and

@Scripts.Render("~/Scripts/gridmvc.min.js") 

to the body section

Hope this helps someone

Answer 4

The filter is not showing because you have 2 .css files in your project

1) site.css

2) Gridmvc.css

In site.css this is style for a:link which get executed when ever your click on filter icon of Grid.MVC .

You can just remove or commet this lines then you can see Filter is working

   th a
    {       
    display: block;
    position: relative;
    }

    th a:link, th a:visited, th a:active, th a:hover
    {
        color: #333;
        font-weight: 600;
        text-decoration: none;
        padding: 0;
    }

    th a:hover
    {
        color: #000;
    }

Answer 5

Filter popup was not showing, sorting worked. When I commented out this section in _layout.cshtml "@RenderSection("scripts", required: false)" filtering worked.