The filter icon in the header template of grid column not appearing in the right side which default

[Mohammed]

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

[Ivan Danchev]

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

[Mohammed]

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

 

[Ivan Danchev]

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

[Mohammed]

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.

[Ivan Danchev]

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