2 Answers, 1 is accepted
Hi Wayne,
When you say incomplete, are you referring to the custom edit template? That is intentionally left blank because Countries example works without it and the developer is able to use any control they want. I can ask the devs to create a new demo that requires custom edit template for that column. In the meantime, let's see what we can do about your current issue.
The usual reason for not seeing anything in the column is because there is no way for the column to match the data row's property value to an item in the ComboBox's ItemsSource to get the display value.
The data type of the column needs to match the Value of the ComboBox selection (for example, a column has a string property, and the ComboBox holds a list of string). Alternatively, if the column's property is a complex model, you can override ToString in the model and get an automatic match.
Demo
To explain this in a functional way, I've written a demo for you (find it attached) that you can experiment with. Let me walk you through it.
First, we have the OfficeItem data model (this is what the ComboBox will be displaying a list of):
public class OfficeItem
{
public int Id { get; set; }
public string Name { get; set; }
public override string ToString()
{
return this.Name;
}
}Next. there's the Employee data model, where one of the properties is an Office (this is what the DataGrid shows a list of)
public class Employee : NotifyPropertyChangedBase
{
private string name;
private Office office;
public Employee()
{
}
public string Name
{
get => name;
set => UpdateValue(ref name, value);
}
public OfficeItem Office
{
get => office;
set => UpdateValue(ref office, value);
}
}Next, the view model creates two lists. A list of Offices, then a list of Employees. Take care to notice that the employee's office property value actually exists in the Offices list:
public class MainViewModel : NotifyPropertyChangedBase
{
public MainViewModel()
{
Offices = new ObservableCollection<OfficeItem>
{
new(){ Id = 0, Name = "Boston"},
new(){ Id = 1, Name = "San Francisco"},
new(){ Id = 2, Name = "Tokyo"},
new(){ Id = 3, Name = "London"}
};
Employees = new ObservableCollection<Employee>(Enumerable.Range(1, 30).Select(i => new Employee
{
Name = $"Employee {i}",
Office = Offices[0]
}));
}
public ObservableCollection<Employee> Employees { get; }
public ObservableCollection<OfficeItem> Offices { get; }
}Finally, in the DataGrid, we can setup a ComboBoxColumn:
<telerik:RadDataGrid x:Name="EmployeesDataGrid"
ItemsSource="{Binding Employees}"
UserEditMode="Cell"
AutoGenerateColumns="False">
<telerik:RadDataGrid.Columns>
<telerik:DataGridTextColumn PropertyName="Name"
HeaderText="Name" />
<!-- We must set the ItemDisplayBindingPath to 'Name' so that the display string is used for the column and the combobox -->
<telerik:DataGridComboBoxColumn PropertyName="Office"
HeaderText="Office"
ItemsSource="{Binding Offices}"
ItemDisplayBindingPath="Name"/>
</telerik:RadDataGrid.Columns>
</telerik:RadDataGrid>Notice the following important takeaways:
- The column's PropertyName is set to the 'Office' property of Employee object
- The column's ItemDisplayBindingPath is set to the Name property of the Office object
This is all you need for complex object setup. It's the same for a List<string>, except you do not have to set the ItemDisplayPath. Here's what the demo looks like at runtime:
-In edit mode:
- After selection is made, and in normal display mode:
ContentTemplate and EditTemplate
However, if you have a foreign key in the main data model, this is more complex and is not implicitly supported. There's a solution to this... just use the CellContentTemplate and CellEditTemplate to define your own ComboBox.
The BindingContext of both DataTemplates is the row's data item, this is no different than using a ComboBox in a CollectionView's DataTemplate.
Let's say for example that the Employee data model uses a foreign key int instead of the OfficeItem for a property:
public class Employee : NotifyPropertyChangedBase
{
private string name;
private int officeId;
public Employee() { }
public string Name
{
get => name;
set => UpdateValue(ref name, value);
}
public int OfficeId
{
get => officeId;
set => UpdateValue(ref officeId, value);
}
}Now, for the ComboBoxColumn, you can just use a standalone RadComboBox or ListPicker like you normally would for any two-way bound selection property:
Caveat
There's an important caveat to keep in mind here. You also need to customize the normal CellContentTemplate because you don't want to display the int value, but the name of the matching item in the Offices collection. You will need to write some custom logic to do this.
Here's an example where I use an IValueConverter and pass both the OfficeId and the column's reference to a converter:
Finally, this is the converter's logic. As you can see, we used the column's reference to be able to access the Offices collection in an elegant manner. Then we search for any item that matches the foreign key ID and return that item's name:
In the demo project, you will find that I've left some of my explanations in commented out XAML. I've left the most custom one uncommented.
If you have any further trouble with your project, please help us to help you by sharing all the code we need to replicate the issue. You can do that here in the public forum post, or in a private priority support ticket by going here https://www.telerik.com/account/support-center/contact-us .
Regards,
Lance | Manager Technical Support
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
Very bad implementation with lots of bugs and assumptions.
1.You use the SelectedIndex because in your sample the ids are in order starting with zero. A very bad assumption.
2.If you want to convert an existing application where the model exists with integer value, just like every DAL out there, you add thousand of lines to the solution, because of one property, Value Field in combo box.
3.You do not even support Null Value in your sample here.
4Look at the combobox of your other platforms for example Kendo UI, Winforms, ASPX whatever. All support primitive values.
This is a must enhancement for a data application which heavily depends on combo box for lookup. It stops companies from continuing with your product. And also I see the quality of the given solution to existing problems of your components is very bad.
Hi Wayne,
Is the demo I just attached for you not working? As you can see in the screenshots, it is working for me... I've attached the code which you can compile and run on your side.
If yes, then it might be a situation where you're using a preview SDK. Please use my demo's exact settings, just download, compile and run it as-is. Although we are shipping support for .NET 8 RC2, it is still a preview. Switch your app to use .NET 7 to confirm if this is the case.
Once .NET 8 is released, we will have QA in place to ensure everything is working for .NET 8 targeting projects, too. The good news is that there is zero difference in functionality for Telerik UI for Maui regardless of which version of .NET you choose. This is an intentional decision as we want developers to have a common API set across all releases of .NET 6, 7, and 8.
Regards,
Lance | Manager Technical Support
Progress Telerik
Rank 1
Hi,
I haven't gotten back to this project. It takes a back seat because of implementation issues with telerik, hoping for .net 8 release to address multiple bugs fix in 8, but not in .net 7. At this point, we need evaluate how to move forward, including giving up on .net Maui. The provided example, especially the need for additional custom code noted in the caveat, demonstrates a poor integration .net Maui and an immature product. The goal of offsetting development costs by purchasing UI controls is quickly lost in my experience with the Telerik UI Maui components. Not to mention the documentation and demos are not complete or fully functional.
Thanks,
Wayne
Hi Wayne,
I have reviewed all comments and answers given and cannot understand what is the exact issue. here? Whether the project Lance share was of help?
You can open a support ticket and share your feedback with us for the documentation, what are the showcase scenarios that are missing in the samples applications? We can review them and based on the feedback we can consider how to improve the docs and demos.
What is the exact scenario you want to achieve with the DataGrid and picker/ComboBox column?
Looking forward to your reply.
Rank 1
Hi Didi,
Sorry for the late response. I was assigned to another project for a while. I downloaded the sample provided by Lance and it doesn't work. Please download it and you will likewise get an error:
DataGridCellEditContext OfficeId RadComboBox.SelectedIndex Int32 'OfficeId' property not found on 'Telerik.Maui.Controls.Compatibility.DataGrid.DataGridCellEditContext', target property: 'Telerik.Maui.Controls.RadComboBox.SelectedIndex' C:\Users\begin\Downloads\CustomComboColumnForWayne\TelerikMauiAppTest\MainPage.xaml 60 TelerikMauiAppTest
I guess this is 90% of my issues. Most of the samples provided by Telerik for Maui don't function correctly. For example, I'm using a RadRegexMaskedEntry for lat/longs in an app I'm building.
<telerik:RadRegexMaskedEntry Grid.Row="0" Grid.Column="3" x:Name="LatitudeMaskedEntry" Mask="^[3][6-9][\s..]\d{6}$" Placeholder="##.######" Value="{Binding Path=ComplianceHeaderModel.LATITUDE, Mode=TwoWay}" AllowNullValue="True" AutomationId="includePromptMask" />
<Label Grid.Row="1" Grid.Column="2" Text="Longitude (-##.######):" />
When the page loads, all the telerik controls with a mask, don't display unless you click in the field. Only after you click in it will you see the text. I'm using telerik controls in mvc projects, win forms, web forms, etc...and they work fine. For .Net Maui, good luck getting your data to display, or an item to work as described in the documentation. Trying using the sample provided by Lance and you will get an error and select a city like San Fran and see what happens to the grid...it goes back to Boston, first item in the list. If you download the .net Maui demo, you will get binding errors. I can see the masks working in the demo, but when I try to implement it, it doesn't displaying properly. Why? No idea, but in general, I'm running into issues like this for most of the .net Maui controls. I've had way more success with the Maui Community Toolkit and it's free...my paid for telerik controls mostly don't work.
Hi Wayne,
Could you please open a support ticket and attach a sample project where the described issues can be reproduced? I will need the project to research and investigate the behavior further.
As you mentioned in our demo the masks work, in your sample doesn't. Maybe something how the demo is setup, etc.
Regarding to the binding errors, I assume you are talking about WinUI as a platform. If this is so, the binding errors are fake errors, the app still runs and builds as expected.
Rank 1
Hi Didi,
For the display issue, I've already replaced them with community toolkit behaviors and they work great. I could go through an older branch, but that might just result in additional issues. Instead, could you look at the sample provided by Lance? If you try to run his sample, it doesn't work. The primary concern is that we need samples that function. If you are doing an edit in a grid, select a dropdown and pick a city, it should display the selected item and retain those values so they can be posted to the backend. The sample provided doesn't do that. Please download it and give it a try.
Thanks,
Wayne
Hi Wayne,
I tested the case with the 3rd option and yes I reproduced the behavior. If you debug the code you will notice that it happens because of the converter. There is a logic for matching the item:
var matchingItem = offices.FirstOrDefault(office => office.Id == officeId) as OfficeItem;
return matchingItem.Name;I redirects to the 0 index("Boston").
Now let me share more details for the sample. The sample Lance shared is just an example. So if your scenario is different, then extend the logic to match the case. If you need help with the custom implementation, contact the Professional Services team.
For your case with the picker/combo column, you can use many approaches. The three approaches Lance shares or another approach is using a Template column. Here is the code for the template column and ComboBox control inside the template:
<telerik:DataGridTemplateColumn.CellContentTemplate>
<DataTemplate x:DataType="local:Employee">
<telerik:RadComboBox ItemsSource="{Binding BindingContext.Offices, Source={x:Reference EmployeesDataGrid}}"
InputTransparent="False"
SelectionMode="Single"
DisplayMemberPath="Name"
SearchTextPath="Name"/>
</DataTemplate>
</telerik:DataGridTemplateColumn.CellContentTemplate>
</telerik:DataGridTemplateColumn>If you want the Telerik support to research the case with the masks value visualization, open a support ticket and send us a sample project.