Questions on UI for .NET MAUI Forum

1 answer

3 views

Does the DataGrid control support native adding and deleting rows?

Hi there,

I've googled, searched this forum and read the docs and from what I can see there is no way in an editable grid for the user to add a new row (or delete an existing one) natively, is this correct?

For example, in my app I have the data grid below which the user enters an auction Lot # and a value of the lot. When the page is rendered the datagrid should be empty but the user would add new rows to enter lots they have bidded on and won, or delete a row if they need to.

I hope I'm wrong but I cannot see a single thing about adding or deleting rows natively so can we only do this by having explicit buttons outside the grid control for adding/deleting and do it all with code behind and/or RelayCommands in the ViewModel?

Or am I using the wrong control? It's such a simple grid (just the two columns with no filtering, grouping etc) is there a better control I could use?

And sorry to ask two questions in one but when I try to style the column headers or cell content style with a custom colour using DynamicResource I get this error:
XFC0009 No property, BindableProperty, or event found for "BackgroundColor", or mismatching type between value and property.

Is it not possible to use custom styling like this?

Many thanks,

Mike

            <ScrollView Grid.Row="7" Grid.ColumnSpan="2" VerticalOptions="Fill" HorizontalOptions="Fill" Margin="10,20,10,10">
                <telerik:RadDataGrid x:Name="grdInsuredAnimals" ItemsSource="{Binding CurrentApplication.AuctionDetails.LotDetails}" 
                                     AutoGenerateColumns="False" UserEditMode="Cell" CanUserResizeColumns="True" ShowGroupHeaderAggregates="False"
                                     UserGroupMode="Disabled" CanUserExpandMultipleRowDetails="False" CanUserReorderColumns="False" >
                    <telerik:RadDataGrid.Columns>
                        <telerik:DataGridComboBoxColumn PropertyName="LotNumber" HeaderText="Lot #" ItemDisplayBindingPath="LotNumber">
                            <telerik:DataGridComboBoxColumn.HeaderStyle>
                                <telerik:DataGridColumnHeaderStyle BackgroundColor="{DynamicResource RA_DarkBlue}" TextColor="White"/>
                            </telerik:DataGridComboBoxColumn.HeaderStyle>
                            <telerik:DataGridComboBoxColumn.CellContentStyle>
                                <telerik:DataGridTextCellStyle TextColor="{DynamicResource RA_Blue}" 
                                               FontSize="15" SelectedTextColor="{DynamicResource RA_Orange}"/>
                            </telerik:DataGridComboBoxColumn.CellContentStyle>
                        </telerik:DataGridComboBoxColumn>
                        <telerik:DataGridNumericalColumn DataMemberBinding="{Binding AnimalValue, StringFormat='{0:N0}'}" PropertyName="AnimalValue" HeaderText="Sum Insured">
                            <telerik:DataGridNumericalColumn.HeaderStyle>
                                <telerik:DataGridColumnHeaderStyle BackgroundColor="{DynamicResource RA_DarkBlue}" TextColor="White"/>
                            </telerik:DataGridNumericalColumn.HeaderStyle>
                        </telerik:DataGridNumericalColumn>
                    </telerik:RadDataGrid.Columns>
                </telerik:RadDataGrid>
            </ScrollView>

DataGrid

answered on 09 May 2024

1 answer

6 views

DataGrid Search as You Type styling

Good afternoon, I would like to know about the styling of DataGrid Search as You Type in the documentation did not find the appropriate material. Did I miss something?

DataGrid

answered on 07 May 2024

1 answer

9 views

ListView within ScrollView

From the Help Page...

The ListView provides UI virtualization, which requires the visual parent to provide vertical or horizontal space. To avoid breaking UI virtualization or gesture mechanisms:

Do not place the ListView inside a StackLayout or inside a ScrollView.
Do not set the ListView to a RowDefinition Height="Auto" Grid definition.

Does this mean that a ListView cant be placed as a child of a Scroll View under any circumstance, or its immediate parent cant be a ScrollView? Same question for the Grid RowDefinition. If using nested grids, must all parent grids rows have a Height specified, or is it only the immediate parent? Also is * ok for the Height?

Seems like ListView is severely limited to being the only control on the page/view if this is the case.

ListView

answered on 06 May 2024

1 answer

4 views

Question re RadSignaturePad example XAML

I'm trying to replicate the signature pad control at this page: https://docs.telerik.com/devtools/maui/controls/signaturepad/events

On the control it shows an 'X' button to clear the signature but the XAML does not seem to include this or set any property etc. If I copy the example XAML into a View it also does not show up (tested in Android and Windows emulator).

So how is this rendered? Is there a property the XAML is missing or did you do some fancy XAML with a separate 'X' button overlaid?

Either way, that page need to be updated either with the correct XAML or to make it clear how the 'X' is being rendered.

Thanks,

Mike

SignaturePad

answered on 06 May 2024

1 answer

5 views

RadSideDrawer in MAUI and Hot Reload

It seems that Hot Reload does not work for any controls with the MainContent or DrawerContent of the RadSideDrawer.

Will there be a fix for this soon as having no hot reload severely slows down development time for us.

