Hi Telerik Team,

May I kindly ask you if I could use ListView control in .NET MAUI with already grouped structure data type? I guess I could flatten my object source model, but I am interested if it is possible to use below model with ListView control and grouping options?

I have a ViewModel with a property type of ObservableCollection<T> MyProperty where T defined as:
public class T : List<T1>
{
public string Name {get;set;}
public string Area {get;set;}
}
and T1 as below:
public class T1
{
public string Id {get;set;}
public string ImgURL {get;set;}
//..some other properties
}

Currently, when using a NavigationView on smaller screens like a mobile phone you see the NavigationContent first and then through the hamburger menu you can navigate through the items and change page.

I was wondering if there is a way where we see the NavigationItems first? i.e. the NavigationItems take up the entire screen width and height and then clicking on the item navigates to that page.

Take Microsoft Teams for example. On laptops it shows something as a DockLayout with the chat on the left and then navigate to the detailed messages on the right. On a mobile phone tho, the list of chats take the entire screen width and height and clicking on them takes you to that detailed messages.

I was able to get this to work using DockLayout and some other additional code:

- Use onIdiom to get device type.

- Dynamically hide or show parts of dock layout. (for instance hide the right side of the DockLayout and then left takes up the entire space).

- Switch between a ContentView and a ContentPage depending on device and functionality.  On bigger screens with full fledged docklayout, use ContentView. On smaller screens with no docklayout functionality use ContentPage

This does the job but as you can see there are a lot of moving parts and when working on a bigger project this gets hard to manage. 

Can something of this sort be implemented out of the box using Telerik controls or is there already a way to achieve this?

I have tried this sort of thing to create a button that wrap within an area (and scroll if they don't fit)

<ScrollView x:Name="scrollView" Grid.Row="1" Grid.Column="0" VerticalOptions="Fill" HorizontalOptions="Fill">
    <telerik:RadWrapLayout Orientation="Horizontal" BackgroundColor="#404040" VerticalOptions="Fill" HorizontalOptions="Fill">
        <telerik:RadItemsControl x:Name="HashTagList" ItemsSource="{Binding HashTags, Mode=TwoWay}" VerticalOptions="Fill" HorizontalOptions="Fill">
            <telerik:RadItemsControl.ItemTemplate>
                <DataTemplate>
                    <Button Text="{Binding HashTag}" Style="{StaticResource hashTagButtonStyle }" CommandParameter="{Binding HashTag}"></Button>
                </DataTemplate>
            </telerik:RadItemsControl.ItemTemplate>
        </telerik:RadItemsControl>
    </telerik:RadWrapLayout>
</ScrollView>

The buttons are only rendered in a stack, how do we render out buttons that will work like the doc example, except the buttons are added dynamically

Ideally the WrapLayout has an ItemSource and DataTemplate like an Items Control?

Am I missing something?

Some things I have tried

This gives me an exception : Layout cycle detected.  Layout could not complete.

<ScrollView x:Name="scrollView" Grid.Row="1" Grid.Column="0" VerticalOptions="Fill" HorizontalOptions="Fill">
    <telerik:RadWrapLayout Orientation="Horizontal" BackgroundColor="#404040" VerticalOptions="Fill" HorizontalOptions="Fill">
        <FlexLayout Wrap="Wrap" BindableLayout.ItemsSource="{Binding HashTags, Mode=TwoWay}" VerticalOptions="Fill" HorizontalOptions="Fill" FlowDirection="LeftToRight">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <Button Text="{Binding HashTag}" Style="{StaticResource hashTagButtonStyle }" CommandParameter="{Binding HashTag}" FlowDirection="LeftToRight"></Button>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </FlexLayout>
    </telerik:RadWrapLayout>
</ScrollView>

This works (ie not using the WrapLayout)

<ScrollView x:Name="scrollView" Grid.Row="1" Grid.Column="0" VerticalOptions="Fill" HorizontalOptions="Fill" Padding="4, 4, 4, 4" BackgroundColor="#404040">
    <!--<telerik:RadWrapLayout Orientation="Horizontal" BackgroundColor="#404040" VerticalOptions="Fill" HorizontalOptions="Fill">-->
        <FlexLayout Wrap="Wrap" BindableLayout.ItemsSource="{Binding HashTags, Mode=TwoWay}" VerticalOptions="Fill" HorizontalOptions="Fill" FlowDirection="LeftToRight">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <Button Text="{Binding HashTag}" Style="{StaticResource hashTagButtonStyle }" CommandParameter="{Binding HashTag}" FlowDirection="LeftToRight"></Button>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </FlexLayout>
    <!--</telerik:RadWrapLayout>-->
</ScrollView>

I am using the RichTextEditor in our .NET MAUI app and have the following:

  <telerik:RadRichTextEditor
      x:Name="paragraphEditor"
      Grid.Row="1"
      AutomationId="Editor"
      BorderColor="{StaticResource Primary}"
      BorderThickness="1"
      Source="{Binding Test.TestWriteupHTML}" />

public class Test: INotifyPropertyChanged
{
    private string? _testWriteupHTML;

    public string? TestWriteupHTML
    {
        get => _testWriteupHTML;
        set
        {
            if (_testWriteupHTML != value)
            {
                _testWriteupHTML = value;
                OnPropertyChanged(nameof(TestWriteupHTML));
            }
        }
    }
}

I have a method to update the TestWriteupHTMP property, while debugging I can see that it gets updated properly but on the UI the editor is not updating, any suggestions? 

    I attempted to add a dropdown in RadListView. However, when running on an iOS device, clicking the dropdown interferes with the pull-to-refresh functionality, whereas it works fine on Android.

RadListView

custom dropdown popup in RadListView

custom drop-down popup

When I want to select a word in the first line of a text in RichTextBox, then a context menu with "Cut, copy .." appears and hides

the toolbar. So I can't do any action on the selected text. How can I disable the context menu?

Hello,

Even though I have set up VisualState for RadEntry as below; However, RadEntry always has a default background color of white when receiving focus (mouse click) - in WINDOWS platform, it only changes color as in the VisualState setting after moving the mouse out later. Please explain and guide how to solve the problem.

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">
        
        <VisualState x:Name="Normal">
            <VisualState.Setters>
                <Setter Property="BackgroundColor" Value="{AppThemeBinding Dark={StaticResource DarkMode_FrameBackground}, Light= {StaticResource LightMode_FrameBackground}}"/>
            </VisualState.Setters>
        </VisualState>

        <VisualState x:Name="PointerOver">
            <VisualState.Setters>
                <Setter Property="BackgroundColor" Value="#336699"/>
            </VisualState.Setters>
        </VisualState>

        <VisualState x:Name="Focused">
            <VisualState.Setters>
                <Setter Property="BackgroundColor" Value="#336699" />
            </VisualState.Setters>
        </VisualState>

    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Hi,

I am using the ListPickerButtonToolbarItem list picker with MVVM and binding to an observable property,

If I set the selected item to null (so none is selected) this doesnt seem to deselect it
Its not highlighted the same as when its selected but it is still styled differently to the other other items and looks selected when I go back to choose another item.

How do we deselect the item or style the selected item in the toolbar ListPickerButtonToolbarItem so at least it looks the same selected or not selected?