CODEWITHSUNDEEP
c#asp.net-mvchtmlmvcgrid
Mike
Mike

Reputation: 329

Sorting/ Filtering attributes not working in Grid.Mvc

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.

Upvotes: 8

Views: 20848

Answers (6)

sam sergiy klok
sam sergiy klok

Reputation: 628

In my case filtering didn't work, because I had styles conflict. When I removed @section, and used just @Styles (see below), filtering started to work.

@* commented because of styles conflict
    @section styles{
        @Styles.Render("~/Content/Gridmvc")
    }*@

@Styles.Render("~/Content/Gridmvc")

@section scripts{
    @Scripts.Render("~/bundles/Gridmvc")
}

I'm attaching link to simplified solution on github: https://github.com/sam-klok/WebAppGrid

Upvotes: 0

dangalg
dangalg

Reputation: 6486

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

Upvotes: 2

Tomi
Tomi

Reputation: 11

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

Upvotes: 1

Saineshwar Bageri - MVP
Saineshwar Bageri - MVP

Reputation: 4031

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;
    }

enter image description here

Upvotes: 1

Mike
Mike

Reputation: 329

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 =]

Upvotes: 14

Vipin RT
Vipin RT

Reputation: 298

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

enter image description here

Upvotes: 2

Related Questions