DataGrid Editmode Dialog control spacing

[nicki]

I'm following the https://blazor.syncfusion.com/documentation/datagrid/template-editing docs.

My code looks the same as the sample:

https://blazor.syncfusion.com/demos/datagrid/grid-dialog-template/

but I cannot get my controls to display two next to each other:

Code:
 <GridEditSettings Mode="EditMode.Dialog" AllowAdding="true" AllowEditing="true" Dialog="DialogParams">
          <Template>            @{            Agent a = (context as Agent);
              <div>
                <div class="form-row">
                  <div class="form-group col-md-6">
                    <SfTextBox ID="Mnemonic" @bind-Value="@(a.Mnemonic)" FloatLabelType="FloatLabelType.Always" Placeholder="Mnemonic"></SfTextBox>
                  </div>
                  <div class="form-group col-md-6">
                    <SfTextBox ID="Fullname" @bind-Value="@(a.Fullname)" FloatLabelType="FloatLabelType.Always" Placeholder="Fullname"></SfTextBox>
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-md-12">
                    <SfTextBox ID="Email" @bind-Value="@(a.Email)" FloatLabelType="FloatLabelType.Always" Placeholder="Email"></SfTextBox>
                  </div>
                </div>
              </div>
            }
          </Template>
        </GridEditSettings>

[Prathap Senthil]

Hi Nicki,

Greetings from Syncfusion support.

We checked your query and we are currently validating the feasibility of the reported issue. We will update the further details within two business days (3rd Nov).

We appreciate your patience until then.

Regards,

Prathap S

[Prathap Senthil]

To resolve the reported issue, use the code snippet below or make sure that the bootstrap version v3.3.7 is used in the blazor application's wwwroot file. Please use any of the above solutions to resolve the issue. Kindly refer to the below code snippet and solution sample for your reference.

<SfGrid DataSource="@GridData" AllowPaging="true" Toolbar="@(new string[] {"Add", "Edit" ,"Delete","Update","Cancel" })">

                <GridEvents OnActionBegin="ActionBeginHandler" TValue="OrdersDetails"></GridEvents>               

                <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@EditMode.Dialog" Dialog="DialogParams">

                    <Template>

                        @{

                            var Order = (context as OrdersDetails);

                        }

                        <div>

                            <div class="row">

                                <div class="col-md-6">

                                    <SfNumericTextBox ID="OrderID" @bind-Value="@(Order.OrderID)" Enabled="@Check" FloatLabelType="FloatLabelType.Always" Placeholder="Order ID"></SfNumericTextBox>

                                </div>

                                <div class="col-md-6">

                                    <SfAutoComplete TItem="OrdersDetails" ID="CustomerID" @bind-Value="@(Order.CustomerID)" TValue="string" DataSource="@GridData" FloatLabelType="FloatLabelType.Always" Placeholder="Customer Name">

                                        <AutoCompleteFieldSettings Value="CustomerID"></AutoCompleteFieldSettings>

                                    </SfAutoComplete>

                                </div>

                            </div>

                            <div class="row">

                                <div class="col-md-6">

                                    <SfNumericTextBox ID="Freight" @bind-Value="@(Order.Freight)" TValue="double?" FloatLabelType="FloatLabelType.Always" Placeholder="Freight"></SfNumericTextBox>

                                </div>

                                <div class="col-md-6">

                                    <SfDatePicker ID="OrderDate" @bind-Value="@(Order.OrderDate)" FloatLabelType="FloatLabelType.Always" Placeholder="Order Date">

                                    </SfDatePicker>

                                </div>

                            </div>

                            <div class="row">

                                <div class="col-md-6">

                                    <SfDropDownList ID="ShipCountry" TItem="Country" @bind-Value="@(Order.ShipCountry)" TValue="string" DataSource="@Name" FloatLabelType="FloatLabelType.Always" Placeholder="Ship Country">

                                        <DropDownListFieldSettings Value="ShipCountry" Text="ShipCountry"></DropDownListFieldSettings>

                                    </SfDropDownList>

                                </div>

                                <div class="col-md-6">

                                    <SfDropDownList ID="ShipCity" TItem="Country" @bind-Value="@(Order.ShipCity)" TValue="string" DataSource="@Name" FloatLabelType="FloatLabelType.Always" Placeholder="Ship City">

                                        <DropDownListFieldSettings Value="ShipCity" Text="ShipCity"></DropDownListFieldSettings>

                                    </SfDropDownList>

                                </div>

                            </div>

                            <div class="row">

                                <div class="col-md-12">

                                    <SfTextBox ID="ShipAddress" @bind-Value="@(Order.ShipAddress)" FloatLabelType="FloatLabelType.Always" Placeholder="Ship Address"></SfTextBox>

                                </div>

                            </div>

                        </div>

                    </Template>
               ---------------------------------------------------------------------------------

           </SfGrid>

Attachment: DialogTemplate_bc43cb4e.zip