This question is locked. New answers and comments are not allowed.
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
5 Answers, 1 is accepted
0
Hello ,
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:
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
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
0
Alexis
Top achievements
Rank 1
Rank 1
answered on 31 Aug 2016, 12:41 AM
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!
0
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
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
0
Alan
Top achievements
Rank 2
Rank 2
answered on 30 Aug 2017, 03:19 AM
How can I apply Kendo grid filter menu icon position only on certain columns on a kendo grid?
Thank you
0
Hello Alan,
A possible solution for achieving the desired result is selecting the desired column header via jQuery. The easiest way might be using the data-field attribute of the cell.
For example, the code could look like:
For a runnable example, check the modified Dojo:
Regards,
Preslav
Progress Telerik
A possible solution for achieving the desired result is selecting the desired column header via jQuery. The easiest way might be using the data-field attribute of the cell.
For example, the code could look like:
$("[data-field='ShipName']").find("a.k-grid-filter").each(function(){ var filterButton = $(this); filterButton.insertAfter(filterButton.next());});For a runnable example, check the modified Dojo:
Regards,
Preslav
Progress 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