Using TelerikWindow with colspan

[DoomerDGR8]

I followed the default grid popup example with custom form but I'm stuck with a horizontal form. I need to manage column spanning with in the form elements (Bootstrap 4 + Kendo Material) so that fields with longer values can be displayed easily:

<TelerikWindow Visible="@(SelectedProject != null)" Modal="true">
    <WindowTitle>
        @{
            if (!string.IsNullOrWhiteSpace(SelectedProject?.ProjectNumber))
            {
                <strong>Project @SelectedProject.ProjectNumber</strong>
            }
            else
            {
                <strong>View Project</strong>
            }
        }
    </WindowTitle>
    <WindowContent>
        <EditForm Model="@SelectedProject" OnValidSubmit="@SaveProject" class="k-form">
            <DataAnnotationsValidator />
            <fieldset>
                <legend>Project Details</legend>

                <div class="form-row">
                    <div class="col">
                        <TelerikTextBox @bind-Value="@SelectedProject.ProjectNumber" Label="Project Number" Width="100%"></TelerikTextBox>
                    </div>
                    <div class="col">
                        <TelerikTextBox @bind-Value="@SelectedProject.ProjectName" Label="Name" Width="100%"></TelerikTextBox>
                    </div>
                    <div class="col">
                    </div>
                    <div class="col">
                    </div>
                </div>
                <div class="form-row">
                    <div class="col">
                        <TelerikTextBox @bind-Value="@SelectedProject.ProgrammeSponsor" Label="Sponsor" Width="100%"></TelerikTextBox>
                    </div>
                    <div class="col">
                        <TelerikTextBox @bind-Value="@SelectedProject.ProgrammeLead" Label="Lead" Width="100%"></TelerikTextBox>
                    </div>
                    <div class="col">
                        <TelerikTextBox @bind-Value="@SelectedProject.ProjectManager" Label="Manager" Width="100%"></TelerikTextBox>
                    </div>
                    <div class="col">
                    </div>
                </div>
                <div class="form-row">
                    <div class="col">
                        <TelerikTextBox @bind-Value="@SelectedProject.Status" Label="Status" Width="100%"></TelerikTextBox>
                    </div>
                    <div class="col">
                        <TelerikTextBox @bind-Value="@SelectedProject.Funding" Label="Fund" Width="100%"></TelerikTextBox>
                    </div>
                    <div class="col">
                        <TelerikTextBox @bind-Value="@SelectedProject.Gate" Label="Gate" Width="100%"></TelerikTextBox>
                    </div>
                    <div class="col">
                        <TelerikTextBox @bind-Value="@SelectedProject.DaDeliveryStage" Label="DA Status" Width="100%"></TelerikTextBox>
                    </div>
                </div>
            </fieldset>

            <fieldset>
                <legend>Additional</legend>

                <div class="form-row">
                    <div class="col">
                        <TelerikTextBox @bind-Value="@SelectedProject.ProjectNumber" Label="Project Number"></TelerikTextBox>
                    </div>
                    <div class="col">
                        <TelerikTextBox @bind-Value="@SelectedProject.ProjectName" Label="Name"></TelerikTextBox>
                    </div>
                </div>
            </fieldset>

            <fieldset>
                <legend>Team Preferences</legend>
                <div class="form-row">
                    <div class="col">
                        <TelerikTextBox @bind-Value="@SelectedProject.ProjectNumber" Label="Project Number"></TelerikTextBox>
                    </div>
                    <div class="col">
                        <TelerikTextBox @bind-Value="@SelectedProject.ProjectName" Label="Name"></TelerikTextBox>
                    </div>
                </div>
            </fieldset>
            <div class="form-row">
                <ValidationSummary />
                <TelerikButton Icon="save" Primary="true" ButtonType="@ButtonType.Button">Close</TelerikButton>
            </div>
        </EditForm>
    </WindowContent>
</TelerikWindow>

In order to show field evenly, I added empty col-divs. But I want to merge instead. For example, the first row, I want ProjectName to span three columns. I have a rather condensed form requirement here.

[Svetoslav Dimitrov]

Hello Hassan,

In order to increase the size of a column in Bootstrap you can use the built-in classes like col-X where X is a number between 1-12. What happens is that if you use a combination of col and col-6 (for example) the col will assume the size of col-6 (this is how Bootstrap works, col class makes so that the columns are evenly sized and positioned). However, you can apply different column sizes, in this case col-4 for the ProjectNumber and col-6 for the ProjectName (again the sizes of the columns are purely demonstrative). What I did is to:

• Resize the columns using Bootstrap 4 classes
  • col-4
  • col-6
• Add borders just for demonstration purposes

For more information on Boostrap columns and col class you can follow that link: https://getbootstrap.com/docs/4.0/layout/grid/#column-wrapping

This will not increase the size of the TelerikTextBox. To expand the component to fit the column size you need to use CSS selector to target the span that is containing the input and apply width: 100%;. 

I have built a quick sample based on your code below:

<fieldset>
    <legend>Team Preferences</legend>
    <div class="form-row">
        <div class="col-4 border">
            <TelerikTextBox @bind-Value="@SelectedProject.ProjectNumber" Label="Project Number"></TelerikTextBox>
        </div>
        <div class="col-6 border">
            <TelerikTextBox @bind-Value="@SelectedProject.ProjectName" Label="Name"></TelerikTextBox>
        </div>
    </div>
</fieldset>

<style>
    .k-textbox-container{
        width: 100%;
    }
</style>

If you need to resize the TelerikTextBox programmatically according to the length of the input in it you need to:

1. Create a C# method that dynamically calculates the length of the input in pixels
   1. In most cases a single character is 8 px.
   2. This method should have a return type of a string
2. Pass that method to the Width parameter of the TelerikTextBox

I have attached an example as a file to demonstrate how to programmatically resize the component. The Method is passed to the Width parameter of the ProjectName in Project Details section of your form.

Having said that, you can set a max width of the size of the input so that it does not go outside the form.

Regards,
Svetoslav Dimitrov
Progress Telerik