HeaderContextMenu FilterCheckListItems Height

8 posts, 0 answers
  1. Avonelle Lovhaug
    Avonelle Lovhaug avatar
    4 posts
    Member since:
    Oct 2009

    Posted 14 May 2018 Link to this post

    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?
  2. Vessy
    Admin
    Vessy avatar
    2280 posts

    Posted 16 May 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Avonelle Lovhaug
    Avonelle Lovhaug avatar
    4 posts
    Member since:
    Oct 2009

    Posted 16 May 2018 in reply to Vessy Link to this post

    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

     

  4. Vessy
    Admin
    Vessy avatar
    2280 posts

    Posted 17 May 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Avonelle Lovhaug
    Avonelle Lovhaug avatar
    4 posts
    Member since:
    Oct 2009

    Posted 17 May 2018 in reply to Vessy Link to this post

    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

     

  6. Vessy
    Admin
    Vessy avatar
    2280 posts

    Posted 22 May 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Avonelle Lovhaug
    Avonelle Lovhaug avatar
    4 posts
    Member since:
    Oct 2009

    Posted 22 May 2018 in reply to Vessy Link to this post

    Perfect. Thanks!

    --Avonelle

  8. Vessy
    Admin
    Vessy avatar
    2280 posts

    Posted 22 May 2018 Link to this post

    Hi,

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

    Regards,
    Vessy
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top