SideDrawer

answered on 03 May 2024

1 answer

9 views

RadListView: Is it possible to toggle the grouping UI

I have worked through the grouping help docs to set up a ListView with grouping. I would like to provide a means to group the list elements as follows..

When the Group By Gateway switch is on the list is grouped as shown above. When the switch is off it shows the list without the group headers as shown below....

I have tried to meld the example code to meet my desired outcome by binding the switch to the following property on the view model.

	private bool _isNodeIdGroupSwitchToggled = false;
	public bool IsNodeIdGroupSwitchToggled
	{
		get { return _isNodeIdGroupSwitchToggled; }
		set
		{
			if (SetProperty(ref _isNodeIdGroupSwitchToggled, value))
			{
				UpdateExistingGroupDescriptor(nameof(IsNodeIdGroupSwitchToggled), _isNodeIdGroupSwitchToggled);
			}
		}
	}

	private ObservableCollection<GroupDescriptorBase> _groupDescriptors;
	public ObservableCollection<GroupDescriptorBase> GroupDescriptors
	{
		get { return _groupDescriptors; }
		set { SetProperty(ref _groupDescriptors, value); }

	}

	private void UpdateExistingGroupDescriptor(string propertyToUpdate, bool IsOn)
	{
		if (GroupDescriptors == null)
			return;

		if (IsOn)
		{
			if (GroupDescriptors.Count == 0)
			{
				GroupDescriptors.Add(new ListViewPropertyGroupDescriptor()
				{
					PropertyName = "NodeName",
				});
			}

		}
		else
		{
			if (GroupDescriptors.Count != 0)
			{
				GroupDescriptors.Clear();
			}
		}
	}

The GroupDescriptors collection gets updated as I expected, but the list view does not respond to the new GroupDescriptor when the switch is set to on. If I add the descriptor in the XAML directly it generates the first view, so I am pretty sure the xaml and bindings are set up correctly, it just does not seem to work when I add it on the property updated.

Here is the cobbled together XAML for the prototype...

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
             xmlns:appmodels ="clr-namespace:MauiControlLayout;assembly=MauiControlLayout"
             x:Class="MauiControlLayout.MainPage">

	<ContentPage.Resources>
		<ResourceDictionary>
			<DataTemplate x:Key="ListViewItemTemplate">
				<telerik:ListViewTemplateCell>
					<telerik:ListViewTemplateCell.View>
						<Grid  Padding="28, 0, 0, 0" BackgroundColor="White">
							<VerticalStackLayout>
								<Label Text="{Binding ControllerModel.NodeId}"  TextColor="#6F6F70" FontSize="Small" VerticalOptions="Center" />
								<Label Text="{Binding ControllerModel.ControllerId}" TextColor="#6F6F70" FontSize="Small" VerticalOptions="Center" />
							</VerticalStackLayout>
						</Grid>
					</telerik:ListViewTemplateCell.View>
				</telerik:ListViewTemplateCell>
			</DataTemplate>

			<!-- >> listview-features-header-template-xaml -->
			<DataTemplate x:Key="ListViewGroupHeaderTemplate">
				<Grid BackgroundColor="#007A53">
					<Grid.ColumnDefinitions>
						<ColumnDefinition Width="Auto" />
						<ColumnDefinition />
					</Grid.ColumnDefinitions>
					<Label Text="&#x25B8;" Margin="8, 12, 0, 6" TextColor="DarkGray" FontSize="Medium">
						<Label.Triggers>
							<DataTrigger TargetType="Label" Binding="{Binding IsExpanded}" Value="True">
								<Setter Property="Text" Value="&#x25BE;" />
							</DataTrigger>
						</Label.Triggers>
					</Label>
					<Label Margin="0, 12, 0, 6" Text="{Binding Key}" Grid.Column="1" TextColor="DarkGray" FontSize="Medium" HorizontalOptions="Start" />
				</Grid>
			</DataTemplate>
			<!-- << listview-features-header-template-xaml -->
			<DataTemplate x:Key="HeaderTemplate">
				<StackLayout
				x:Name="GatewayPageHeader"
				Grid.Row="0"
				BackgroundColor="White"
				Padding="0, 0, 0, 3">
					<Grid>
						<Grid.RowDefinitions>
							<RowDefinition Height="Auto"/>
							<RowDefinition Height="Auto"/>
						</Grid.RowDefinitions>
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="Auto"/>
							<ColumnDefinition Width="9*"/>
							<ColumnDefinition Width="1*"/>
						</Grid.ColumnDefinitions>
						<!-- Register Gateway Command -->
						<Label Grid.Column="0" Grid.Row="0" HorizontalOptions="Start" VerticalOptions="Center" Padding="2" FontSize="15" FontAttributes="Bold" Text="Available Gateways" TextColor="#007A53"/>
						<HorizontalStackLayout
							Grid.Column="0"
							Grid.ColumnSpan="3"
							Grid.Row="1"
							HorizontalOptions="StartAndExpand">
							<Label 
								x:Name="GroupByNodeIdEnabled"
								VerticalOptions="Center"
								VerticalTextAlignment="Center"
								Text="Group By Gateway"
								TextColor="#007A53" />
							<Switch x:Name="GroupByNodeIdSwitch"  Grid.Column="1" IsToggled="{Binding IsNodeIdGroupSwitchToggled}" Margin="5,0,0,0" />
						</HorizontalStackLayout>

						<!-- Settings Command -->
						<Image Grid.Row="0" Grid.Column="2" Source="plus_small_green.png" Aspect="AspectFill" WidthRequest="15" HeightRequest="15" Margin="0"/>
						<Frame Grid.Row="0" Grid.Column="2" WidthRequest="25" HeightRequest="25" BackgroundColor="Transparent" BorderColor="Transparent">
							<Frame.GestureRecognizers>
								<TapGestureRecognizer Command="{Binding AddGatewayCommand}"/>
							</Frame.GestureRecognizers>
						</Frame>
					</Grid>
				</StackLayout>
			</DataTemplate>
			<!-- << listview-features-header-template-xaml -->

		</ResourceDictionary>
	</ContentPage.Resources>
	
	
    <ScrollView
			x:Name="mainScrollView"
      BackgroundColor="#007A53">
		<Grid x:Name="mainGrid">
			<Grid.RowDefinitions>
				<RowDefinition Height="Auto" />
				<RowDefinition Height="Auto" />
				<RowDefinition Height="*" />
			</Grid.RowDefinitions>

			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="10*" />
			</Grid.ColumnDefinitions>

			<telerik:RadListView
        x:Name="GatewayListView"  
				Grid.Row="1"
        Grid.ColumnSpan="2"
        ItemsSource="{Binding Controllers}"
        SelectedItem="{Binding SelectedController, Mode=TwoWay}"
				ItemTemplate="{StaticResource ListViewItemTemplate}"
				GroupHeaderTemplate="{StaticResource ListViewGroupHeaderTemplate}"
				HeaderTemplate="{StaticResource HeaderTemplate}" 
        IsItemSwipeEnabled="True"
        SwipeOffset="70, 0, 70, 0"
        SwipeThreshold="10"
        BackgroundColor="Transparent"
        Margin="2">
				<!--<telerik:RadListView.GroupDescriptors>
					<telerik:ListViewPropertyGroupDescriptor PropertyName="NodeName"/>
				</telerik:RadListView.GroupDescriptors>-->

			</telerik:RadListView>


		</Grid>
	</ScrollView>


