Uncaught TypeError when using k-i-expand or k-i-collapse in Toolbar

3 posts, 0 answers
  1. AGB
    AGB avatar
    54 posts
    Member since:
    Sep 2014

    Posted 30 Mar Link to this post

    Hi Guys,

    I have just tripped over the following reproducible console error

        Uncaught TypeError: Cannot read property 'expanded' of undefined
            at init._toggleChildren (kendo.all.js:101203)
            at HTMLSpanElement.d (jquery-1.12.3.min.js:2)
            at HTMLDivElement.dispatch (jquery-1.12.3.min.js:3)
            at HTMLDivElement.r.handle (jquery-1.12.3.min.js:3)
        
    when using a 'k-i-expand' or 'k-i-collapse' icon in a TreeList toolbar button.

    To replicate the problem please run the following dojo

        http://dojo.telerik.com/ERUwiz

    and click on the icon within either of the toolbar buttons.

    Having a quick trawl through the code shows the problems stems from the TreeView _attachEvents function which is attaching the _toggleButtonClick event to the k-i-expand/k-i-collapse class irrespective of where it is being used.

    Therefore I suspect similar problems might be experienced in other controls i.e. TreeView, Grid etc.

    Regards
    Alan
  2. AGB
    AGB avatar
    54 posts
    Member since:
    Sep 2014

    Posted 30 Mar in reply to AGB Link to this post

    A quick workaround to stop the console error is to create two new classes

    .k-i-expand-tb:before {
        content: "\e005";
    }

    .k-i-collapse-tb:before {
        content: "\e001";
    }

    and use them within the button span.

    Regards
    Alan
  3. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    300 posts

    Posted 03 Apr Link to this post

    Hello Alan,

    The observed behaviour is expected with the current implementation of the k-i-expand icons. The solution is to expand/collapse all items programmatically and use another class for the buttons as you have noted in your second post.

    When the icon is clicked, it looks for the model which should be bound to the relevant row and checks its expanded state. Since the icon in the toolbar does not have a model bound to it, the model returns undefined:

    var icon = $(e.currentTarget);
    var model = this.dataItem(icon);
    var event = !model.expanded ? EXPAND : COLLAPSE;
    if (!this.trigger(event, { model: model })) {
     this._toggle(model);
    }
    e.preventDefault();

    Thank you for sharing your solution, it will certainly be helpful for anyone who would like to use the expand/collapse icons in the same way. 

    Regards,
    Alex Hajigeorgieva
    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.
Back to Top