This is a migrated thread and some comments may be shown as answers.

RadListView Item Size

2 Answers 52 Views
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 05 Jul 2018, 09:14 PM

Hello,

I'm building an application that allows the user to select a series of text items from a grid, and add them to a list.  The list is unbound with the horizontal and vertical scroll bars off, and set to:

((IconListViewElement)this.Selected_Text_Listview.ListViewElement.ViewElement).Orientation = Orientation.Horizontal

Selected_Text_Listview.AllowArbitraryItemWidth = true;

Selected_Text_Listview.AllowArbitraryItemHeight = true;

If the width of the items exceeds the total width of the Listview, items are dropped from the front of the list until they fit.  I am doing this by determining the "Actual Size" of the items and making sure they fit within the width of the Listview (taking margins into consideration) and continuing to drop until the remaining items fit.

This works well, however the problem I am encountering is when the text that is selected is itself too large to fit within the given Listview region.  When a single item is too large to fit, I would like to add "...", and truncate the text from the beginning until it fits.  For example:

"Text that is too large to fit" => "...t that is too large to fit"

When I reach this condition, I am recursively removing portions of the item text hoping to find the point when the text will fit and stop, but this does not seem to be changing affecting the item's size and the recursion continues until the string is empty.

Below is a portion of the code:

private bool Adjust_Text_List_Items()

{

    int total_item_width = 0;

    //Compute Total Width of Items
    foreach (ListViewDataItem Text_Item in this.Selected_Text_Listview.Items)
                total_item_width += Text_Item.ActualSize.Width + this.Selected_Text_Listview.ItemSpacing;
                

    //Determine if items are too large to fit

    if (total_item_width >= this.Selected_Text_Listview.Width -  this.Selected_Text_Listview.Margin.Left - this.Selected_Text_Listview.Margin.Right)
                {

                    //Sanity Check
                    if (this.Selected_Text_Listview.Items.Count() > 0)
                    {
                        //Name of single node too long, must truncate
                        if(this.Selected_Text_Listview.Items.Count() == 1)
                        {
                            ListViewDataItem first_node = this.Selected_Text_Listview.Items.First();

                            if (!string.IsNullOrEmpty(first_node.Text))
                            {
                                first_node.Text = first_node.Text.Substring(1);
                                this.Selected_Text_Listview.ListViewElement.SynchronizeVisualItems();       //This is not updating the actual size of the item!

                                //Continue Looping Until the string fits
                                Adjust_Text_List_Items();   
                            }

                            else

                            {

                               first_node.Text = "EMPTY STRING!!!";

                               return false;

                             }

                         }

                      }

...

}

Is there a way to update the actual size of the item after changing the text, or is there perhaps an alternative approach that I could use?

 

2 Answers, 1 is accepted

Sort by
0
Accepted
Dess | Tech Support Engineer, Principal
Telerik team
answered on 06 Jul 2018, 08:15 AM
Hello, Mike,   
 
When you change the text of a data item, it is automatically reflected to the visual items. The SynchronizeVisualItems method refreshes the view element and triggers the VisualItemFormatting event. In order to force measuring the items in order to get the ActualSize recalculated, you can use the following code snippet: 

this.radListView1.ListViewElement.InvalidateMeasure(true);
this.radListView1.ListViewElement.UpdateLayout();

If you are still experiencing any further difficulties, it would be greatly appreciated if you can provide a sample project demonstrating the problem you are facing. Thus, we would be able to investigate the precise case and assist you further.

I hope this information helps. If you have any additional questions, please let me know. 
 
 
Regards,
Dess
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Mike
Top achievements
Rank 1
answered on 06 Jul 2018, 01:21 PM

That did the trick, 

Thanks!

Asked by
Mike
Top achievements
Rank 1
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Mike
Top achievements
Rank 1
Share this question
or