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>1 Answer, 1 is accepted
Hi Mike,
Let me get straight to the questions:
1) native adding and deleting rows
I am not sure what you mean by native adding and deleting rows? Could you please share what is the exact scenario you want to achieve, if you can attach some images?
You can add/delete rows by using the collection (Add/Remove methods) bound to the ItemsSource. For example you can add buttons (external UI) or add button(s) inside the DataGrid column. And from these button(s) command/event to add/remove items to/from the collection bound to the DataGrid ItemsSource.
2) style the column headers or cell content style with a custom colour using
The error message explains why the behavior occurs. The properties are not bindable. We have a feature request about this: https://feedback.telerik.com/maui/1570690-datagrid-provide-support-for-property-binding-in-datagridborderstyle-and-datagridcellstyle-class You can cast you vote for the item.
Let me know if you have any further questions.
Regards,
Didi
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Thanks Didi, really appreciate the quick reply.
What I meant re adding rows natively was doing it the way you could in WinFroms or WPF where there was always an empty row at the bottom of the grid, so you could just enter the new values and keep going. Since the grid was bound to a collection in the VM the new row was automatically added so it wasn't necessary to do any extra XAML or coding. (Deleting may not have been native but I'm less worried about that)
Not a huge problem though, I just wanted to know if this was supported before I implemented separate add/deleted buttons.
Thanks for the link re the dynamic resources issue - I've voted for that change to be made so in the meantime I'll style it explicitly.
Hi Mike,
Thank you for the details on the scenario you are looking for.
We do not have an empty row in the Telerik MAUI DataGrid, for example you can add such when the values are null or empty string. And visualize buttons inside the columns template. Then from these buttons you can add or delete additional rows.
Here is a sample example: You have to implement a converter that will display the buttons if the values for country capital are null or empty string.
<telerik:RadDataGrid x:Name="dataGrid" AutoGenerateColumns="False">
<telerik:RadDataGrid.Columns>
<telerik:DataGridTextColumn PropertyName="Country">
<telerik:DataGridTextColumn.CellContentTemplate>
<DataTemplate>
<HorizontalStackLayout>
<Label Text="{Binding Country}"/>
<Button Text="Add" IsVisible="{Binding Country, Converter={StaticResource IsButtonVisible}}"/>
<Button Text="Delete" IsVisible="{Binding Country, Converter={StaticResource IsButtonVisible}}"/>
</HorizontalStackLayout>
</DataTemplate>
</telerik:DataGridTextColumn.CellContentTemplate>
</telerik:DataGridTextColumn>
<telerik:DataGridTextColumn PropertyName="Capital"/>
</telerik:RadDataGrid.Columns>
</telerik:RadDataGrid>public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
this.dataGrid.ItemsSource = new List<Data>
{
new Data { Country = null, Capital = null},
new Data { Country = "South Africa", Capital = "Cape Town"},
new Data { Country = "Nigeria", Capital = "Abuja" },
new Data { Country = "Singapore", Capital = "Singapore" }
};
}
}
public class Data
{
public string Country { get; set; }
public string Capital { get; set; }
}If you have further questions on Telerik MAUI controls, I will be glad to assist further.
I noticed you open forum threads, if you want you can also submit support tickets.