[Solved] Filter ICON position with Telerik Grid

[pravin]

Hi,

We are using the Telerik MVC 2.0 Grid with Filter functionality. We are trying to get the following, 

- Can we place Filter ICON befor Grid Column Header text?
If it is not possible,
- In case of multiling heder can we control the position of Filter ICON either on First or Second row?  

Pleas let us know.

[Renee]

Placement, or more specifically, alignment of the filter icon in the grid has also been an issue for us as well.  It would be great o have the ability to designate right, left, top or bottom alignment.  While CSS can assist with the bottom alignment (when we have multi-row headers), it doesn't work in all browsers (we are required to support as low as IE6, which I realize is a challenge).  It would be a fantastic build to have this supported by Telerik (in all browsers) without additional customized markup.

[pravin]

Any Ideas, css setting by which we can get the filter ICON aligned at one position?

[Dimo]

Hello,

I am afraid it is not easy to use a filter button on the left side of the header cells. You can position it there, but the filtering menu will still pop as if the icon is on the right side.

Multiline Grid headers are achievable if you override the header cells' height in the CSS:

div.t-grid .t-header
{
    white-space:normal;
}

div.t-grid .t-header .t-link
{
    height:auto;
}

Now if you have a multi-line header, the filtering icon will appear at the bottom of the header cell. In order to move it up, you need to have a custom CSS class for the header cell and apply negative margin to the filter icon:

columns.Bound(o => o.ContactName).HeaderHtmlAttributes(new { @class = "twolines" } );

.twolines .t-grid-filter
{
    margin-top:-3em;
}

Of course, if all headers will be multiline and the same height, there is no need of the custom CSS class and t-header can be used in the above CSS rule.


Best wishes,
Dimo
the Telerik team

[pravin]

I appreciate the help from Telerik Team.

I tried with the css changes sugested and applied the following attributes to t-grid-filter class, However I am still not able to get the Filter ICON at one position (Left,Top) in case of multi line header. Am I doing any thing wrong?

***** I am looking for the format to display the header as "ICON" "HEADER TEXT" format

.t-grid-filter
{
    float: right;
    height: 13px;
    padding: .3em .2em;
    position: relative;
    display: inline-block;
    margin: -1.8em -.6em -.3em 3px;
    margin-top:-3em;
}

[Dimo]

Hello Pravin,

As mentioned before, positioning the filter icon at the top-left corner of the header cells will not yield good results.

If you want to position the icon at the top-right corner, you can either use the approach described in my previous message (custom CSS class for a column's header and appropriate negative top margin for the icon), or float the header strings and override some of the filter icon styles:

.t-grid-header .t-link
{
    float:left;
}

.t-header .t-grid-filter
{
    margin-top: 0 !important;
    padding-top:0 !important;
}

All the best,
Dimo
the Telerik team

[Piotr]

Dear Telerik Team,
Is there a good way to align filter icon that way it is displayed immediately after header title? I managed to achieve that with CSS overrides, but I was not able to align expanded filter pane to display under filter icon as default.
Could you please provide me with any hints?
Regards
Piotrek

[Dimo]

Hello Piotrek,

Indeed, the filter menu is positioned according to the header cell and this cannot be customized. Sorry for any inconvenience caused.

On a side note, this behavior is possible to achieve in the Kendo Grid. You can try it out now or wait until we provide MVC wrappers for our Kendo widgets.

All the best,
Dimo
the Telerik team

[Soma]

I am using telerik radgridview .
How to place filter icon immediately after header title?

Thanks
Soma

[Riyasat]

Hi,

I was looking for some answer for the exact same question but finally I had done it by doing some custom css and jquery methods. Here are the steps how I changed the filter icon and filter popup position for Telerik MVC grid.

for Filter Icon add custom css file with following class name or change this into telerik css file

.t-grid-filter {
    top: -4px;
    float: left; /*  This will place the filter button on left side of the columns  */
}

for grid heading 

.t-grid .t-header .t-link 
{
    background-color: #dbd2c0;
    border: none;
    padding: 5px 10px 5px 10px;
    margin-left: 18px; /*  This will move the Heading 18px right to the filter button  */
}

and finally add clientevent to the grid e.g.
Html.Telerik().Grid(Model)
           .Name("TelerikGrid")clientEvents.OnLoad("SetFilterPosition")
......

<script type="text/javascript">
var previousFilterPosition = 0;
 function SetFilterPosition (e) {

        $(".t-grid").find(".t-grid-filter").click(function () {
            var pos = $(this).position().left;
            $(".t-grid").find(".t-animation-container").each(function () {
                if ($(this).css('display') == 'block' && $(this).position().left!=previousFilterPosition) {
                    $(this).css('left', pos);
                }
            });
            previousFilterPosition = pos;
        });
    }
</script>

And now you are good to go!!!

Leave comments if this works for you.