DevExpress MVC GridView - How to get cell click event

René Wolferink picture René Wolferink · Aug 7, 2012 · Viewed 13.3k times · Source

Using DevExpress's GridView, I would like to trigger a (clientside) event when a cell is selected (or simply clicked on).

There already is a way to get the click events for an entire row, but neither fiddling around nor the documentation gives me any clue how to achieve this for cells.

This is what I have for rows:

Html.DevExpress().GridView(settings =>
{
    // removed a lot of code here
    settings.ClientSideEvents.RowDblClick = "OnGridRowDblClick";
}).Bind(Model).GetHtml()

Which will cause the javascript function OnGridRowDblClick to be called when a row is double clicked. Ideally there should be something like

settings.ClientSideEvents.CellClick = "OnCellClick";

However, this does not exist, nor can I find anything to achieve this.

Answer

Mikhail picture Mikhail · Aug 7, 2012

It is possible to attach the required client-side handler for an individual DataCell by handling the GridViewSettings.HtmlDataCellPrepared event:

function OnCellClick(visibleIndex, fieldName) {
    alert(visibleIndex + " " + fieldName);
}


@Html.DevExpress().GridView(settings => {
    ...
    settings.HtmlDataCellPrepared = (sender, e) => {
        e.Cell.Attributes.Add(
            "onclick",
            string.Format("OnCellClick('{0}', '{1}');", e.VisibleIndex, e.DataColumn.FieldName)
        );
    };

}).Bind(Model).GetHtml()