Questions on UI for .NET MAUI Forum

0 answers

788 views

[UICollectionView] Performing reloadData as a fallback - Invalid update: invalid number of items in section

Hi, I am new to .NET Maui and Telerik, I'm developing a mobile application that needs to display a list of shops, grouped by city. I also need to open a details page when a specific item is clicked.

I don't have control over the web api providing the data so I have to use it "as is", meaning I'm getting over 1500 items in one go and I am storing it in a local variable.

To create the list I used the RadListView with a GroupDescriptor and it seemd to work fine... it was a bit laggy on startup but acceptable for my use case. However, clicking on an item would cause the application to freeze for several seconds on iOS.

To solve the problem I tried using the LoadOnDemand feature, cycling through the items stored in my local variable and adding them to a ListViewLoadOnDemandCollection, which fixed the original problem but created a new one.

On Android everything works fine but on iOS whenever items are added to the list the app freezes for some time, which increase with every consecutive load. I noticed that my code to load new items is executed istantly but then the rendering takes a lot of time and the following error is displayed in my logs:

Invalid update: invalid number of items in section 8. The number of items contained in an existing section after the update (16) must be equal to the number of items contained in that section before the update (16), plus or minus the number of items inserted or deleted from that section (1 inserted, 0 deleted) and plus or minus the number of items moved into or out of that section (0 moved in, 0 moved out). Collection view: <TKCollectionView: 0x7fe80a09a400; baseClass = UICollectionView; frame = (0 0; 392 642); clipsToBounds = YES; autoresize = W+H; gestureRecognizers = <NSArray: 0x6000020144e0>; backgroundColor = UIExtendedGrayColorSpace 0 0; layer = <CALayer: 0x6000027f0700>; contentOffset: {0, 2985.3333333333335}; contentSize: {392, 4200}; adjustedContentInset: {0, 0, 0, 0}; layout: <TKListViewLinearLayout: 0x7fe8099545d0>; dataSource: <Telerik_Maui_Controls_Compatibility_DataControlsRenderer_iOS_TKExtendedListView: 0x7fe80920bde0; frame = (0 0; 392 642); backgroundColor = UIExtendedGrayColorSpace 0 0; layer = <CALayer: 0x6000027f0300>>>

This is my code:

XAML:

<telerik:RadListView ItemsSource="{Binding SourceItems}"
                     x:Name="listView"
                     VerticalScrollBarVisibility="Always"
                     FilterDescriptors="{Binding FilterDescriptors, Mode=OneWayToSource}"
                     IsLoadOnDemandEnabled="{Binding LoadOnDemandEnabled}"
                     LoadOnDemandBufferItemsCount="50"
                     LoadOnDemandMode="Automatic"
                     IsLoadOnDemandActive="{Binding LoadOnDemandActive}"
                     ItemTapped="OnItemSelected">
    [...]
</telerik:RadListView>

ViewModel:

namespace MyApp.ViewModels
{
    public partial class SearchViewModel : ObservableObject
    {
        [ObservableProperty]
        public List<Shop> items;

        [ObservableProperty]
        public ObservableCollection<Shop> sourceItems;

        [ObservableProperty]
        public bool loadOnDemandEnabled = false;

        [ObservableProperty]
        public bool loadOnDemandActive = false;

        public SearchViewModel()
        {
            SourceItems = new ListViewLoadOnDemandCollection(LoadMoreShops);
        }

        public IEnumerable<Shop> LoadMoreShops(CancellationToken cancelationToken)
        {
            ObservableCollection<Shop> result = new ObservableCollection<Shop>();
            LoadOnDemandActive = true;

            try
            {
                int maxIndex = sourceItemsIndex + 50;
                int totalIndex = items != null ? items.Count : 0;
                maxIndex = Math.Min(maxIndex, totalIndex);

                if (maxIndex > sourceItemsIndex)
                {
                    for (int i = sourceItemsIndex; i < maxIndex; i++)
                    {
                        result.Add(Items[i]);
                    }
                }
                else
                {
                    LoadOnDemandEnabled = false;
                    return null;
                }

                sourceItemsIndex = maxIndex + 1;
                LoadOnDemandActive = false;
                return result;
            }
            catch (Exception ex)
            {
                //exception is thrown when the task is canceled. Returning null does not affect the ItemsSource.
                LoadOnDemandActive = false;
                return null;
            }
        }
    }
}

While searching the forum I found a similar issue regarding the ListView for Xamarin Forms (but nothing for MAUI), I'll link the form post in case it might come in handy: https://www.telerik.com/forums/ios-uicollectionview-logs-invalid-update

ListView

asked on 08 May 2023

0 answers

66 views

maui with Material design

Hello,

is there possibility to use telerik maui controls with material design?

thanks in advance

TabView

asked on 22 Mar 2023

0 answers

211 views

RadSegmentedConrol handler not found error when running on android

Getting handler not found error when xaml has a RadSegmentedControl in it on Android. It is working in iOS and other Telerik controls are working in Android but not RadSegmentedControl. Is RadSegmentedConrol supported on Android?

SegmentedControl

asked on 21 Mar 2023

0 answers

214 views

RadDataGrid throwing odd XAML binding errors

I have just implemented a MAUI ContentPage with an completely empty RadDataGrid definition. In my "using" section of the xaml page, I have this entry:

