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

6 posts, 0 answers
  1. Mohammed
    Mohammed avatar
    26 posts
    Member since:
    May 2020

    Posted 31 May 2020 Link to this post

    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

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2189 posts

    Posted 02 Jun 2020 Link to this post

    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.
  3. Mohammed
    Mohammed avatar
    26 posts
    Member since:
    May 2020

    Posted 03 Jun 2020 in reply to Ivan Danchev Link to this post

    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

     

  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2189 posts

    Posted 04 Jun 2020 Link to this post

    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.
  5. Mohammed
    Mohammed avatar
    26 posts
    Member since:
    May 2020

    Posted 07 Jun 2020 Link to this post

    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.
  6. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2189 posts

    Posted 09 Jun 2020 Link to this post

    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.
Back to Top