Filterable not working when grid is Sortable (MVC)

[Andreas]

I'm working on a MVC 4 project and bumped in to a problem with the Kendo Grid. 

I try to use both the Sortable() and Filterable() properties of the grid, but only sorting is applied. The filter icons are visible in the columns but only triggers sorting. The Filterable() property works fine when Sortable() is removed though. 

Below is the code for the grid (slightly edited for cleaner presentation)

@(Html.Kendo().Grid<TaskViewModel>()

    .Name("UserTasksGrid")

    .Columns(column =>

        {

            column.Bound(task => task.Title);

            column.Bound(task => task.IsCompleted)

                .ClientTemplate("<input type=\"checkbox\" #= (IsCompleted === true) ? checked='checked' : '' # disabled=\"true\"")

            column.Bound(task => task.TaskType)

            column.Bound(task => task.DueDate).Format("{0:yyyy-MM-dd}")

            column.Bound(task => task.CompletedOn)

                .ClientTemplate("#= (IsCompleted == false) ? '' : kendo.toString(CompletedOn, 'yyyy-MM-dd') #")

            column.Template(model => model).ClientTemplate("<a href='/production/index?productionId=#=ProductionId#' style=\"width:\">Gå till produktionssida</a>");     

        })

        .Filterable()

        .Sortable()

        .Scrollable(scroll => scroll.Height(300))

        .Pageable()

        .DataSource(dataSource => dataSource

            .Ajax()

            .PageSize(20)

            .ServerOperation(false)

            .Model(model => model.Id(m=> m.Id))

            .Sort(sort => sort.Add(task => task.IsCompleted))

            .Read(read => read.Action("UserTasks_Read", "Task"))

        )

)

I've also tried with the ColumnMenu() property based on your demo http://demos.kendoui.com/web/grid/column-menu.html
but the problem remains (ie the column menu icon can not be clicked).

Furthermore, when I set sortable in the ColumnMenu (like below), the options for "Sort ascending" and "Sort descending" are not displayed in the menu.

.ColumnMenu(menu => menu.Sortable(true))

It would be great if I could get both filtering and sorting working on the grid.

Thanks,
Andreas

[Atanas Korchev]

Hi Andreas,

 Filtering and sorting work as expected in our online demos. Could you send us a sample project which shows the problem you are experiencing?

Regards,
Atanas Korchev
the Telerik team

[Andreas]

It was a CSS problem. Maybee the default style that comes with a new MVC project interfered with the styling.

The problems was that the sort drop down link hit area obscured the hit area for the filter drop down.

We did some CSS sniping, targeting both anchor tags in the grids - float, margin and padding - both link, visited, hover and active.


/* Sorting */
#container table a.k-link, #container table a.k-link:visited, #container table a.k-link:hover, #container table a.k-link:active  {
    float: left;
    margin: -.5em -.6em -.4em -.6em;
    padding: .5em .6em .4em .6em;
}
/* Filtering */
#container table a.k-grid-filter, #container table a.k-grid-filter:visited, #container table a.k-grid-filter:hover, #container table a.k-grid-filter:active {
    float:right;
    margin: -.5em -.6em -.4em;
    padding: .5em .2em .4em;
}