How to set the position for the Delete Confirm Dialog?

4 mins read

This Knowledge base explains how to set the position for the Delete Confirm Dialog of Grid.

Solution:

By default, the delete confirmation dialog will be opened to the center of the Grid height. If the Grid has large number of records in a page then the delete confirmation dialog may appear out of sight. To avoid this behavior the position of the Delete Confirm Dialog can be changed by using the dataBound event of Grid and beforeOpen event of the Dialog.

The following code example demonstrates how to set the position for the Delete Confirm Dialog of Grid.

1.Render the Grid control.

HTML

<div id="Grid"></div>

JavaScript

<script type="text/javascript">
          $(function () {
            $("#Grid").ejGrid({
                // the datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
                dataSource: window.gridData,
                editSettings: { allowEditing: true,allowAdding: true,allowDeleting: true, showDeleteConfirmDialog: true },
                toolbarSettings : { showToolbar : true, toolbarItems : ["add", "edit", "delete", "update", "cancel"] },
                dataBound:"ondatabound", 
                columns: [
                         { field: "OrderID", headerText: 'Order ID', isPrimaryKey:true, width: 75,},
                         { field: "CustomerID", headerText: 'Customer ID',  width: 75,},
                         { field: "EmployeeID", headerText: 'Employee ID',  width: 75 },
                         { field: "ShipCity", headerText: 'ShipCity', width: 110}
                ]
            });  
        });
</script>

MVC

@(Html.EJ().Grid<object>("FlatGrid")
                .Datasource((IEnumerable<object>)ViewBag.datasource)
                .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().ShowDeleteConfirmDialog(true); })
                .ToolbarSettings(toolbar =>
                   {
                       toolbar.ShowToolbar().ToolbarItems(items =>
                       {
                           items.AddTool(ToolBarItems.Add);
                           items.AddTool(ToolBarItems.Edit);
                           items.AddTool(ToolBarItems.Delete);
                           items.AddTool(ToolBarItems.Update);
                           items.AddTool(ToolBarItems.Cancel);
                       });
                   })
                .ClientSideEvents(eve => { eve.DataBound("ondatabound"); })
                .Columns(col =>
                   {
                       col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width(75).Add();
                       col.Field("CustomerID").HeaderText("Customer ID").Width(75).Add();
                       col.Field("EmployeeID").HeaderText("Employee ID").Width(75).Add();
                       col.Field("ShipCity").HeaderText("ShipCity").Width(90).Add();
                   }))

using EJGrid.Models;
using System.Linq;
using System.Web.Mvc;
using System.Web.UI.WebControls;
using Syncfusion.Linq;
 
namespace EJGrid.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.datasource = OrderRepository.GetAllRecords().ToList();          
            return View();
        }
    }
}

ASPX

<ej:Grid runat="server" ID="FlatGrid" >
        <ClientSideEvents DataBound="ondatabound" />
        <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" ShowDeleteConfirmDialog="true"></EditSettings>
        <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
        <Columns>
            <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" Width="75" />
            <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="75" />
            <ej:Column Field="EmployeeID" HeaderText="Employee ID" Width="75" />
            <ej:Column Field="ShipCity" HeaderText="ShipCity" Width="110" />
        </Columns>
    </ej:Grid>

using System;
using System.Linq;
using System.Web.UI;
using Syncfusion.Linq;
 
namespace WebApplication21
{
    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            this.FlatGrid.DataSource = OrderRepository.GetAllRecords().ToList();
            this.FlatGrid.DataBind();  
        }
    }
}

ASP.NET CORE

 
<ej-grid id="FlatGrid" datasource="ViewBag.datasource" databound="ondatabound">
    <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" show-delete-confirm-dialog="true"></e-edit-settings>
    <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","delete","update","cancel"}' />
    <e-columns>
        <e-column field="OrderID" header-text="Order ID" width="75" is-primary-key="true"></e-column>
        <e-column field="CustomerID" header-text="Customer ID" width="75"></e-column>
        <e-column field="EmployeeID" header-text="EmployeeID" width="75"></e-column>
        <e-column field="ShipCity" header-text="ShipCity" width="110"></e-column>
    </e-columns>
</ej-grid>

using System.Linq;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;
 
namespace WebApplication1.Controllers
{
    public class HomeController : Controller
    {
        private NORTHWNDContext _context;
        public HomeController(NORTHWNDContext context)
        {
            _context = context;
        }
        public IActionResult Index()
        {
            ViewBag.datasource = _context.Orders.ToList();
            return View();
        }
    }
}

Angular

HTML

<ej-grid id="Grid" #grid [dataSource]="gridData" [toolbarSettings]="toolbarItems" [editSettings]="editSettings" (dataBound)="ondatabound($event)" >
    <e-columns>
        <e-column field="OrderID"  headerText="Order ID" isPrimaryKey="true"
width="75" textAlign="right"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="75"></e-column>        
        <e-column field="EmployeeID" headerText="Employee ID" width="75" textAlign="right"></e-column>
        <e-column field="ShipCity" headerText="ShipCity" width="110"></e-column>             
    </e-columns>
</ej-grid>

 
import {Component, ViewEncapsulation,ViewChild} from '@angular/core';
 
import {CommonModule} from "@angular/common";
 
import { EJComponents } from "ej-angular2/src/ej/core";
 
@Component({
    selector: 'ej-app',
    templateUrl: 'src/grid/grid.component.html',
})
export class GridComponent {
    public gridData;
    public editSettings;
    public toolbarItems;
 
  @ViewChild('grid') Grid: EJComponents<ej.Grid, any>;
  constructor() {
    //The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
          this.gridData = window.gridData;
          this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, showDeleteConfirmDialog: true};
          this.toolbarItems = { showToolbar : true, toolbarItems : ["add", "edit", "delete", "update", "cancel"]};
  }
 
  ondatabound(e: any) { 
        var gridObj = $("#Grid").ejGrid("instance");
        $("#" + "Grid" + "ConfirmDialog").ejDialog({
        beforeOpen: ej.proxy(function (e) {
            var row = this.getRowByIndex(this.model.selectedRowIndex);
            var pos = row.position();
            e.model.position.Y = row.height() + pos.top;
        }, gridObj)
    })
}

2. In the dataBound event of Grid using beforeOpen event of the Dialog we have set the position of the Dialog based on the row height and row position.

<script>
    function ondatabound(args) {
            $("#" + this.element.attr("id") + "ConfirmDialog").ejDialog({
                beforeOpen: ej.proxy(function (e) {
                    var row = this.getRowByIndex(this.model.selectedRowIndex);
                    var pos = row.position();
                    e.model.position.Y = row.height() + pos.top;
                }, this)
            })
       }
</script>

Result:

Figure 1:Adjusting the position of the delete confirmation dialog

Did you find this information helpful?

Yes

Comments (0)

How to set the position for the Delete Confirm Dialog?

Access denied