RadDataForm column merging

[Satya]

Hi,

I was trying to merge the columns in RadDataForm to span a control across multiple coulmns. However I couldn't make it work, can you please help me getting this sorted out. Below is my XAML code

<telerik:RadDataForm x:Name="ToolsForm" AutoGenerateItems="False"
                             HeaderPosition="{OnIdiom Default=Above, Phone=Beside}"
                                     BindingContext="{Binding EditTool}">
<telerik:RadDataForm.LayoutDefinition>
<telerik:DataFormGridLayout ColumnCount="{OnIdiom Phone='1', Desktop='3', Tablet='3'}"
RowSpacing="15"
ColumnSpacing="5"/>
</telerik:RadDataForm.LayoutDefinition>
<telerik:DataFormRadEntryEditor PropertyName="Name" HeaderText="Tool"/>
<telerik:DataFormCustomEditor PropertyName="FactorName" HeaderText="Factor">
<telerik:DataFormCustomEditor.EditorTemplate>
<ControlTemplate>
<telerik:RadComboBox Placeholder="-- Select a Factor --"
Text="{Binding Value, Mode=TwoWay}, Source={RelativeSource Mode=TemplatedParent}"
ItemsSource="{Binding Factors}" DisplayMemberPath="Name"/>
</ControlTemplate>
</telerik:DataFormCustomEditor.EditorTemplate>
</telerik:DataFormCustomEditor>
<telerik:DataFormRadCheckBoxEditor PropertyName="CanView" HeaderText="Can View"/>
<telerik:DataFormRadCheckBoxEditor PropertyName="CanEdit" HeaderText="Can Edit"/>
<telerik:DataFormRadCheckBoxEditor PropertyName="CanDelete" HeaderText="Can Delete"/>
<telerik:DataFormRadEntryEditor PropertyName="User.FirstName"  HeaderText="User" IsReadOnly="True"/>
<telerik:DataFormRadEntryEditor PropertyName="User.Province" HeaderText="Province" IsReadOnly="True"/>
</telerik:RadDataForm>

 

I want in the below format:

| Column1                                                          | Column2                                                      | Column3                                                    |

| Entry                                                               | Combobox                                                                                                                        |

| CheckBox    | CheckBox    | CheckBox         | Entry                                                            | Entry                                                          |

 

Thanks, Satya

[Didi]

Hi Satya, 

Send me an image of the exact behavior you want to achieve. When I have more info on the exact setup you are looking for, I can share whether this can be achieved with the control.

In general you cannot merge columns in DataForm. The control has different layout options, so you can create a custom layout. In addition you can use Grouping to arrange the editors in groups. 

[Satya]

Something like this, I want controls to be arranged in 3 columns but I need the flexibility to span across columns or want more than 1 cnotrol in same column etc... for eg: 3 checkboxes below need to be on same column and combox need to span across column 2 and 3

[Didi]

Hi Satya,

The standard GridLayout DataForm provides arranges the editors automatically based on the set column count. 

If you want to manually arrange the editors you can use custom layout with grid columns and rows: 

<telerik:RadDataForm x:Name="dataForm" AutoGenerateItems="False">
    <telerik:RadDataForm.LayoutDefinition>
        <telerik:DataFormCustomLayout>
            <telerik:DataFormCustomLayout.LayoutTemplate>
                <DataTemplate>
                    <Grid ColumnDefinitions="*,*,*" RowDefinitions="*,*">

                    </Grid>
                </DataTemplate>
            </telerik:DataFormCustomLayout.LayoutTemplate>
        </telerik:DataFormCustomLayout>
            
    </telerik:RadDataForm.LayoutDefinition>
    <telerik:RadDataForm.BindingContext>
        <local:EditorsViewModel/>
    </telerik:RadDataForm.BindingContext>
    <telerik:DataFormRadEntryEditor PropertyName="FirstName" Grid.Column="0" Grid.Row="0"/>
    <telerik:DataFormRadCheckBoxEditor PropertyName="Visited" Grid.Column="0" Grid.Row="1"/>

    <telerik:DataFormDatePickerEditor PropertyName="StartDate" Grid.Column="1" Grid.Row="0"/>
    <telerik:DataFormDatePickerEditor PropertyName="EndDate" Grid.Column="1" Grid.Row="1"/>

    <telerik:DataFormRadComboBoxEditor PropertyName="Accommodation" Grid.Column="2"/>
</telerik:RadDataForm>

And the result: