This is a migrated thread and some comments may be shown as answers.

How can I edit cells on double-click in an editable Grid when selection is enabled?

1 Answer 109 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Shyam
Top achievements
Rank 1
Shyam asked on 11 Nov 2019, 02:32 PM

Hi i am evaluating the grid for a development.
One of the requirements i have is to have a multi row selection and inline edit. (will be going into cell inline mode on double click)
I found this great article of yours
https://github.com/telerik/kendo-ui-core/blob/master/docs/knowledge-base/grid-edit-cell-on-double-click.md
where it looked it was exactly what i was looking for but it looks like that when there is a numeric editor it doesnt work. I double click the cell, the editor appears and immediately hides, i have updated one of your grid examples (the editing-custom.html) and attached it.
Would be great to have some feedback on it, to have a proper evaluation as this is a must have.
As i cant attach neither hmtl nor txt files (being blocked by the page)

################################################################################

Here is the code:

<!DOCTYPE html>
<html>
<head>
    <title>Editing custom editor</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
            <script src="../content/shared/js/products.js"></script>
        <div id="example">
            <div id="grid"></div>

            <script>

                $(document).ready(function () {
                    var dataSource = new kendo.data.DataSource({
                       pageSize: 20,
                       data: products,
                       autoSync: true,
                       schema: {
                           model: {
                             id: "ProductID",
                             fields: {
                                ProductID: { editable: false, nullable: true },
                                ProductName: { validation: { required: true } },
                                Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} },
                                UnitPrice: { type: "number", validation: { required: true, min: 1} }
                             }
                           }
                       }
                    });

                    $("#grid").kendoGrid({
                        dataSource: dataSource,
                        pageable: true,
                        height: 550,
                        toolbar: ["create"],
                        columns: [
                            { field:"ProductName",title:"Product Name" },
                            { field: "Category", title: "Category", width: "180px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
                            { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "130px" },
                            { command: "destroy", title: " ", width: "150px" }],
                        // editable: false,
                        selectable: "multiple"
                    });

                    $("#grid tbody").on("dblclick", "td", function(e) {
                    
                        var cellElement = this;
                        var cell = $(cellElement);
                        var grid = $("#grid").getKendoGrid();
                        grid.editCell(cell);
                    });

                    $("#grid tbody").on("blur", "td", function(e) {
                        var cellElement = this;
                        var cell = $(cellElement);
                        var grid = $("#grid").getKendoGrid();
                                grid.closeCell(cell);
                    });
                });

                function categoryDropDownEditor(container, options) {
                    $('<input required name="' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: false,
                            dataTextField: "CategoryName",
                            dataValueField: "CategoryID",
                            dataSource: {
                                type: "odata",
                                transport: {
                                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
                                }
                            }
                        });
                }

                

            </script>
        </div>


    
</body>
</html>








1 Answer, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 13 Nov 2019, 01:46 PM

Hi Shyam,

 

I have replied to the support ticket you have submitted. Nevertheless, I will post the answer here as well in case anyone else is looking to implement similar functionality.

 

In order to avoid the numeric editor from closing the cell I suggest adding an additional condition before calling closeCell. With that said, if you would like to have multi row selection enabled in the Grid as well I recommend using checkbox selection. This way the selection and editing behavior would not interfere with one another.

Check out the updated sample below that illustrates the approach:

https://dojo.telerik.com/OBatESOq

 

Regards,
Viktor Tachev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Shyam
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Share this question
or