Format/position texts on Group Row using HTML rendering

6 posts, 0 answers
  1. Claire
    Claire avatar
    3 posts
    Member since:
    Nov 2019

    Posted 11 Oct 2020 Link to this post

    Is there a way to format/specify position of some texts on group rows (collapsed groups) using HTML rendering? In the HTML-like text formatting, does it support style with position settings?
  2. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    4086 posts

    Posted 11 Oct 2020 Link to this post

    Hi, Claire,

    You can customize the group rows by handling the ViewCellFormatting event. An alternative approach is to use the GroupSummaryEvaluate event which allows modifying the header text of the group rows: https://docs.telerik.com/devtools/winforms/controls/gridview/grouping/formatting-group-header-row  

    As to the HTML-like text formatting, all supported tags are listed in the following help article: https://docs.telerik.com/devtools/winforms/telerik-presentation-framework/html-like-text-formatting 

    I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

    Regards,
    Dess | Tech Support Engineer, Sr.
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  3. Claire
    Claire avatar
    3 posts
    Member since:
    Nov 2019

    Posted 12 Oct 2020 Link to this post

    Thanks for your kind reply.

    yes. I am able to modify the group header text by GroupSummaryEvaluate event. However, when I apply html-like text formatting to locate the text position on the header, the text is showing in the left alignment. It seems that the CSS style for position setting does apply. Here is my code:

    private void RadGridViewScriptQueue_GroupSummaryEvaluate(object sender, GroupSummaryEvaluationEventArgs e)
    {
             if (e.SummaryItem.Name == "Country")
             {
                    e.FormatString = String.Format("<html><span style =\"position:relative;left:300px;\">{0}</span></html>", e.Value);
             }
    }

  4. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    4086 posts

    Posted 13 Oct 2020 Link to this post

    Hello, Claire,   


    The HTML-like text formatting mechanism uses a few plain HTML tags to display formatted text such as font style, font color, font size, etc. The previously referred help article lists the supported tags: https://docs.telerik.com/devtools/winforms/telerik-presentation-framework/html-like-text-formatting

    The relative position is not supported by the HTML-like functionality in the Telerik UI for WinForms suite.

    If you want to shift the group text, you can handle the ViewCellFormatting event and either set the CellElement.TextAlignment property to the desired value or set the CellElement.Padding specifying the fixed left padding:   

            private void radGridView1_ViewCellFormatting(object sender, CellFormattingEventArgs e)
            {
                if (e.Row is GridViewGroupRowInfo)
                {
                    e.CellElement.DisableHTMLRendering = true; 
                    e.CellElement.Padding = new Padding(200, 0, 0, 0);
                }
                else
                {
                    e.CellElement.DisableHTMLRendering = false;
                    e.CellElement.ResetValue(LightVisualElement.PaddingProperty, ValueResetFlags.Local);
                }
            }

     

    Should you have further questions please let me know.

    Regards,
    Dess | Tech Support Engineer, Sr.
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  5. Claire
    Claire avatar
    3 posts
    Member since:
    Nov 2019

    Posted 13 Oct 2020 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Thank you so much your more information. They are very help to align  a text in group header.  However, in my my case, I actually need to show more separate texts in specified positions on the group header.  It is like to display the header with the following format:

              Country (position 100px)         CityName (position 200px)       PostalCode (position 400px)        telnumber (position 500)

     

    In the ViewCellFormatting event, it seems there is only one CellElement to be able to set the position of the beginning text. Is there a way to set the positions of the rest of the texts? 

  6. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    4086 posts

    Posted 14 Oct 2020 Link to this post

    Hi, Claire,

    It seems that you need to have several text elements inside the group row and thus adjust their location according to the columns for example. For this purpose you need a custom GridGroupContentCellElement and add as many text elements as you need. A sample approach is demonstrated in the last section "Custom group cell example" of the following help article: https://docs.telerik.com/devtools/winforms/controls/gridview/cells/creating-custom-cells 

    Another solution is demonstrated in the following knowledge base article. Even though it is purposed to display the top summary cells values while the group is being collapsed, you can adopt this solution to your scenario and show whatever information you need: https://www.telerik.com/support/kb/winforms/gridview/details/gridview-with-visible-summary-cells-in-a-collapsed-group

    Feel free to use this approach which suits your requirements best.

    Regards,
    Dess | Tech Support Engineer, Sr.
    Progress Telerik

    Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Back to Top