Javascript Error on "Edit" Command

[Chris]

I just updated to the 2017 R1 release of Kendo UI (I wanted the new web font icons). After updating, my grid raises an error when I click the edit button.

The error is "Function Expected" and occurs in kendo.all.min.js on this line:
return!!e.field&&(!(t.editable&&!t.editable(e.field))&&!(e.editable&&!e.editable(t)))

The culprit line within that line is e.editable(t)

In the Visual Studio debugger e looks like:

__proto__ {...} Object
editable true Boolean
encoded true Boolean
field "SponsorFirmID" String
headerAttributes {...} Object
hidden undefined Undefined
template "<span  title=\"Edit Sponsor\" style=\"cursor: pointer\">#= SponsorName# <i class=\"\"> </i></span>" String
title "Sponsor" String
width "20%" String

and t is:

AccountDescription Contractor String
AccountDisplay Carey, Christopher String
AccountID 5412 Number
AccountName ccarey String
AccountType Contractor String
AccountTypeID 1 Number
AccountURL http://adcf01w/ondemand/fid2pid.cfm?fid=5412 String
dirty FALSE Boolean
ExpireDT Tue Jan 31 2017 19:00:00 GMT-0500 (Eastern Standard Time) Object, (Date)
id ccarey String
LastConfirmedDT 0001-01-01T00:00:00 String
LastValidatedByFirmID null Null
LastValidatedByName null Null
MaxDaysToExtend 90 Number
SponsorFirmID 4793 Number
SponsorName Waldmann, Christopher String
uid ca20e06b-1935-44a0-b5f5-c44d6aa869d5 String
e {...} Object
[Methods] {...}
__proto__ {...} Object
editable TRUE Boolean
encoded TRUE Boolean
field SponsorFirmID String
headerAttributes {...} Object
hidden undefined Undefined
template <span  title=\Edit Sponsor\" style=\"cursor: pointer\">#= SponsorName# <i class=\"\"> </i></span>" String
title Sponsor String
width 20% String

e looks like the field reference while t looks like the dataItem reference. 

Here is my model in my datasource:

model: {
                        id: "AccountName",
                        fields: {
                            AccountID: { editable: false },
                            AccountName: { editable: false },
                            AccountDisplay: { editable: false },
                            AccountTypeID: { editable: false },
                            AccountType: { editable: false },
                            SponsorFirmID: { required: true },
                            SponsorName: { editable: false },
                            ExpireDT: { type: "date", required: true },
                            
                            }
                    }

and here are the column definitions for my grid:

columns: [
                    {
                        field: "AccountDisplay", title: "Name",
                        headerAttributes: { style: "font-weight: bold;" },
                        width: "20%",
                        editable: false
                    },
                    {
                        field: "AccountType", title: "Type",
                        headerAttributes: { style: "font-weight: bold;" },
                        width: "10%",
                        editable: false
                    },
                    {
                        field: "SponsorFirmID", title: "Sponsor",
                        headerAttributes: { style: "font-weight: bold;" },
                        width: "20%",
                        editor: personDropDownEditor,
                        template: '<span  title="Edit Sponsor" style="cursor: pointer">#= SponsorName# <i class=""> </i></span>',
                        editable: true
                    },
                    {
                        field: "ExpireDT",
                        template: (function(dataItem){
                            return kendo.toString(dataItem.ExpireDT, "g");
                        }),
                        title: "Expires",
                        headerAttributes: { style: "font-weight: bold;" },
                        editor: expireDateEditor,
                        width: "30%",
                        editable: true
                    },
                    {
                        command:[
                            {
                                text: "Confirm Row",
                                click: ConfirmData,

                                imageClass: "k-icon k-i-check",
                            },
                            "edit"
                        ],
                        title: " ", width: "20%", attributes: { style: "text-align:center;" },
                        editable: false
                    }
                ]

 

