How to Centre the SfGrid GridEditSettings Edit Dialog X and Y values

[Bradley]

 <SfGrid @ref="DataGrid" DataSource="@CartItems" AllowPaging="false" EnableHover="true" AllowResizing="true">

                <GridEvents CommandClicked="OnCommandClicked" TValue="CartProduct"></GridEvents>

                <GridEvents OnBeginEdit="BeginEditHandler" TValue="CartProduct"></GridEvents>

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

                    <HeaderTemplate>

                        @{

                            var text = (context as CartProduct);

                            <span>Update Quantity</span>

                        }

                    </HeaderTemplate>

                    <Template>

                        @{

                            var Update = (context as CartProduct);

                            <div>

                                <div class="form-row d-flex justify-content-center">

                                    <div class="form-group ">

                                        <input type="text" pattern="[0-9]*" inputmode="numeric" min="1" class="form-control d-flex justify-content-center" @bind-value="Update.Quantity">

                                    </div>

                                </div>

                            </div>

                        }

                    </Template>

                    <FooterTemplate>

                        <button class="btn" id="Btn-Update" @onclick="@Save" IsPrimary="true">Update</button>

                    </FooterTemplate>

                  

                </GridEditSettings>

              

                <GridColumns>

                    <GridColumn Field=@nameof(CartProduct.CartProductId)

                                HeaderText="ID"

                                TextAlign="TextAlign.Center"

                                Width="80"

                                AllowEditing="false"

                                IsPrimaryKey="true"

                                Visible="false">

                    </GridColumn>

                    <GridColumn Field=@nameof(CartProduct.Description)

                                HeaderText="Item"

                                TextAlign="TextAlign.Center"

                                Width="80"

                                AllowEditing="false">

                    </GridColumn>

                    <GridColumn HeaderText="Image"

                                TextAlign="TextAlign.Center"

                                Width="40"

                                AllowEditing="false">

                        <Template>

                            @{

                                var ImageUrl = (context as CartProduct).ImgSrc;

                                <img src="@ImageUrl" class="img-fluid" style="height:50px;width:50px;" />

                            }

                        </Template>

                    </GridColumn>

                    <GridColumn Field=@nameof(CartProduct.Quantity)

                                HeaderText="Qty"

                                TextAlign="TextAlign.Center"

                                Width="40"

                                AllowEditing="true">

                    </GridColumn>

                    <GridColumn HeaderText="Price"

                                TextAlign="TextAlign.Center"

                                Width="60"

                                AllowEditing="false">

                        <Template>

                            @{

                                var Cost = (context as CartProduct).Cost;

                                <p>R @Cost</p>

                            }

                        </Template>

                    </GridColumn>

                    <GridColumn Width="30" TextAlign="TextAlign.Left">

                        <GridCommandColumns>

                            <GridCommandColumn Type="CommandButtonType.Delete" Title="Delete"

                                               ButtonOption="@(new CommandButtonOptions()

                                                       {

                                                           IconCss = " e-icons e-delete",

                                                           CssClass = "e-flat",

                                                       })" />

                        </GridCommandColumns>

                    </GridColumn>

                </GridColumns>

            </SfGrid>

[Vignesh Natarajan]

Hi Bradley,  

Thanks for contacting Syncfusion support.  

Query: “How to Centre the SfGrid GridEditSettings Edit Dialog X and Y values” 

 

We have analyzed your query and we understand that you want to position the Grid edit template dialog to X and Y values. But we are quite unclear about the issue you are facing. Because Dialog template will be shown in center only. So kindly share the following details. 

1. Share the screenshot of the issue you are facing.
2. Have you applied any external styles to Grid and Grid edit form?
3. Share more details about your requirement.

Above requested details will be very helpful for us to validate the reported query at our end and provide better solution as early as possible.    

Regards, 

Vignesh Natarajan 

[Paul]

Hi,

I would like to ask this question also, perhaps your answer will be different in 2024!

Is is possible to position the grid's editing dialog somewhere else on the page, not just centred?

Top right for example.

Thanks

Paul

[Sarveswaran Palani]

Hi Paul,

Greetings from Syncfusion.

We would like to inform that we can change the position of the rendered dialog by modifying the XValue, YValue property from DialogSettings. Kindly check the below attached code snippet and sample reference for additional information.

Reference: XValue, YValue

Sample: https://blazorplayground.syncfusion.com/embed/hjLpNLsUpIIOrkfz?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

By using the below suggestion, you can modify the dialog position as per your requirement.

 

<div style="position:relative; min-height: 500px;">

    <SfGrid DataSource="@Orders" AllowSorting="true" AllowFiltering="true" EnableAdaptiveUI="true" AdaptiveUIMode="AdaptiveMode.Mobile" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update", "Search" })" Height="100%" Width="100%" AllowPaging="true">

        <GridFilterSettings Type="@FilterType.Excel"></GridFilterSettings>

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

        ...

   </SfGrid>

</div>

 

@code {

    public List<Order> Orders { get; set; }

       public DialogSettings dialogParams = new DialogSettings { Width = "500px",ShowCloseIcon = true, XValue="right", YValue="top" };

 

 

Please let us know if you have further queries.

Regards,

Sarvesh