This is a migrated thread and some comments may be shown as answers.

Filterable not working when grid is Sortable (MVC)

2 Answers 898 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Andreas
Top achievements
Rank 1
Andreas asked on 04 Dec 2012, 03:01 PM
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

2 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 05 Dec 2012, 07:22 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Andreas
Top achievements
Rank 1
answered on 13 Dec 2012, 08:00 AM
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;
}
Tags
Grid
Asked by
Andreas
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Andreas
Top achievements
Rank 1
Share this question
or