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

Editable property

3 Answers 239 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Rafael
Top achievements
Rank 1
Rafael asked on 24 Jan 2013, 01:58 PM
When i  click on save/cancel button after editing I am getting  js error

Unhandled exception at line 11, column 31201 in http://localhost:60267/Scripts/kendo.web.min.js
0x800a138f - Microsoft JScript runtime error: Unable to get value of the property 'editable': object is null or undefined

Who could help?



<script>

    function siteDropDownEditor(container, options) {
        $('<input required data-text-field="SiteName" data-value-field="SiteId" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
            dataSource: {
                transport: {
                    read: {
                        url: "/Employee/PopulateSiteList",
                        dataType: "json"
                    }
                }
            }
        });
    }

    $(document).ready(function() {
        $("#gridEmployeeList").kendoGrid({
            dataSource: {
                serverPaging: false,
                serverSorting: false,
                pageSize: 300,
                transport: {
                    read: {
                        url: "/Employee/PopulateEmployeeList",
                        dataType: "json"
                    },
                    update: {
                        url: "/Employee/EmployeeUpdate",
                        dataType: "json"
                    }
                    //destroy: {
                    //    url: "/Destroy",
                    //    dataType: "json"
                    //},
                    //create: {
                    //    url: "/Create",
                    //    dataType: "json"
                    //}
                }
            },
            height: 648,
            scrollable: true,
            sortable: true,
            filterable: true,
            pageable: true,
            selectable: "row",
            toolbar: ["create"],
            editable: "inline",
            resizable: true,

            schema: {
                model: {
                    id: "id",
                    fields: {
                        id: { editable: false, nullable: false },
                        LohikaId: { editable: true, nullable: false, type: "string" },
                        LastName: { validation: { required: true }, editable: true, type: "string" },
                        FirstName: { validation: { required: true }, editable: true, type: "string" },
                        Site: { validation: { required: true }, editable: true, type: "string" },
                        Email: { validation: { required: true }, editable: true, type: "string" },
                        StartDate: { validation: { required: true }, editable: true, type: "date" },
                        EndDate: { validation: { required: false }, editable: false, type: "date" },
                        IsAdvocate: { validation: { required: true }, type: "number" },
                        NonActive: { validation: { required: true }, type: "number" },
                        DomainNameLastName: { validation: { required: true }, editable: true, type: "string" }
                    }
                }
            },

            columns: [
                {
                    field: "id", 
                    attributes: {
                        style: "display: none"
                    },
                    headerAttributes:{
                        style: "display: none"
                    }
                },

                { field: "LohikaId", title: "LohikaId"},
                { field: "LastName", title: "Last Name"},
                { field: "FirstName", title: "First Name"},

                { field: "Site",
                  title: "Site",
                  editor: siteDropDownEditor,
                  template: "#=Site.SiteName#"
                },

                { field: "Email", title: "Email" },

                { field: "StartDate", title: "Start Date", 
                  type: "date",
                  template: '#= kendo.toString(StartDate,"dd/MM/yyyy") #',
                  attributes: {
                        style: "text-align: right"
                  }
                },
                {
                     field: "EndDate", title: "End Date",
                     editable: true,
                     type: "date",
                     template: '#= kendo.toString(EndDate,"dd/MM/yyyy") #',
                     attributes: {
                         style: "text-align: right, display: none"
                     }
                 },

                { field: "IsAdvocate", title: "IsAdvocate", type:"boolean", template: "<input type=\"checkbox\" # if(IsAdvocate){ # checked #} # />" },
                { field: "NonActive", title: "Is Term", type: "boolean", template: "<input type=\"checkbox\" # if(NonActive){ # checked #} # />" },
                { field: "DomainName", title: "DomainName" },
                {
                    command: ["edit", "destroy"],
                    attributes: {
                        style: "width: 190"
                    },
                    headerAttributes:{
                        style: "width: 190"
                    }
                }
            ]
        });
    });

</script>

<div id="gridEmployeeList" ></div>
            

3 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 28 Jan 2013, 11:35 AM
Hi Rafael,
 
I believe the issue is caused by the schema that is defined in the Grid's configuration while it is part from the DataSource. Please define the schema in the DataSource (as shown in our online demos) and let me know if you still observe any problems. 
 
Kind regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Muthukumar
Top achievements
Rank 1
answered on 30 Oct 2015, 12:05 PM

how to edit a kendo grid row by  double clicking required row?

 please refer this code,in that i need instead of editable: "incell" / true / "inline"

 

<!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
                    });
                });
              
              
              var myGrid = $('#grid').data("kendoGrid");
              
              myGrid.element.delegate("tbody>tr", "dblclick", function () {
    myGrid.editRow($(this));
});

            </script>
        </div>


</body>
</html>

0
Iliana Nikolova
Telerik team
answered on 03 Nov 2015, 12:17 PM
Hi Muthukumar,

This question is not related to the initial one in this thread. Also, I observed that you opened another thread on the same subject - I would suggest this discussion in the other thread (983479). Thank you in advance for your cooperation.

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Rafael
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Muthukumar
Top achievements
Rank 1
Share this question
or