
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;
}
}
}
}I've tested a couple of scenarios and found that in the following cases, the swipe on the tab view does not work on Android
Scenario 1: Controls with gesture recognizers
The first label has a TapGestureRecognizer while the 2nd does not. In my testing, swiping only works on the 2nd label. Note I've tested on several types of gesture recognizers, with and without actual commands. Result stays the same
<telerik:TabViewItem HeaderText="Header">
<Grid BackgroundColor="AliceBlue" RowDefinitions="*,*,*">
<Label
Grid.Row="0"
BackgroundColor="Orange"
HorizontalTextAlignment="Center"
Text="Label With Gesture Recognizer (not working on Android)">
<Label.GestureRecognizers>
<TapGestureRecognizer />
</Label.GestureRecognizers>
</Label>
<Label
Grid.Row="1"
BackgroundColor="AliceBlue"
HorizontalTextAlignment="Center"
Text="Label No Gesture Recognizer (works)" />
</Grid>
</telerik:TabViewItem>
Scenario 2: CollectionView
See below example, but when a CollectionView is swiped over, the swipe does not work<telerik:TabViewItem HeaderText="Log graph">
<Grid BackgroundColor="Orange" RowDefinitions="*,*">
<Grid.Resources>
<ResourceDictionary>
<x:Array x:Key="TestData" Type="{x:Type Color}">
<Color>Aqua</Color>
<Color>Black</Color>
<Color>Blue</Color>
<Color>Fuchsia</Color>
<Color>Gray</Color>
<Color>Green</Color>
</x:Array>
</ResourceDictionary>
</Grid.Resources>
<CollectionView BackgroundColor="Purple" ItemsSource="{StaticResource TestData}">
<CollectionView.ItemTemplate>
<DataTemplate>
<BoxView HeightRequest="50" Color="{Binding}" />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<Label
Grid.Row="1"
BackgroundColor="Red"
Text="this works" />
</Grid>
</telerik:TabViewItem>
I'm sure there's more but these two scenarios are prevelant in our app due to custom controls being used as well as collectionviews.
Tested on iOS without issue.
Hey Team,
I have question for you. Do we support to open dropdown list when RadAutoComplete gets focus?
If yes, how could we I it? Can you provide an example here?
if no, will we add this functionality in the future?
Thanks
Allen
Does the MAUI UI Toolkit work with the MAUI MVVM Community toolkit (), specifically the RelayCommand.
I am trying to configure the ListPicker to work with a RelayCommand but its not firing.
I am using the ListPicker on Windows, Latest Visual Studio, .net and Telerik versions.
XAML
<telerik:RadListPicker x:Name="WorkflowPicker" Placeholder="Select Workfow" ItemsSource="{Binding Workflows, Mode=TwoWay}" DisplayMemberPath="Name" PickerMode="DropDown" IsLooping="False" WidthRequest="300" Margin="3" BackgroundColor="Transparent" SelectedItem="{Binding SelectedWorkflow}">
<telerik:RadListPicker.DropDownSettings>
<telerik:PickerDropDownSettings AcceptCommand="{Binding OnWorkflowsPickerAcceptRelay}" CancelCommand="{Binding WorkflowsPickerCancelCommand}" />
</telerik:RadListPicker.DropDownSettings>
<telerik:RadListPicker.ItemTemplate>
<DataTemplate>
<Label Text="{Binding Name}" HorizontalTextAlignment="Start" VerticalTextAlignment="Center"/>
</DataTemplate>
</telerik:RadListPicker.ItemTemplate>
</telerik:RadListPicker>Page Model
public ICommand WorkflowsPickerCancelCommand { private set; get; }
public MainPageViewModel()
{
this.WorkflowsPickerCancelCommand = new Command(this.OnWorkflowsPickerCancel);
}
private void OnWorkflowsPickerCancel(object obj)
{
// This fires
}
[RelayCommand]
private void OnWorkflowsPickerAcceptRelay(object obj)
{
// This does not fire
}
I am trying to change the font size in my data form by creating a style in the styles.xml file. I was able to set the font size in a DataFormDatePickerEditor and DataFormRadEntryEditor, but not for the DataFormRadNumericEntry. I've tried targeting a label, a RadNumericInput, RadNumericEntry, Entry, RadEntry, and DataFormRadNumericEntryEditor for my style, but to no success. I would also like to set the font size for the validation message from the data annotations. I have attached below screenshots to clarify. Am I targeting the wrong type? Or is there a workaround to change the font sizing?
Thanks,
Nate

After trying too many unsuccessful things and wasting WAAAAAAY TOO MUCH TIME on something that should be simple, I have come to the realization that either the functionality I need is not documented, documented well, or doesn't exist. I just want to use a .png file as the image source for a ButtonToolbarItem, but the only samples, items in the docs, or Google imply that it can only be done with a FontImageSource. If this is true, I think this constraint was a very poor decision on Telerik's behalf. What if a font doesn't exist for the image I NEED to display on a button?
Help me with this or admit this was a shortsighted decision...
Thanks, Steve Miller
steve@mobynet.io
Hi, I found RadPopup has deferent opening behaviors on macOS and Windows. In my sample code, I have two buttons, each of which is attached to a popup.
(1) When I opened the first popup and want to show the second one by clicking Button2. In Windows, I can just directly click Button2 with one click, but in macOS, I need two clicks on Button2: first click for closing Popup1 and 2nd click for showing Popup2.
(2) If I double clicked on Button1, in macOS, the Popup1 would open and then Closed. While in Windows, the Popup1 would keep open.
