TabStrip select not working with Angular

[Rajesh]

http://dojo.telerik.com/@rtv/AnOju/5  what am I doing wrong that my select call does not seem to select the tab.

-Rajesh

[Alexander Valchev]

Hello Rajesh,

Please have in mind that the index starts from 0. There are two tabs so the second one has index 1, index 2 is not valid.
Also the tab selection should be executed after the window has opened which is why I put it in a timeout. See the updated example: http://dojo.telerik.com/@valchev/iWOXE

Regards,
Alexander Valchev
Telerik

 

 

[Rajesh]

Thanks very much Alexander.

Will not the time it takes to load the tab strip depend on the content loaded. In my case the contents could be a few mbs. Is there a callback I can use on load complete to rest assured the select will always work.

Thanks for calling out the index error. I was just trying out a few things and left it that way.

Thanks,
Rajesh

[Alexander Valchev]

Hi Rajesh,

If I understood correctly you are looking for the refresh event of the window.

• http://docs.telerik.com/kendo-ui/api/javascript/ui/window#events-refresh

Regards,
Alexander Valchev
Telerik

 

 

[Rajesh]

Hi Alexander,

This is not what I am looking for.

Can you change http://dojo.telerik.com/@Kiril/ENODO so that the tab on which I set content can be highlighted just after I set the content ?

Thanks,
Rajesh

[Alexander Valchev]

Hello Rajesh,

Please check the updated example: http://dojo.telerik.com/@valchev/Uduni

Regards,
Alexander Valchev
Telerik

 

 

[Rajesh]

Hi Alexander,

My tab strip content is close to 1 mb in size. It does not work with a 100 msec setTimeout with that much of content.
CAn you update the solution without a setTimeout call ?

-Rajesh

[Alexander Valchev]

Hello Rajesh,

How do you load the content? If you use Ajax request (for example with $http) you may use a promise to detect when the content is loaded and execute the code that selects the tab.

I cannot suggest a solution without a timeout because when the options change the widget is rebound. The tab selection should happen after the rebind action is completed.

Regards,
Alexander Valchev
Telerik

 

 

[Rajesh]

Hi Alexander,

Can you give me an example where a large file content is loaded into a tabstrip in ajax and the tab is selected after that ? I call select after the content is set but the tab is not highlighted.

-Rajesh

[Alexander Valchev]

Hi Rajesh,

Most probably the example that I will create will not match your exact scenario. Please create a Kendo Dojo test page that demonstrates your current implementation so I can examine it and advice you further.

Regards,
Alexander Valchev
Telerik

 

 

[Rajesh]

Hi Alexander,

I cannot write an example that does a ajax query of a 1 MB file for I do not know what REST url to hit. Please give me a working tab strip that populates its contents from an ajax query and then highlights the tab whose contents have been retrieved.

-Rajesh

[Alexander Valchev]

Hello Rajesh,

We do not have an example that loads 1 MB file. But if you use the contentLoad event, your code will execute when the content is loaded:

• http://dojo.telerik.com/@valchev/uSUza

Regards,
Alexander Valchev
Telerik

 

 

[Rajesh]

Can you rewrite this example in angular for me ? I have tried the following but have had no luck in getting the content load call back.

 <div kendo-tab-strip="deviceMetadata.viewLogTabStrip"
                             k-on-select="onViewLogsTabSelect(kendoEvent)"
                             k-data-source="deviceMetadata.logsListDataSource"
                             k-rebind = "deviceMetadata.logsListDataSource"
                             k-content-load="onContentLoadComplete(event)"
                             k-data-content-field="'content'"
                             k-data-text-field="'text'"
                        >
                        </div>

I have also tried k-content-load="onContentLoadComplete(kendoEvent)" and
k-content-load="onContentLoadComplete(e)"

with a scope function

$scope.onContentLoadComplete = function(e){
        $log.info(e);
    }

The function does get called but e is always undefined.
Quick help will be really appreciated.

-Rajesh

[Petyo]

Hello Rajesh,

the correct syntax in that case would be 

k-on-content-load="onContentLoadComplete(kendoEvent)" 

Please give this approach a try - if it does not work, you may post your case in a Dojo - we will modify it accordingly. 

Regards,
Petyo
Telerik

 

 

[Rajesh]

http://dojo.telerik.com/@rtv/iRiKi

With your suggestion the callback is not even called. With k-content-load the callback is called but with an undefined argument.

Either way I am unable to select the tab on which the content is loaded. This is the primary problem that I am trying to fix.

-Rajesh

[Petyo]

Hello,

The content-load event is triggered only when the tabstrip loads content wotj Ajax. If this i the demo you have posted does not do so - if this is your real case, too, you may use the select event, which provides the tab and the contentElement in its event data.

Regards,
Petyo
Telerik

 

 

[Gunjan]

I am trying to change tabs programmatically . Please provide documentation on how to use sleectTab method.

[Dimitar]

Hello Gunjan,

Programmatically selecting a tab could be achieved through the TabStrip's select() method. Both jQuery selector and index are valid parameters for the method:

<script>
  var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");

  tabStrip.select("li:first");  // Select by jQuery selector
  tabStrip.select(1);   // Select by index
</script>

Regards,
Dimitar
Progress Telerik