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

Inline header filter row with groupable and pageable grid

4 Answers 303 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Stacy
Top achievements
Rank 2
Stacy asked on 07 Aug 2013, 07:18 PM
I've extended a suggestion to my purposes from this post:
http://www.kendoui.com/forums/kendo-ui-web/grid/grid-header-filtering-row-that-contains-1-element-for-each-column-in-grid-with-the-same-width.aspx

I've gotten it to work very well with my grid implementation. The only problem I've run  into that I'm not sure how to solve so far is that when a column is dragged to the group header it aligns the headers with my filter row just fine, but if you then go to page 2, the headers are suddenly misaligned though the filter row stays in place. 

You can see what I mean in this jsfiddle. It seems the <th> element that's added to the header row to indent the rows and align the grid is being removed somehow

Any suggestions about how to correct this behavior would be greatly helpful.

Edit: Actually, paging doesn't seem to matter. Just whenever the grid repaints as it also happens when filtering after grouping or grouping a second column.

4 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 12 Aug 2013, 06:58 AM
Hi Stacy,

 You need to insert extra table cells for every grid group. I have demonstrated how to do this here: http://jsfiddle.net/WvpJe/2/

 The interesting code is this:

    for (var i = 0; i < grid.dataSource.group().length; i++) {
        filterRow += '<th class="k-group-cell k-header">&nbsp;</th>';
    }

This code needs to be executed every-time the grouping configuration changes. I recommend recreating the whole filter row when the "change" event of the data source is fired.

Regards,
Atanas Korchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Stacy
Top achievements
Rank 2
answered on 12 Aug 2013, 03:54 PM
This is still not working quite right. It works on the first group you set, but not the second, and adding the change event as you said completely breaks it - the filter row lines up then, but the header does not. How can I fix the header?

Also interesting is this test: http://jsfiddle.net/WvpJe/3/
I removed the for loop you added and added this bit of code when I was trying some other things to get your example to work:

var headerRows = grid.thead.find('th.k-group-cell');
headerRows.remove();
This somehow fixes the headers and everything works magically. The only problem, then is that the group that's set when the grid initializes is not aligned, but if you add another, or if you remove it and add it back, then it's aligned. Not sure why this works, though, and I'm sure it's not the proper solution.

0
Accepted
Atanas Korchev
Telerik team
answered on 13 Aug 2013, 08:08 AM
Hi Stacy,

 I updated the jsfiddle: http://jsfiddle.net/WvpJe/6/

 I had to override a method of the grid because it was clearing up the padding cells from the filter row as well. Here is that override: 


kendo.ui.Grid.fn._updateHeader = function(groups) {
    var that = this,
        cells = that.thead.find("tr:first th.k-group-cell"),
        length = cells.length;
    
    if(groups > length) {
        $(new Array(groups - length + 1).join('<th class="k-group-cell k-header">&nbsp;</th>')).prependTo(that.thead.find("tr:first"));
    } else if(groups < length) {
        length = length - groups;
        $(grep(cells, function(item, index) { return length > index; } )).remove();
    }
}

Regards,
Atanas Korchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Stacy
Top achievements
Rank 2
answered on 13 Aug 2013, 03:22 PM
This works now, thanks.

Though there was an error that was causing the padding cells to not be removed from the header when removing groups.

In the override function I had to change this:
$(grep(cells, function(item, index) { return length > index; } )).remove();
to this:
$($.grep(cells, function(item, index) { return length > index; } )).remove();
and it works perfectly.

Thanks for the help.
Tags
Grid
Asked by
Stacy
Top achievements
Rank 2
Answers by
Atanas Korchev
Telerik team
Stacy
Top achievements
Rank 2
Share this question
or