</ContentPage>

ListView

answered on 03 May 2024

1 answer

5 views

RadChat images?

I've reviewed the documentation and example code, but I'm still unsure how to approach this problem. I have images stored as byte arrays in a database that I need to display in the chat interface. Alternatively, I could use URLs to access the images if that simplifies the process. How can I display these images as messages within the chat?

Chat (Conversational UI)

answered on 03 May 2024

1 answer

57 views

telerikInput:RadNumericInput - Plus/Minus buttons are big

Hi,

Why plus and minus are so big?

   <telerikInput:RadNumericInput x:Name="numericInputRecursEvery" Value="{Binding SelectRecursEvery , Mode=TwoWay}" Minimum="0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" WidthRequest="200" Margin="5"/>

NumericInput

answered on 01 May 2024

0 answers

11 views

RadTreeView SelectedItem Selects Parent Item on ChildItem Selection.

Example: Nothing selected

Selecting The Child: Parent not selected. ( results in parent selected )

Selecting the Child:Parent Selected (results in child selected)

Can the selected item in the tree go directly to the item clicked instead of selecting the parent first?

TreeView

asked on 26 Apr 2024

1 answer

16 views

Using .NET MAUI ScrollView inside a RadSideDrawer control is not scrolling

Hi,

I have implemented Telerik .NET MAUI RadSideDrawer control using the following properties:

1. AreGesturesEnabled="True"

2. TapOutsideToClose="True"

3. DrawerLocation="Bottom"

4. TouchTargetThreshold="0.0" (in order to disable user to swipe up with gesture but with a button click evenet)

5. DrawerLength="300" (I need to set the maximum DrawerHeight in order to see only few available items of a list)

Expected behavior

- Inside the DrawerContent I have a ScrollView with a large set of items and I need to see only a few of them.

- When the RadSideDrawer is opened, the user can have the following abilities:

1. Can close the RadSideDrawer taping outside

2. Can swipe out using control gestures

3. Can Scroll in the RadSideDrawer control's DrawerContent's custom scrollable area

Problematic Real Behavior

Taking into consideration the "Expected behavior" and the predefined five properties above, I can notice that:

1. In order to work properly the "TapOutsideToClose", this happens only when AreGesturesEnabled="True". With these two properties combination, I notice that the custom ScrollView is not working, so I cannot see the rest of the items in my custom list.

2. A workaround could be AreGesturesEnabled="False" and TapOutsideToClose="True". In that case I noticed that the custom Scrollable area is now working, so I can scroll in the rest of the items in my custom list, but TapOutsideToClose action now is not working, so the user cannot close the RadSideDrawer with any way (neither with TapOutside action nor with swiped out gesture).

Thanks in advance,

Thanos

SideDrawer