I tried removing the custom editor from the SponsorFirmID field, but to no avail. This was working prior to the upgrade and works with the old kendo.all.min.js, but the edit icon does not show.

 

[Dimiter Topalov]

Hi Chris,

I was unable to reproduce the described issue:

http://dojo.telerik.com/ejiZI

Can you please send us a similar isolated runnable project, or modify the one above until the issue can be observed, so we can inspect it further, and determine what might be causing it? Thank you in advance.

Regards,
Dimiter Topalov
Telerik by Progress

[phx255]

Same problem here. Error :

Uncaught TypeError: n.editable is not a function
    at ur (kendo.all.min.js:1)
    at HTMLTableCellElement.<anonymous> (kendo.all.min.js:1)
    at Function.each (jquery-2.2.4.min.js:2)
    at s.fn.init.each (jquery-2.2.4.min.js:2)
    at init._createInlineEditor (kendo.all.min.js:1)
    at init.editRow (kendo.all.min.js:1)
    at init.modificaSaldo (eval at globalEval (jquery-2.2.4.min.js:2), <anonymous>:134:38)
    at init._buttonClick (kendo.all.min.js:1)
    at init.f (jquery-2.2.4.min.js:2)
    at init.trigger (kendo.all.min.js:1)

 

After upgrading to 2017 Kendo ui (last version). Using kendo.all.min.js

 

 

[phx255]

The error fires when i call to editRow method:

 modificaSaldo: function () {

            var selectedItem = gridSaldos.kendoGrid.dataItem(gridSaldos.kendoGrid.select());
            if (selectedItem != null) {
                estadoModulo("updating");
                var selectedItem = gridSaldos.kendoGrid.dataItem(gridSaldos.kendoGrid.select());

                gridSaldos.kendoGrid.editRow(selectedItem); //Problem here
            }
        },

[phx255]

The error fires when i click edit button (custom edit button):

modificaSaldo: function () {

           var selectedItem = gridSaldos.kendoGrid.dataItem(gridSaldos.kendoGrid.select());
           if (selectedItem != null) {
               estadoModulo("updating");
               var selectedItem = gridSaldos.kendoGrid.dataItem(gridSaldos.kendoGrid.select());

               gridSaldos.kendoGrid.editRow(selectedItem);
           }
       },

[phx255]

Solved. Just remove "editable" on column definition.Editalbe must be a function, it can't be a boolean value.

 

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.editable

Regards.

[Devin]

Thanks @phx255!

[Kyle]

I recently upgraded to the R3 release of the Kendo HTML controls and am having the same issue.

 

my grid is configured ad editable:”inline” and columns are created with an edit command with no custom click hamdlet.  My delete method works but efit does not.  

[Kyle]

I was able to track down the error and where it was originating from.  phx255's response was spot on.  I had a custom column definition that had the "editable" property set on it.  It was then preventing the grid from rendering in "inline" or "popup" mode, however the "incell" or true option worked fine.

removing editable from the custom column definition and leaving it on the grid definition then setup all fields to be editable (which I then control via the model of my dataSource).

 

 

[Andrew]

Grid Edit is broken by minification in kendo.all.min.js. Unminified kendo source kendo.all.js did not suffer from this problem.

There is an if condition (e.editable && !e.editable(t)) missing a check to verify that e.editable is actually a function. e.editable(t) errors out when e.editable is a boolean true value and therefore not a function.

To fix this situation I changed the condition to be (e.editable&&typeof(e.editable)==='function'&&!e.editable(t)). After editing kendo.all.min.js the grid edit event worked as expected.

[Stefan]

Hello, Kyle, Tom,

Having a JavaScript error if the properties are not set in the supported formats(in this case a function) is expected:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.editable

If there is an issue when the editable is set as a function as well, please let us know and we will gladly investigate it.

@Tom, thank you for sharing the difference in the behavior of the kendo.all and kendo.all.min scripts.

Regards,
Stefan
Progress Telerik