Invoke JavaScript function at GridView cell click

Question

I have a DevExpress gridview with the following settings.

settings.Name = "DetailGridView";

// this calls DetailGridView.StartEditRow() on client side
settings.ClientSideEvents.RowClick = "Fn.startEditingRow";
settings.SettingsEditing.Mode = DevExpress.Web.GridViewEditingMode.Inline;

I have removed many other settings I have for simplicity, but ask if you think I need to show some other settings which are relevant.

Now I want to invoke a JavaScript function at each cell click. To do that I have added this settings, as per this SO answer, and this DevExpress thread

settings.HtmlDataCellPrepared += (sender, e) =>
{
    string onClickFunctionJS = "Fn.DetailOnlyOnCellClick({0},'{1}');";
    e.Cell.Attributes.Add("onclick", String.Format(onClickFunctionJS, e.VisibleIndex, e.DataColumn.FieldName));
};

The JS function Fn.DetailOnlyOnCellClick() prints to console the value of the field name (the 2nd argument). But it only prints clicked cell's field name the first time the row is clicked. After that clicking on a different cell in the selected row doesn't trigger the function Fn.DetailOnlyOnCellClick() anymore. I have observed that if I turn off ClientSideEvents.RowClick, it works fine, but I can't turn that off for other reasons. How can I get the which cell the user clicks on while keeping ClientSideEvents.RowClick on?

score 0 · Accepted Answer · answered May 21 '17 at 12:00

I have solved my problem, thanks to DevExpress support center. First, I couldn't use settings.HtmlDataCellPrepared because, as I mentioned in the question, the grid view enters edit mode when a row is clicked, and in edit mode settings.HtmlDataCellPrepared is not supposed to work the way I need it for my situation. So I started to use this code:

settings.CellEditorInitialize = (s, e) =>
{
    var elementEditor = e.Editor;
    string onClickFunctionJS = "DetailOnlyOnCellClick({0},'{1}');";
    DevExpress.Web.Rendering.GridViewTableInlineEditorCell cell = 
        elementEditor.Parent as DevExpress.Web.Rendering.GridViewTableInlineEditorCell;

    cell.Attributes.Add("onclick",
        String.Format(onClickFunctionJS, e.VisibleIndex, e.Column.FieldName));
};

This code worked fine for every different control. The only catch was when the field is a checkbox and the cell is disabled. To get around this, I have used this code for checkbox controls:

string func = String.Format(
    "ASPxClientUtils.AttachEventToElement(s.GetMainElement(), 'click', function() {{ {0} }} )",
        String.Format(onClickFunctionJS, e.VisibleIndex, e.Column.FieldName));

(elementEditor as ASPxCheckBox).ClientSideEvents.Init = String.Format("function(s,e){{ {0}; }}", func);

This code works perfectly.

Links to the two methods used:

_{P.S.: Both these approaches I have shown here are from DevExpress experts, and I got these answers from DevExpress's support center. I will provide link to my question once I can fix the issue with license and the ticket becomes public.}

Invoke JavaScript function at GridView cell click

1 Answers1