I, too, have been struggling to get the form to look like I want it to. ColSpan for the formitems is great and I formerly used the <div> to get the look I wanted but that functionality was removed from the form a while back.

The code I would like to see is below. Allowing colspan on the form group (to span the columns defined on the form or parent form group) AND Columns to define another group that can have children that span ad represented in the first few lines. 

Flexibility of the TileLayout component (without the resizing) is where my mind goes. The first picture is UGLY but shows what I am trying to get the form to look like. The second picture is as close as I am going to get, it appears. The image as a FormItem won't work because it won't span multiple rows. So I will probably just add a button to the end of the input to popup up the image.

<TelerikForm Columns="3">
    <FormItems>
        <FormGroup ColSpan="2" Class="hide-legend">
            <FormGroup Columns="10" Class="hide-legend"  LabelText="2 of the 3 form columns with items that span full width">
                <FormGroup ColSpan="3" Class="hide-legend">
                    <FormItem Class="hide-legend">
                        <Template>
                            <img />
                        </Template>
                    </FormItem>
                </FormGroup>
                <FormGroup ColSpan="7" LabelText="Online Identification">
                    <FormItem Field="Name"></FormItem>
                    <FormItem Field="ProductURL"></FormItem>
                    <FormItem Field="ImageURL"></FormItem>
                </FormGroup>
            </FormGroup>
            <FormGroup ColSpan="1" Class="hide-legend" LabelText="1 column of data below">
                <FormGroup LabelText="Details">
                    <FormItem></FormItem>
                    <FormItem></FormItem>
                    <FormItem></FormItem>
                    <FormItem></FormItem>
                </FormGroup>
                <FormGroup LabelText="Ratings">
                    <FormItem></FormItem>
                    <FormItem></FormItem>
                    <FormItem></FormItem>
                    <FormItem></FormItem>
                </FormGroup>
            </FormGroup>
            <FormGroup ColSpan="1">
                <FormGroup Class="hide-legend">
                    <FormGroup Columns="1" LabelText="Product Description">
                        <FormItem Field="Description">
                            <Template>
                                <TelerikTextArea @bind-Value="@_editProduct.Description" Class="text-area-lg"></TelerikTextArea>
                            </Template>
                        </FormItem>
                    </FormGroup>
                    <FormGroup Columns="1" LabelText="Product Features">
                        <FormItem Field="Features">
                            <Template>
                                <TelerikTextArea @bind-Value="@_editProduct.Features" Class="text-area-med"></TelerikTextArea>
                            </Template>
                        </FormItem>
                    </FormGroup>
                    <FormGroup Columns="1" LabelText="Package Contents">
                        <FormItem Field="PackageContents">
                            <Template>
                                <TelerikTextArea @bind-Value="@_editProduct.Contents" Class="text-area-med"> </TelerikTextArea>
                            </Template>
                        </FormItem>
                    </FormGroup>
                </FormGroup>
            </FormGroup>
        </FormGroup>
        <FormGroup ColSpan="1" LabelText="Product Specifications">
            <FormItem>
                <Template>
                    <ProductSpecTree Product="@_editProduct" OnSpecChange="UpdateSpec"></ProductSpecTree>
                </Template>
            </FormItem>
        </FormGroup>
    </FormItems>
</TelerikForm>

Hi Dimo,

 

Thank you for your solution.

I would prefer not to have to wrap everything in form groups. I expect this to be a low-priority request but I would appreciate it being added to the backlog.

 

my use care is closer to this example

https://blazorrepl.telerik.com/QxuempOX2469gBiX09

Hi Dimo,

 

I was looking to have a form with 2 columns. I was trying to use form groups to split up different sections. I wanted the form group to span the entire width of the form but I could only have the form group be in one column. I do want each column in the form to have an even width.