Category / Section
How to prevent recordClick event firing on recordDoubleClick?
1 min read
Any HTML Element bound with the click event and double click will trigger the double click event followed by the click event while double clicking that element. This is the default behavior of any HTML Element. This has also been applicable to the Grid’s recordClick and recordDoubleClick event handlers.
However, we can overcome this behavior by capturing the recordClick event in certain time delay or prevent the recordClick event from proceeding its functionality. This KB demonstrates this by using the recordClick and recordDoubleClick events.
HTML:
<div id="Grid"></div>
JavaScript:
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
dataSource: window.gridData,
allowPaging: true,
load: "onLoad",
recordClick: "onRecordClick",
recordDoubleClick: "onRecordDoubleClick",
columns: [
{ field: "OrderID", headerText: "Order ID", textAlign: ej.TextAlign.Right},
{ field: "CustomerID", headerText: "Customer ID" },
{ field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right },
{ field: "Freight", format: "{0:C}", textAlign: ej.TextAlign.Right },
{ field: "OrderDate", headerText: "Order Date", format: "{0:MM/dd/yyyy}",
textAlign: ej.TextAlign.Right },
{ field: "ShipCity", headerText: "Ship City" }
]
});
});
</script>
Razor:
@(Html.EJ().Grid<object>("Grid")
.AllowPaging()
.ClientSideEvents(e =>
{
e.DataBound("onLoad");
e.RecordClick("onRecordClick");
e.RecordDoubleClick("onRecordDoubleClick");
})
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").TextAlign(TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer ID").Add();
col.Field("EmployeeID").HeaderText("EmployeeID").TextAlign(TextAlign.Right).Add();
col.Field("Freight").Format("{0:C}").TextAlign(TextAlign.Right).Add();
col.Field("Order Date").Format("{0:MM/dd/yyyy}").HeaderText("Order Date").TextAlign(TextAlign.Right).Add();
col.Field("ShipCity").HeaderText("Ship City").Add();
})
)
Controller:
namespace MvcApplication66.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.dataSource = OrderRepository.GetAllRecords();
return View();
}
}
}
WebForms:
<ej:Grid ID="Grid" runat="server" AllowPaging="true">
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" TextAlign="Right" />
<ej:Column Field="CustomerID" HeaderText="Customer ID" />
<ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" />
<ej:Column Field="Freight" Format ="{0:C}" TextAlign="Right"/>
<ej:Column Field="OrderDate" HeaderText="Order Date" Format ="{0:MM/dd/yyyy}" TextAlign="Right"/>
<ej:Column Field="ShipCity" HeaderText="Ship City" />
</Columns>
<ClientSideEvents Load="onLoad" RecordClick="onRecordClick" RecordDoubleClick="onRecordDoubleClick" />
</ej:Grid>
protected void Page_Load(object sender, EventArgs e)
{
this.Grid.DataSource = order;
this.Grid.DataBind();
}
.Net Core
<ej-grid id="Grid" allow-paging="true" allow-grouping="true" record-click="onRecordClick" record-double-click="onRecordDoubleClick" load="onLoad" datasource="ViewBag.datasource">
<e-columns>
<e-column field="OrderID" header-text="Order ID" text-align="Right"></e-column>
<e-column field="EmployeeID" header-text="Employee ID" text-align="Right"></e-column>
<e-column field="CustomerID" header-text="Customer ID"></e-column>
<e-column field="Freight" text-align="Right" format="{0:C}"></e-column>
<e-column field="OrderDate" header-text="Order Date" text-align="Right" format="{0:MM/dd/yyyy}"></e-column>
<e-column field="ShipCity" header-text="Ship City"></e-column>
</e-columns>
</ej-grid>
namespace core1.Controllers
{
public partial class GridController : Controller
{
public static List<Orders> order = new List<Orders>();
public ActionResult GridFeatures()
{
ViewBag.dataSource = order;
return View();
}
}
}
Initiate the required flag variables (clickTimer and preventClick) in the Load event of the Grid. In the RecordClick event, define setTimeout which will delay capture of click event in mentioned delay. In the meantime, RecordDoubleClick (only on double clicking the record) will be triggered which will enable the preventClick variable to prevent the RecordClick event from doings its functionality.
<script type="text/javascript">
function onLoad(args){
this.clickTimer = 0;
this.preventClick = false;
}
function onRecordClick(args) {
this.clickTimer = setTimeout($.proxy(function (args) {
if (!this.preventClick) {
alert("single");
//write logic for record click event
}
this.preventClick = false;
},this,args), 200);
}
function onRecordDoubleClick(args) {
clearTimeout(this.clickTimer);
this.preventClick = true;
alert("double click");
//write logic for record double click
}
</script>
Angular2:
<ej-grid id="Grid" #grid [allowPaging]="true" (recordClick)="onRecordClick($event)" (recordDoubleClick)="onRecordDoubleClick($event)" >
<e-columns>
<e-column field="OrderID" headerText="Order ID" textAlign="right" ></e-column>
<e-column field="CustomerID" headerText="Customer ID"></e-column>
<e-column field="EmployeeID" headerText="Employee Name" textAlign="right"></e-column>
<e-column field="Freight" format="{0:C}" textAlign="right"></e-column>
<e-column field="OrderDate" headerText="Order Date" format="{0:MM/dd/yyyy}" textAlign="right"></e-column>
<e-column field="ShipCity" headerText="Ship City"></e-column>
</e-columns>
</ej-grid>
TypeScript:
import { Component, OnInit, Input, ElementRef, ViewChild } from '@angular/core';
import { EJComponents } from "ej-angular2/src/ej/core";
@Component({
selector: 'ej-app',
templateUrl: 'src/grid/grid.component.html',
})
export class GridComponent {
constructor() {
this.datasrc = data;
this.clickTimer = 0;
this.preventClick = false;
}
public datasrc: any;
public clickTimer: any;
public preventClick: any;
@ViewChild('grid') Grid: EJComponents<any, any>;
onRecordClick(args) {
this.clickTimer = setTimeout($.proxy(function (args) {
if (!this.preventClick) {
alert("single");
//write logic for record click event
}
this.preventClick = false;
}, this, args), 200);
}
onRecordDoubleClick(args) {
clearTimeout(this.clickTimer);
this.preventClick = true;
alert("double click");
//write logic for record double click
}
}
Figure 1. Single Click captured in Grid.
Figure 2. Double Click captured in Grid.
