HeaderContextMenu FilterCheckListItems Height

[Avonelle Lovhaug]

I am using FilterType="HeaderContext". Some of my columns only have a few options in them, but the container for the checklist is still quite tall. Is there an easy way for me to shorten the height for some columns?

[Vessy]

Hi Avonelle,

The default height of the filtering checklist wrapper is 300px and you can decrease it with a similar style:

.RadMenu div.RadListBox.rlbFixedHeight {
    height: 200px !important;
}

I hope his helps.

Regards,
Vessy
Progress Telerik

[Avonelle Lovhaug]

That's great - thanks! I assumed it wouldn't be possible to do it effectively via CSS, because I figured the overall height of the complete popup would stay the same. I was definitely wrong about that.

I don't suppose there is a way to change the height on a column by column basis, is there? I have some lists that only have a couple of items which I'd prefer to keep pretty small, but other ones that have more items. 

--Avonelle

 

[Vessy]

Hi Avonelle,

Your assumption is correct - the height of the columns is set either depending on the height of the Grid (using a scrollbar if the column is heigher) or depending on the height of all rows (the highest column), when no scrolling is enabled.

Regards,
Vessy
Progress Telerik

[Avonelle Lovhaug]

Sorry - I think maybe the wording of my question wasn't very clear. My question about changing the height on a column by column basis was still related to the filtering checkbox wrapper height, not the height of each column itself. Or am I misunderstanding your response?

Thanks,

--Avonelle

 

[Vessy]

Hi Avonelle,

Thanks a lot for the clarification.

If you know the unique name of the columns having less items in themselves, you can attach a handler to the Grid's client-side onHeaderMEnuShowing event and apply the needed height depending on the current column:

function HeaderMenuShowing(sender, eventArgs) {
    var ckecklist = $telerik.$(".RadMenu div.RadListBox.rlbFixedHeight");
    if (eventArgs.get_gridColumn().get_uniqueName() == "ContactName") {
        ckecklist.css("height", "200px");
    }
    else {
        ckecklist.css("height", "350px");
    }
}

I hope this helps.

Regards,
Vessy
Progress Telerik

[Avonelle Lovhaug]

Perfect. Thanks!

--Avonelle

[Vessy]

Hi,

You are welcome, Avonelle - I am glad my reply was helpful for you :)

Regards,
Vessy
Progress Telerik