xmlns:dataGrid="http://schemas.telerik.com/2022/xaml/maui"

In the root grid, I have this entry:

<dataGrid:RadDataGrid
	Grid.Row="1">
</dataGrid:RadDataGrid>

When the application is run, I get the following XAML binding errors:

NotificationsViewModel	ActualWidth	RadBorder.MinimumWidthRequest	Double	'ActualWidth' property not found on 'MobyClient.ViewModels.NotificationsViewModel', target property: 'Telerik.Maui.Controls.RadBorder.MinimumWidthRequest'
NotificationsViewModel	HeaderText	Label.Text				String	'HeaderText' property not found on 'MobyClient.ViewModels.NotificationsViewModel', target property: 'Microsoft.Maui.Controls.Label.Text'

A key point is that when I added 'ActualWidth' and 'HeaderText' observable properties, the errors go away. In fact, when I run the Telerik MAUI code examples, I see the same errors in the examples "First Look" data grid example:

Telerik.Maui.Controls.Compatibility.DataControlsRenderer.UWP.ExtendedListViewItem	HandleIconPath	Microsoft.UI.Xaml.Controls.BitmapIcon.UriSource, Name='PART_ReorderHandle'	Uri	BindingExpression path error: 'HandleIconPath' property not found on 'Telerik.Maui.Controls.Compatibility.DataControlsRenderer.UWP.ExtendedListViewItem'			
FirstLookViewModel	ActualWidth	RadBorder.MinimumWidthRequest	Double	'ActualWidth' property not found on 'QSF.Examples.DataGridControl.FirstLookExample.FirstLookViewModel', target property: 'Telerik.Maui.Controls.RadBorder.MinimumWidthRequest'			
FirstLookViewModel	HeaderText	Label.Text				String	'HeaderText' property not found on 'QSF.Examples.DataGridControl.FirstLookExample.FirstLookViewModel', target property: 'Microsoft.Maui.Controls.Label.Text'

Obviously, I either missing something in the Telerik MAUI control setup or there is a bug. Is this a setup issue or a bug? I am also seeing similar binding errors in the RadListView. As a general rule, I do NOT like any binding errors, so this bugs me. Any ideas?

DataGrid

ListView

updated question on 18 Mar 2023

0 answers

83 views

Use 'ColumnSpan' with column footers?

It doesn't seem this is possible, correct? Could it be added as a feature request?

For example, I may want to use the footer row as a type of status message and would like to have the entire grid width to work with.

Thanks,

-ldl-

DataGrid

asked on 14 Mar 2023

0 answers

116 views

Dataform data binding

Is it possible to bind a MAUI data form to business data? All samples only bind to classes but not to any variables that contain data. Any sample would be much appreciated!

Regards Gerhard

DataForm

asked on 13 Feb 2023

0 answers

226 views

Telerik NuGet fails behind a proxy

I added the Telerik Nuget server to Visual Studio Nuget package manger settings and it asked for a username and password. I entered my email and password and then I see this:

[Telerik NuGet] Unable to load the service index for source https://nuget.telerik.com/v3/index.json.
The ServicePointManager does not support proxies with the https scheme.
Failed to restore C:\Users\[username]\source\repos\TelerikMauiApp1\TelerikMauiApp1\TelerikMauiApp1.csproj (in 12.41 sec).
NuGet package restore failed. Please see Error List window for detailed warnings and errors.

Please tell me how to setup/modify/config my settings for a proxy.

Thank you,

-Josh

General Discussions

Installer and VS Extensions

updated question on 26 Oct 2022

0 answers

54 views

Microsoft.iOS / Microsoft.Android

Hello,

Will Telerik release native controls for Microsoft.iOS and Microsoft.Android Like Xamatin.iOS and Xamarin.Android.

Thank you

General Discussions

asked on 28 Sep 2022

0 answers

128 views

RadAutoComplete now allow put Entry into popup

Hi, I found very useful new component RadAutoComplete and create Recipient input control which is loading filtered list from API, is working good. But i found an issue - i'm create Entry input inside the No results template (see below) and it works just fine on MacOS but not working on Windows, i cannot input (focus) Entry inside the popup, is just nothing happens when i click on it.

Entry

Popup

asked on 21 Sep 2022

0 answers

146 views

How to hide dropdownlist in ComboBox

Hey Team,

I got a question want to ask you about when I added a ComboBox with IsDropDownOpen, OpenOnFocus, ItemsSource, IsEditable, Text properties into a view. As you can see my below code.

<telerik:RadComboBox 
                     IsDropDownClosedOnSelection="False"
                     ItemsSource="{Binding Items}"
                     DisplayMemberPath="Name"
                     OpenOnFocus="False" 
                     ItemsSource="{Binding Items}"
                     IsEditable="True"
                     SearchTextPath="Name"
                     DisplayMemberPath="Name" 
                     IsDropDownOpen="False"
                     Text="{Binding SearchValue, Mode=TwoWay}"/>

The drop down list always shows me when RadComboBox gets focus. I did more testing on it, I found if we add Text property with TwoWay mode, it always pops up drop down list even though I set the IsDropDownOpen and OpenOnFocus to False.

I want to confirm do you have a way to hide drop down list if we use Text property with TwoWay Mode? As I want to do more search functionality with RadComboBox.

Thanks

Allen

ComboBox