Javascript Error on "Edit" Command

11 posts, 0 answers
  1. Chris
    Chris avatar
    1 posts
    Member since:
    Jan 2012

    Posted 31 Jan 2017 Link to this post

    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.

     

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1170 posts

    Posted 02 Feb 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. phx255
    phx255 avatar
    10 posts
    Member since:
    Feb 2016

    Posted 07 Feb 2017 in reply to Dimiter Topalov Link to this post

    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

     

     

  4. phx255
    phx255 avatar
    10 posts
    Member since:
    Feb 2016

    Posted 07 Feb 2017 Link to this post

    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
                }
            },
  5. phx255
    phx255 avatar
    10 posts
    Member since:
    Feb 2016

    Posted 07 Feb 2017 Link to this post

    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);
               }
           },
  6. phx255
    phx255 avatar
    10 posts
    Member since:
    Feb 2016

    Posted 07 Feb 2017 Link to this post

    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.

  7. Devin
    Devin avatar
    8 posts
    Member since:
    May 2015

    Posted 09 Mar 2017 in reply to phx255 Link to this post

    Thanks @phx255!
  8. Kyle
    Kyle avatar
    2 posts
    Member since:
    Jul 2017

    Posted 25 Sep 2017 Link to this post

    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.  

  9. Kyle
    Kyle avatar
    2 posts
    Member since:
    Jul 2017

    Posted 26 Sep 2017 in reply to Kyle Link to this post

    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).

     

     

  10. Andrew
    Andrew avatar
    14 posts
    Member since:
    Nov 2013

    Posted 06 Dec 2017 Link to this post

    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.
  11. Stefan
    Admin
    Stefan avatar
    2483 posts

    Posted 08 Dec 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top