We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Allow Editing with double click mode not working

Thread ID:

Created:

Updated:

Platform:

Replies:

121416 Dec 11,2015 07:33 AM Jan 5,2016 01:51 AM ASP.NET MVC 6
loading
Tags: Grid
Carlos Mattos
Asked On December 11, 2015 07:33 AM

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 [Syncfusion]
Replied On December 14, 2015 02:21 AM

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
Replied On December 30, 2015 02:34 AM

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


Thanks in advance.

Balaji Marimuthu [Syncfusion]
Replied On December 31, 2015 03:54 AM

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
Replied On January 4, 2016 01:35 AM

Okay Thanks . This help me a lot :)

Pramod Gaikwad
Replied On January 4, 2016 03:08 AM

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

Balaji Marimuthu [Syncfusion]
Replied On January 5, 2016 01:51 AM

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;