How to make tab title text update dynamically through data binding?

7 posts, 0 answers
  1. Michelle
    Michelle avatar
    33 posts
    Member since:
    Feb 2015

    Posted 27 Feb Link to this post

    Hi,

    I have a simple tabstrip defined in AngularJS.  I have a button that when clicked, will change the name of the first item in the datasource.  I expect the tabstrip tab title to change as well after the click, but as you can see in the following example, the datasource is changed, but the tab stays the same:

    http://dojo.telerik.com/AYofE

    I know that you can call tabstrip.dataSource.read() to update the title, but in my case doing that will overwrite some tabs I manually appended to the tabstrip directly because they are not in the dataSource.  Is there a way to get data binding working for the tab title?

    Thanks,

    Michelle

  2. Michelle
    Michelle avatar
    33 posts
    Member since:
    Feb 2015

    Posted 28 Feb in reply to Michelle Link to this post

    Another way I tried was to use AngularJS binding syntax in the text field value, like so:

    http://dojo.telerik.com/AYofE/2

    Please note that the first tab object has a name value of {{options}} and instead of showing the value of options, it shows the text as plain text.  How can I make the tab title compile Angular markup?

    Thanks,

    Michelle

  3. Kendo UI is VS 2017 Ready
  4. Michelle
    Michelle avatar
    33 posts
    Member since:
    Feb 2015

    Posted 29 Feb Link to this post

    I actually went ahead and debugged the Kendo source code and found that currently, when tabs are created through the dataTextField, the "encoded" option for the tab is not set to false.  Therefore, all data referenced by dataTextField will be encoded by Kendo and I suspect that is why when dataTextField returns HTML, it just displays the HTML as plain text.  Whereas, if I manually call tabstrip.append(tab) with tab.encoded = false, the HTML is rendered properly.  The other issue is that while dataContentField gets run through the angular compile service, the dataTextField does not, which might be the second part of the reason why my Angular syntax isn't being compiled.  Please provide a workaround or fix this issue.  It is a huge blocking factor to my current project.

    Thanks,

    Michelle

  5. Michelle
    Michelle avatar
    33 posts
    Member since:
    Feb 2015

    Posted 29 Feb Link to this post

    I continued to debug the kendo source code as I haven't heard from the Kendo staff at all.  I tried to trigger a change event on the dataTextField, which actually solved my problem and successfully updated the tab title.  However, the content field does not behave the same way and I have narrowed it down to this bit of code in the TabStrip.refresh function:

    } else if (e.action == 'itemchange') {
                        idx = that.dataSource.view().indexOf(view[0]);
                        if (e.field === options.dataTextField) {
                            that.tabGroup.children().eq(idx).find('.k-link').text(view[0].get(e.field));
                        }
                    }

    It seems to only update if the field with the itemChanged event is the dataTextField.  It completely ignores the dataContentField.  Is this a bug?  How can I workaround it?

     

    Thanks,

    Michelle

  6. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 01 Mar Link to this post

    Hello Michelle,

     

    Indeed the content element should be changed explicitly just like the tab text. You can use the Kendo UI TabStrip contentElement method to get the  ContentElement and change its content.  

     

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Michelle
    Michelle avatar
    33 posts
    Member since:
    Feb 2015

    Posted 01 Mar Link to this post

    Hi Boyan,

    Your suggestion defeats the purpose of using a dataSource.  Also, I am currently relying on the tabstrip refresh/append logic to compile angular content provided in my dataContentField.  The contentElement method gets me back the actual DOM element and to change its content manually, I would also have to manually compile the Angular code before appending it to the contentElement.  That is not an acceptable solution.  I have found my own workaround for updating the content in my specific case, but I would like to point out that the tabstrip appears to be missing a lot of supporting features to make the dataSource work properly with Angular.

     

    Thanks,

    Michelle

  8. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 03 Mar Link to this post

    Hello Michelle,

    thank you for your feedback. We will keep that in mind in our current development effort regarding Angular. 

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready