[Solved] DataFormComboBoxField

[Gonzalo]

How could I display multiple columns in a DataFormComboBoxField within off course a RadDataForm?

Thanks,

G

[Maya]

Hi Gonzalo,

The DataFormComboBoxField is a content control and you may customize it by changing its Content:

<telerik:DataFormComboBoxField  >
        <telerik:DataFormComboBoxField.Content>
                <telerik:RadComboBox  />
        </telerik:DataFormComboBoxField.Content>
</telerik:DataFormComboBoxField>

 

Best wishes,
Maya
the Telerik team

[Gonzalo]

Thanks Maya.

[Gonzalo]


Imports System.Collections.Generic

  

Public Class State

  

    Public Property ID() As String

        Get

            Return m_ID

        End Get

        Set(value As String)

            m_ID = value

        End Set

    End Property

  

    Private m_ID As String

  

    Public Property Name() As String

        Get

            Return m_Name

        End Get

        Set(value As String)

            m_Name = value

        End Set

    End Property

  

    Private m_Name As String

  

    Public Shared Function Getstates() As List(Of State)

        Dim states As New List(Of State)()

  

        states.Add(New State() With {.ID = "SC", .Name = "South Carolina"})

  

        Return states

    End Function

  

End Class

I have this class "State.vb" I want to expose its contents in a multi column combo box where they will select a particular row which will automatically update the table being edited

Currently the XAML code I am using is:

<telerik:DataFormComboBoxField SelectedValuePath="ID"
                               DisplayMemberPath="Name"
                               DataMemberBinding="{Binding STATECODE, Mode=TwoWay}"
                               ItemsSource="{Binding States, Source={StaticResource ABCViewModel}}"
                               Label="State"
                               Grid.Row="1"
                               Grid.Column="1" />

which displays only the state name. I would like two display 2 columns:
1. the two character state code
2.Its name

The model view I am using is:

Imports System.Collections.Generic

Public Class ABCViewModel

...


    Public ReadOnly Property States() As List(Of State)
        Get
            Return State.Getstates()
        End Get
    End Property

...

End Class

How could we use the format below to get two columns showing but with the same results as if we only used the regular behavior for DataComboBoxField...Yes this assigment requires me to do VB.NET although I prefer C#.. Best wishes..

<telerik:DataFormComboBoxField  >
        <telerik:DataFormComboBoxField.Content>
                <telerik:RadComboBox  />
        </telerik:DataFormComboBoxField.Content>
</telerik:DataFormComboBoxField>

[Maya]

Hi Gonzalo,

You may do something similar to:

<telerik:DataFormComboBoxField                                                    DataMemberBinding="{Binding CountryID, Mode=TwoWay}" >
                        <telerik:DataFormComboBoxField.Content>
                            <telerik:RadComboBox SelectedValue="{Binding ID}"
                                                 ItemsSource="{Binding Countries, Source={StaticResource MyViewModel}}" >
                                <telerik:RadComboBox.ItemTemplate>
                                    <DataTemplate>
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition />
                                                <ColumnDefinition Width="*"/>
                                            </Grid.ColumnDefinitions>
                                            <TextBlock Text="{Binding ID}"/>
                                            <TextBlock Text="{Binding Name}"  Grid.Column="1"/>
                                        </Grid>
                                    </DataTemplate>
                                </telerik:RadComboBox.ItemTemplate>
                            </telerik:RadComboBox>
                        </telerik:DataFormComboBoxField.Content>
                    </telerik:DataFormComboBoxField>

 
The values in the two TextBlocks should be those from the source for the combo box .

All the best,
Maya
the Telerik team

[Gonzalo]

Dear Maya,

Thanks for your help Close to the goal line :-). Almost there... One of the expected behavior with the original approach (regular combo) was that as you navigate from row to row the combo displays the values is synched to (as in originalbehavior.jpg). In our case state codes but when you click the drop down boxed a multi-column list would display. As per your instructions I am getting the 2-column list which is great (after new code 2.jpg) but when I navigate from row to row it does not display the code or description (afternewcode.jpg).

