Allow Editing with double click mode not working

[Carlos Mattos]

Hi All,

I'm facing an issue with editing using double click on the grid, follow below my current code:

 @(Html.EJ().Grid<AssetSearchDataMessage>

              ("grdSearchAsset")

              .Datasource(ds => ds.Json(Model.SearchResultData).BatchURL(@Url.Action("/BatchUpdateAsset")).Adaptor(AdaptorType.RemoteSaveAdaptor))

              .EditSettings(edit => { edit.AllowEditOnDblClick(true).AllowEditing(true).ShowConfirmDialog(false).EditMode(EditMode.Batch); })

              .AllowSorting(true)

              .AllowSelection(true)

              .EnableAltRow()

              .AllowFiltering()

              .FilterSettings(filter =>

              {

                  filter.FilterType(FilterType.FilterBar);

                  filter.FilterBarMode(FilterBarMode.Immediate);

                  filter.EnableCaseSensitivity(false);

              })

              .ContextMenuSettings(contextMenu =>

              {

                  contextMenu.EnableContextMenu().ContextMenuItems(context => { context.AddTool(ContextMenuItems.EditRecord); }).CustomContextMenuItems(contextMenuItens);

              })

Double click is not working, when I click once the cell is enable to edit.

Someone know how figure it out?

Thanks in advance.

[Balaji Marimuthu]

Hi Carlos,

Thanks for contacting Syncfusion Support.

From the code snippets that you have shared we found that you have enabled BatchEditing feature in grid. Batch editing feature is similar to that of Excel-like editing. So once a cell is clicked, it changes to editable state and thus can be modified.

Since the editing operation occurs in single mouse click event, AllowEditOnDblClick won’t work in batch editing as it is the default behavior. So we suggest you to use either one option(AllowEditOnDblClick or BatchEditing) in your sample in order to get better user interaction.

If you still face any difficulties, please get back with more and clear details such that we can assist you accordingly.

Regards,
BalajI Marimuthu

[Krantisinh Patil]

I have same issue but I want double click in batch editing so what i do for that ?

Thanks in advance.

[Balaji Marimuthu]

Hi Krantisinh,

Batch editing feature is similar to that of Excel-like editing. So once a cell is clicked, it changes to editable state and thus can be modified. Since the editing operation occurs in single mouse click event, AllowEditOnDblClick won’t work in batch editing as it is the default behavior.

But, we can achieve your requirement using the workaround solution and please refer to the code example as below.
Sample: MvcApplication1

(Html.EJ().Grid<object>("FlatGrid")

        .Datasource((IEnumerable<object>)ViewBag.datasource)

               .EditSettings(e => e.AllowEditing().AllowDeleting().AllowAdding().EditMode(EditMode.Batch).AllowEditOnDblClick(true))

        .AllowPaging()

        .Columns(col =>

        {

            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();

            col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();

            col.Field("EmployeeID").HeaderText("Employee ID").EditType(EditingType.Dropdown).TextAlign(TextAlign.Right).Width(75).Add();

            col.Field("Freight").HeaderText("Freight").EditType(EditingType.Numeric).TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add();

            col.Field("ShipCity").HeaderText("Ship City").Width(110).Add();

        })

        .ClientSideEvents(eve=> eve.Create("create").CellEdit("celledit").RecordDoubleClick("dblclick"))

        )

In Create event we bound the double click handler to Grid content to enable the double click event. In RecordDoubleClick event we prevent the default operation by setting the args.cancel as true and edit the particular cell using editCell method. Refer to the help document as below.
http://help.syncfusion.com/js/api/ejgrid#methods:editcell

<script type="text/javascript">

    function create(args) {

        this._on(this.element, "dblclick", ".e-gridcontent", this._editdblClickHandler); //enable double click event

    }

    function dblclick(args) {

        args.cancel = true;  // prevent default operation

        this._dblclick = true;

        this.editCell(args.rowIndex, this.getColumnByIndex(args.cellIndex)["field"]);  //trigger editcell

    }

    function celledit(args) {

        !this._dblclick ? args.cancel = true : this._dblclick = false;

    }
</script>

The CellEdit event triggers for every record cell edit and we have prevented the default operation when perform the single click edit operation.
http://help.syncfusion.com/js/api/ejgrid#events:celledit

Refer to the document for Create and RecordDoubleClick events:
http://help.syncfusion.com/js/api/ejgrid#events:create
http://help.syncfusion.com/js/api/ejgrid#events:recorddoubleclick


Regards,
Balaji Marimuthu

[Pramod Gaikwad]

Okay Thanks . This help me a lot :)

[Pramod Gaikwad]

Hello ,

After using above code arrow down to next row not work properly so please help me for that

[Balaji Marimuthu]

Hi Pramod,

Based on your requirement we have modified the code example with keyboard navigation. Refer to the sample and code example as below.
Sample: Sample-BatchDblClick

<script type="text/javascript">

    function create(args) {

        this._on(this.element, "dblclick", ".e-gridcontent", this._editdblClickHandler); //enable double click event

    }

    function dblclick(args) {

        args.cancel = true;  // prevent default operation

        this._dblclick = true;

        this.editCell(args.rowIndex, this.getColumnByIndex(args.cellIndex)["field"]);  //trigger editcell

    }

    function celledit(args) {

        if (!this._dblclick && !this._extkey)

            args.cancel = true;  //prevent default operation for single click

        else {

            this._dblclick = false;

            this._extkey = false;

        }

    }

    $("#FlatGrid").keydown(function (e) {

        var obj = $("#FlatGrid").ejGrid("instance");

        if (e.keyCode == 9 || e.keyCode == 38 || e.keyCode == 40) {

            if (e.keyCode != 9)

                e.target.select();

            obj._extkey = true;

        }

        else

            obj._extkey = null;

    })
</script>

In CellEdit event we have prevented the default operation for single click. Please let us know if you have any concerns.

Regards,
Balaji Marimuthu