RadDataForm column merging

0 Answers 38 Views
DataForm
Satya
Top achievements
Rank 1
Satya asked on 17 Aug 2023, 05:35 PM

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
Telerik team
commented on 18 Aug 2023, 05:49 AM

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
Top achievements
Rank 1
commented on 22 Aug 2023, 06:06 PM | edited

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
Telerik team
commented on 23 Aug 2023, 05:44 AM

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: 

 

 

 

No answers yet. Maybe you can help?

Tags
DataForm
Asked by
Satya
Top achievements
Rank 1
Share this question
or