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

[Michelle]

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

[Michelle]

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

[Michelle]

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

[Michelle]

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

[Boyan Dimitrov]

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

 

 

[Michelle]

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

[Petyo]

Hello Michelle,

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

Regards,
Petyo
Telerik