This is a migrated thread and some comments may be shown as answers.
The filter icon in the header template of grid column not appearing in the right side which default
5 Answers 30 Views
This is a migrated thread and some comments may be shown as answers.
Mohammed
Top achievements
Rank 1
Veteran
Mohammed asked on 31 May 2020, 12:18 PM

Hi,

The filter icon is not appearing on the right side or default position when header template applied to the Grid column, it is showing in left side , but i want it to appear right side even though header template applied also color to be black.Can  you please help on this?

 

Thanks

Mohammed

5 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 02 Jun 2020, 04:32 PM

Hi Mohammed,

I've tested how the filter icon's position is affected when a header template is set and didn't notice any difference.

For example, with the following template: "<span style='background-color: lightblue; color: black;'>Some text <strong>bold text</strong></span>"

the Grid looks like this: https://www.screencast.com/t/YQrfdtp3

So, could you post your template so we can check whether there is something specific about it that causes the icon to be displayed on the left side?

The template posted above shows how to style its content's color and background color. Alternatively, you can set a class to the elements within the template and use the class in CSS rules, to achieve the desired appearance of the Html within the header template.

Regards,
Ivan Danchev
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Mohammed
Top achievements
Rank 1
Veteran
answered on 03 Jun 2020, 06:46 AM

Hi 

My issue is below i used below code in the grid.

column.bound(model => model.name).Title("Column name" + "<span style='color:red'; font-weight:bold;></span> ") 

The above code is to show the asterisk sign in column , but when i used export to excel the html tags also showing in the header so i went for alternative for header template and the issue went away but the alignment of the icon  and color of the filter changed can you please provide code to look exactly the same as when Title is used.

 

Thanks

Mohammed

 

0
Ivan Danchev
Telerik team
answered on 04 Jun 2020, 04:59 PM

Hi Mohammed,

I checked how the column looks like with the title configuration you posted and at my end it is the same, with or without header template. Attached you can find a sample project. In it, the Grid's ShipName column is added twice - once with title set and once with header template set:

columns.Bound(model => model.ShipName).Title("Column name" + "<span style='color:red' ; font-weight:bold;></span> ");
columns.Bound(model => model.ShipName).HeaderTemplate("Column name" + "<span style='color:red' ; font-weight:bold;></span> ");

This results in identical appearance: screenshot.

Could you modify the example accordingly, so that it demonstrates the issue, and link it back for further review.

Regards,
Ivan Danchev
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Mohammed
Top achievements
Rank 1
Veteran
answered on 07 Jun 2020, 06:27 AM
Nope its not working .. in my project its showing blue color and alignment left side for header template, is there any code to look like same like title on right side and same icon.
0
Ivan Danchev
Telerik team
answered on 09 Jun 2020, 04:00 PM

Mohammed,

Replicate the issue and send it to us, so we can identify what is causing it, for example it could be due to custom CSS that overrides our styles. Once we have an idea what causes the problem, we would be able to suggest a possible solution.

Regards,
Ivan Danchev
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Mohammed
Top achievements
Rank 1
Veteran
Answers by
Ivan Danchev
Telerik team
Mohammed
Top achievements
Rank 1
Veteran
Share this question
or