We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

DataGrid Editmode Dialog control spacing

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>






2 Replies

PS Prathap Senthil Syncfusion Team October 31, 2022 11:51 AM

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



PS Prathap Senthil Syncfusion Team November 3, 2022 06:48 AM

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

Loader.
Live Chat Icon For mobile
Up arrow icon