How to display blocks of text within a list?

1 Answer 189 Views
LayoutControl ListControl ListView Panel
Clint
Top achievements
Rank 1
Iron
Iron
Iron
Clint asked on 08 Sep 2021, 05:45 PM

I am required to call an API endpoint, which is return a list of strings. This I have working.

Each item within that list is a daily announcement which is a block of text, that needs to be displaying within a scrolling parent frame. Please refer to the attached .PNG file with a screenshot of the mockup I got from our project managers.

I am not sure which is the best way to do this, as I'm relatively new to Telerik Winform UI. I am looking at either a:

DataGridView
ListControl
List of labels within a panel.

Just trying to find the most effective and simple way to do this. Any suggestions?

 

 

1 Answer, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 09 Sep 2021, 12:50 PM

Hello, Clint,

RadListView is a suitable control for displaying the list of strings in the illustrated way. I have prepared a sample code snippet for your reference: 

        public RadForm1()
        {
            InitializeComponent();

            this.radListView1.AllowArbitraryItemHeight = true; 
            this.radListView1.VisualItemFormatting += radListView1_VisualItemFormatting;
            List<string> news = new List<string>();
            for (int i = 0; i < 10; i++)
            {
                news.Add("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt aliquam eleifend. ");

                news.Add("Donec bibendum sed nibh ac laoreet. Suspendisse vehicula at elit id blandit. Cras eu facilisis metus, a malesuada ex. Nam a sem id tellus vulputate interdum.");
            }

            this.radListView1.DataSource = news;
        }

        private void radListView1_VisualItemFormatting(object sender, ListViewVisualItemEventArgs e)
        {
            e.VisualItem.TextWrap = true;
            e.VisualItem.DisableHTMLRendering = false;
            e.VisualItem.Text = "<html><b>" + DateTime.Now + "</b>" + Environment.NewLine + e.VisualItem.Data.Text;

            e.VisualItem.DrawBorder = true;
             
            e.VisualItem.BorderBoxStyle = BorderBoxStyle.FourBorders;
            e.VisualItem.BorderLeftWidth = 0;
            e.VisualItem.BorderTopWidth = 0;
            e.VisualItem.BorderRightWidth = 0;
            e.VisualItem.BorderBottomWidth = 2;
            e.VisualItem.BorderBottomColor = Color.Black;
        }

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

Regards,
Dess | Tech Support Engineer, Principal
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/.

Clint
Top achievements
Rank 1
Iron
Iron
Iron
commented on 09 Sep 2021, 01:12 PM

Wow, thanks! You make it look all too easy.

This is exactly what I was trying to achieve. After a day of trying I was able to use the RadListView to get it mostly looking like that, but that visual item formatting trick really made that dynamic list possible.
Tags
LayoutControl ListControl ListView Panel
Asked by
Clint
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Share this question
or