This is the code as it stands right now...

<telerik:DataFormComboBoxField DataMemberBinding="{Binding HSTATE, Mode=TwoWay}" Grid.Row="1"
                               Grid.Column="1">
    <telerik:DataFormComboBoxField.Content>
        <telerik:RadComboBox SelectedValue="{Binding ID}"
                             ItemsSource="{Binding States, Source={StaticResource ABCViewModel}}">
            <telerik:RadComboBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding ID}" />
                        <TextBlock Text="{Binding Name}"
                                   Grid.Column="1" />
                    </Grid>
                </DataTemplate>
            </telerik:RadComboBox.ItemTemplate>
        </telerik:RadComboBox>
    </telerik:DataFormComboBoxField.Content>
</telerik:DataFormComboBoxField>

As I stated earlier the behavior hoped for is:
when navigating the selected value should be displayed (as it was with the originalbehavior.jpg) right now the field is blank (afternewcode.jpg)  until you click the dropdown and select a value...

Best regards,

G

[Maya]

Hi Gonzalo,

Firstly, I need to apologize as I might have misled you here. The setting of the RadComboBox should be as follows:

<telerik:RadComboBox SelectedValue="{Binding CountryID, Mode=TwoWay}" SelectedValuePath="ID"
                                                     ItemsSource="{Binding Countries, Source={StaticResource MyViewModel}}" >
                                    <telerik:RadComboBox.ItemTemplate>
                                        <DataTemplate>
                                            <Grid>
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition />
                                                    <ColumnDefinition Width="*"/>
                                                </Grid.ColumnDefinitions>
                                                <TextBlock Text="{Binding ID}"/>
                                                <TextBlock Text="{Binding Name}"  Grid.Column="1"/>
                                            </Grid>
                                        </DataTemplate>
                                    </telerik:RadComboBox.ItemTemplate>
                                </telerik:RadComboBox>

I am sending you the sample project I used for retesting the case so that you can verify the implementation and its behavior right away.
Please let me know in case you need any further assistance.
 

All the best,
Maya
the Telerik team

[Gonzalo]

Dear Maya,

Thanks a lot for all the effort. I waited a little bit to answer since I wanted to try the SP1 release with the new code. After re-building the code I notice the behavior of the ("enhanced") combo box when using  <telerik:RadDataForm.ReadOnlyTemplate> will ignore the fact that it is readonly and will allow you to select a row from the combobox. This behavior should only happen when in Edit mode. Is this a bug?

Best regards,

Gonzalo

[Maya]

Hi Gonzalo,

You may bind the IsEnabled property of the RadComboBox to the Mode property of the DataFormComboBoxField by using a simple IValueConverter:

XAML:
<telerik:DataFormComboBoxField Grid.Row="2" Grid.Column="1"
                                                   SelectedValuePath="ID" x:Name="comboBoxField"
                                                   DataMemberBinding="{Binding CountryID, Mode=TwoWay}" >
                        <telerik:DataFormComboBoxField.ContentTemplate>
                            <DataTemplate>
                                <telerik:RadComboBox SelectedValue="{Binding CountryID, Mode=TwoWay}" SelectedValuePath="ID"
                                                     IsEnabled="{Binding Mode,Converter={StaticResource MyConverter}, ElementName=comboBoxField, Mode=TwoWay}"

                                                     ItemsSource="{Binding Countries, Source={StaticResource MyViewModel}}" >
</telerik:RadComboBox>
                            </DataTemplate>
                        </telerik:DataFormComboBoxField.ContentTemplate>
                    </telerik:DataFormComboBoxField>

C#:
public class MyConverter :IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            var mode = (RadDataFormMode)value;
            return !(mode == RadDataFormMode.ReadOnly);
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }

    }

 

Greetings,
Maya
the Telerik team

[Gonzalo]

Thank you Maya! You rock ;-)