[Solved] RadDataGrid DataGridComboBoxColumn problem

[Paul]

Hi
I have been trying to get your DataGridComboBox working correctly in a RadDataGrid when using the default external editor (UserEditMode="External").
To help illustrate my point I have amended one of your DataGridUWP examples with a simple combobox binding.
I have used different methods of binding with differing results and have commented the example code below.
I seem to be able to either get the data in the grid or in the edit combobox, but can never get the correct item to be selected in the combobox on edit.

Many thanks.

Paul

Code follows:
<----------------------------------xaml-------------------------------

<Page
    x:Class="DataGridUWP.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DataGridUWP"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerikgrid="using:Telerik.UI.Xaml.Controls.Grid"
    mc:Ignorable="d">
    <Page.Resources>
        <CollectionViewSource x:Key="options" Source="{x:Bind cbOptions}"/>
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <telerikgrid:RadDataGrid ItemsSource="{x:Bind data}" x:Name="dataGrid"
           UserEditMode="External"
           AutoGenerateColumns="False" >

            <telerikgrid:RadDataGrid.Columns>
                <telerikgrid:DataGridTextColumn PropertyName="Name" />

                <!--Displays in grid. Doesn't display items in drop down-->
                <telerikgrid:DataGridComboBoxColumn PropertyName="Col1" x:Name="Col1"
                          ItemsSource="{Binding Source={StaticResource options}}"
                          DisplayMemberPath="Name" />

                <!--Displays in grid. Doesn't display items in drop down-->
                <telerikgrid:DataGridComboBoxColumn PropertyName="Col2" x:Name="Col2"
                          ItemsSource="{Binding cbOptions}"
                          DisplayMemberPath="Name"/>

                <!--Displays in grid. Displays items in drop down but empty selection-->
                <telerikgrid:DataGridComboBoxColumn ItemsSource="{x:Bind cbOptions}"
                                           PropertyName="Col3" x:Name="Col3"
                                           DisplayMemberPath="Name" />

                <!--Doesn't display correctly in grid. Displays items in drop down, but only with default selected-->
                <telerikgrid:DataGridComboBoxColumn ItemsSource="{x:Bind cbOptions}"
                                           PropertyName="Col4" x:Name="Col4"
                                           DisplayMemberPath="Name" SelectedValuePath="Col4"/>

            </telerikgrid:RadDataGrid.Columns>
        </telerikgrid:RadDataGrid>
    </Grid>
</Page>

 

<-----------------------------------------cs---------------------------------------------

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409

namespace DataGridUWP
{

    public sealed partial class MainPage : Page
    {
        public ObservableCollection<cbOption> cbOptions { get; set; }
        public List<Data> data { get; set; }
        public MainPage()
        {
            this.InitializeComponent();

            this.cbOptions = new ObservableCollection<cbOption>()
            {
                new cbOption(){ Id = 1, Name = "Option1"},
                new cbOption(){ Id = 2, Name = "Option2"}
            };

            this.data = new List<Data>()
            {   new Data() { Name = "Row1", Col1 = new cbOption(){Id=1,Name="Option1"},Col2 = new cbOption(){Id=2,Name="Option2"},Col3 = new cbOption(){Id=1,Name="Option1"},Col4 = new cbOption(){Id=2,Name="Option2" } },
                new Data() { Name = "Row2", Col1 = new cbOption(){Id=2,Name="Option2"},Col2 = new cbOption(){Id=2,Name="Option2"},Col3 = new cbOption(){Id=2,Name="Option2"},Col4 = new cbOption(){Id=1,Name="Option1" } },
                new Data() { Name = "Row3", Col1 = new cbOption(){Id=2,Name="Option2"},Col2 = new cbOption(){Id=2,Name="Option2"},Col3 = new cbOption(){Id=2,Name="Option2"},Col4 = new cbOption(){Id=2,Name="Option2" } },
            };
        }
    }

    public class Data
    {
        public string Name { get; set; }
        public cbOption Col1 { get; set; }
        public cbOption Col2 { get; set; }
        public cbOption Col3 { get; set; }
        public cbOption Col4 { get; set; }
    }

    public class cbOption
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

 

[Yana]

Hi Paul,

I have checked the provided snippet and the following approach works properly on my side:

<telerikgrid:DataGridComboBoxColumn ItemsSource="{x:Bind cbOptions}"
                            PropertyName="Col3" x:Name="Col3"
                            DisplayMemberPath="Name" />

<telerikgrid:DataGridComboBoxColumn ItemsSource="{x:Bind cbOptions}"
                            PropertyName="Col4" x:Name="Col4"
                            DisplayMemberPath="Name" />

SelectedValuePath is not needed as you have the whole cbOption object as a reference in the business object. 

I have attached my test app to this thread, could you download it and test it? Please let me know whether the 3rd and 4th columns are properly edited through the external editor at your side.

Regards,
Yana
Progress Telerik

[Paul]

Hi Yana

Thanks for your response.
Unfortunately, the Col3 and Col4 combo boxes do not select an entry upon BeginEdit.
I have attached a screenshot.

I am running Visual Studio 2017 15.9.13, targeting Windows 10 1809 (Build 17763).

Many thanks
Paul

[Yana]

Hi Paul,

Thank you for sending the screenshot.

Indeed, the SelectedItem is not shown the first time you try to edit the item, on the subsequent edits, the ComboBoxes in the external editor have proper predefined selection. I am sorry I missed that.

I am afraid there isn't a straightforward way to achieve the scenario with the built-in ExternalEditor  -  the ComboBoxes inside it are using different approach from the one used in internal editors for setting SelectedItem.

You could try to manually create the editor with the help of RadDataForm control and the DataGrid Commands  - you can show the DataForm on the Grid CellDoubleTap command and use the editing commands to commit/cancel the editing action.

Regards,
Yana
Progress Telerik