Grid Popup Form does not stretch to accommodate the fields

[Nahuel]

Good afternoon, everyone.

I've been trying to add a popup for my CRUD operations on my grid, right now I'm only focusing on the "Add" command.

I'll paste the code below:

<TelerikGrid TItem="@MaintenanceCounterpartyModel" OnRead="@GridReadHandler" Pageable="true" Sortable="true" @ref="@GridRef" Id="MA-MaintenanceGrid" EditMode="@Telerik.Blazor.GridEditMode.Popup">
	<GridToolBarTemplate>
		<GridCommandButton Command="ExcelExport" Icon="@FontIcon.FileExcel">Export to Excel</GridCommandButton>
		<span id="search-on-grid" class="k-textbox k-grid-search k-display-flex" style="width: auto; margin-left: 15px;">
			<span class="k-input-icon">
				<span class="k-icon k-i-search"/>
			</span>
			<TelerikTextBox Value="@SearchValue" ValueChanged="@SearchGrid" Placeholder="Search counterparties..." AutoComplete="off" Id="MA-MaintenanceGridToolbarSearch"/>
			<span unselectable="on" class="k-clear-value" title="clear" role="button" tabindex="-1" @onclick="async () => await ClearSearch()">
				<span class="k-icon k-i-x"/>
			</span>
		</span>
		<GridCommandButton Command="Add" Icon="@FontIcon.Plus" Id="M-AddNewCounterParty" Class="k-button k-primary add-counterparty-button">NEW COUNTERPARTY</GridCommandButton>
	</GridToolBarTemplate>
	<GridExport>
		<GridExcelExport FileName="Counterparties" AllPages="true"/>
	</GridExport>
	<GridSettings>
		<GridPopupEditSettings Title="Add new Counterparty">
		</GridPopupEditSettings>
		<GridPopupEditFormSettings>
			<FormTemplate>
                                @{
                                    CPEditItem = context.Item as MaintenanceCounterpartyModel;

                                    <TelerikForm Model="@CPEditItem" OnValidSubmit="@OnValidSubmit">
					<FormValidation>
						<DataAnnotationsValidator/>
					</FormValidation>
					<FormItems>
						<FormItem Field="@nameof(MaintenanceCounterpartyModel.CounterpartyName)"/>
					</FormItems>
					<FormButtons>
						<TelerikButton Icon="@nameof(FontIcon.Save)">Save</TelerikButton>
						<TelerikButton Icon="@nameof(FontIcon.Cancel)" ButtonType="@ButtonType.Button" OnClick="@OnCancel">Cancel</TelerikButton>
					</FormButtons>
				</TelerikForm>
                                }
			</FormTemplate>
		</GridPopupEditFormSettings>
	</GridSettings>
	<GridColumns>
		<GridColumn Title="Counterparty ID" Field="CounterpartyID"/>
		<GridColumn Title="Counterparty Name" Field="CounterpartyName"/>
		<GridColumn Title="Create User" Field="CreateUser"/>
		<GridColumn Title="Create Datetime" Field="CreateDateTime"/>
		<GridColumn Title="Update User" Field="UpdateUser"/>
		<GridColumn Title="Update Datetime" Field="UpdateDateTime"/>
	</GridColumns>
	<DetailTemplate Context="counterparty">
		<TelerikGrid Data="counterparty.LegalEntities">
			<GridColumns>
				<GridColumn Title="Legal Entity ID" Field=@nameof(MaintenanceCounterpartyLegalModel.LegalEntityID)/>
				<GridColumn Title="Legal Entity Name" Field=@nameof(MaintenanceCounterpartyLegalModel.LegalEntityName)/>
				<GridColumn Title="Jurisdiction" Field=@nameof(MaintenanceCounterpartyLegalModel.Jurisdiction)/>
				<GridColumn Title="Create User" Field=@nameof(MaintenanceCounterpartyLegalModel.CreateUser)/>
				<GridColumn Title="Create Datetime" Field=@nameof(MaintenanceCounterpartyLegalModel.CreateDateTime)/>
				<GridColumn Title="Update User" Field=@nameof(MaintenanceCounterpartyLegalModel.UpdateUser)/>
				<GridColumn Title="Update Datetime" Field=@nameof(MaintenanceCounterpartyLegalModel.UpdateDateTime)/>
			</GridColumns>
			<DetailTemplate Context="legalEntity">
				<TelerikGrid Data="legalEntity.RegistrationNumbers">
					<GridColumns>
						<GridColumn Title="Registration Number ID" Field=@nameof(MaintenanceRegistrationNumberModel.RegistrationNumberID)/>
						<GridColumn Title="Registration Type" Field=@nameof(MaintenanceRegistrationNumberModel.RegistrationType)/>
						<GridColumn Title="Registration Number" Field=@nameof(MaintenanceRegistrationNumberModel.RegistrationNumber)/>
						<GridColumn Title="Registration Date" Field=@nameof(MaintenanceRegistrationNumberModel.RegistrationNumber)/>
						<GridColumn Title="Registration Comments" Field=@nameof(MaintenanceRegistrationNumberModel.RegistrationDate)/>
					</GridColumns>
				</TelerikGrid>
			</DetailTemplate>
		</TelerikGrid>
	</DetailTemplate>
</TelerikGrid>

The code works great but when I hit the Add button the popup opens up like this:

And it does not stretch in size to accommodate the fields accordingly. Is there a way to fix this?

Also, is it possible to implement a custom popup if I don't want to use this one? If yes, do we have examples here?

Thanks in advance.

[Nahuel]

I found this repo here -- it is possible to build your own form using TelerikWindow and the standard EditForm from Blazor, that's how I solved this.