Kendo grid filter menu icon position

4 posts, 0 answers
  1. Chandan
    Chandan avatar
    1 posts
    Member since:
    Mar 2015

    Posted 01 Oct 2015 Link to this post

    I am using kendo grid with detail view. Here, in the grid filter menu button position is right side of the header. How can I set it on the left side of the header in grid?

    Thanks

  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 06 Oct 2015 Link to this post

    Hello Chandan,

    Generally speaking, you can control the default position of the filter menu icon through CSS. For instance you can change the float attribute of the  .k-header and .k-grid-filter classes:
    <style>
      .k-header>.k-grid-filter{
        float:left;
      }
    </style>

    However, please note that in order to get more information about the Kendo UI Grid, you need to post your question under the Kendo UI forums or use the support ticketing system to communicate directly with the technical support engineers. At the same time you can use the Telerik Platform forums to discuss any mobile-development questions or challenges you're facing while working with the Telerik Platform services.

    Regards,
    Tina Stancheva
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Alexis
    Alexis avatar
    1 posts
    Member since:
    Jul 2013

    Posted 30 Aug Link to this post

    Hi,

    How would I get the text of the column header to align to the top-left, and the filter icon to align to the bottom-right?

    Thanks!

  4. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 02 Sep Link to this post

    Hi Alexis,

    Normally, the Grid header cells prevent text wrapping, and the filter icon is floated to the right and is rendered before the column title.

    As a result, there is a limited possibility to achieve the desired layout. Here is an example:

    http://dojo.telerik.com/IjiTi

    It relies on custom CSS and JavaScript code to do the following:

    - move the filter button after the column title in the HTML markup
    - enable text wrapping

    It is also possible to change the header cell content's vertical alignment, but it will always affect both the column title, and the filter button. (check the commented CSS style in the <head>).

    Regards,
    Dimo
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top