double click one row edit- how to be done this code

2 posts, 0 answers
  1. muthukumar
    muthukumar avatar
    2 posts
    Member since:
    Oct 2015

    Posted 30 Oct 2015 Link to this post

    <!DOCTYPE html>
    <html>
    <head>
        <base href="http://demos.telerik.com/kendo-ui/grid/editing">
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
        <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.930/styles/kendo.common-material.min.css" />
        <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.930/styles/kendo.material.min.css" />

        <script src="//kendo.cdn.telerik.com/2015.3.930/js/jquery.min.js"></script>
        <script src="//kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
    </head>
    <body>
            <div id="example">
                <div id="grid"></div>

                <script>
                    $(document).ready(function () {
                        var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service",
                            dataSource = new kendo.data.DataSource({
                                transport: {
                                    read:  {
                                        url: crudServiceBaseUrl + "/Products",
                                        dataType: "jsonp"
                                    },
                                    update: {
                                        url: crudServiceBaseUrl + "/Products/Update",
                                        dataType: "jsonp"
                                    },
                                    destroy: {
                                        url: crudServiceBaseUrl + "/Products/Destroy",
                                        dataType: "jsonp"
                                    },
                                    create: {
                                        url: crudServiceBaseUrl + "/Products/Create",
                                        dataType: "jsonp"
                                    },
                                    parameterMap: function(options, operation) {
                                        if (operation !== "read" && options.models) {
                                            return {models: kendo.stringify(options.models)};
                                        }
                                    }
                                },
                                batch: true,
                                pageSize: 20,
                                schema: {
                                    model: {
                                        id: "ProductID",
                                        fields: {
                                            ProductID: { editable: false, nullable: true },
                                            ProductName: { validation: { required: true } },
                                            UnitPrice: { type: "number", validation: { required: true, min: 1} },
                                            Discontinued: { type: "boolean" },
                                            UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                                        }
                                    }
                                }
                            });

                        $("#grid").kendoGrid({
                            dataSource: dataSource,
                            navigatable: true,
                            pageable: true,
                         
                            height: 550,
                            toolbar: ["create", "save", "cancel"],
                            columns: [
                                "ProductName",
                                { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
                                { field: "UnitsInStock", title: "Units In Stock", width: 120 },
                                { field: "Discontinued", width: 120 },
                                { command: "destroy", title: "&nbsp;", width: 150 }],
                            editable: true
                        });
                    });
                </script>
            </div>


    </body>
    </html>

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 03 Nov 2015 Link to this post

    Hello muthukumar,

     

    As far as I understand you want to switch to edit mode when a row is double clicked. Please refer to the Grid Row DoubleClick (or keypress) post that shows how to bind table row/cell element to double click event. In the handler you can call the editCell method of the Kendo UI Grid and pass the table cell element. 

     

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top