[Solved] TabStrip: Can I manually trigger an ajax load via client API

[Daniel Turner]

Hello,

Excellent work with your MVC Extensions, they are absolutely smashing!

I'm currently in the process of developing a LOB web application using ASP.NET MVC2. Unfortuntalely the data for this application is coming from a bunch of *really* slow legacy web services. By slow, I'm talking close ~10 seconds to load the dashboard with all of its data. Obviously this is unacceptable, so we looked into loading tabs on demand. Whilst this dramatically reduced the initial load time, there was still an annoying delay each time you selected a new tab for the first time.

So my question is this, am I able to do the following?
* Designate the first tab to load with the page (yes - easy)
* Designate the other tabs to load via ajax (yes - easy)
* Transparently eager fetch the ajax tabs in document.ready whilst the user is reviewing the data in the first tab (???)

Obviously if the user was to get a bit trigger happy and click an unloaded tab before it was finished loading, this would need to behave as per the standard behaviour where some sort of loading indicator is shown.

I currently have a proof of concept going without the Telerik TabStrip (using pure JS and my own jquery tabs plugin), but I would *love* to be able to replace all this with your TabStrip and either:
* Some sort of simple ".EagerLoad(true)" designation in my views
* Or some sort of "tabStrip.load($(".t-item", tabStrip.element)[0]);" function in the client API

Does this functionality already exist?

[Georgi Krustev]

Hello Daniel Turner,

One possible solution is  to wire Load client event of TabStrip component. In it you can call javascript method which will make ajax request for each Tab in order to load the content. Something like this code snippet:

function onLoad(e) {
          var index = 0;
          var tabstrip = $(this).data('tTabStrip');
          var $tabs = $(this).find('> .t-reset .t-item')
          var $contents = $(this).find('> .t-content');
          var tabsLength = $tabs.length;

          var getContent = function() {

              var $item = $($tabs[index]);
              var $link = $item.find('.t-link').attr('href');
              var $content = tabstrip.getContentElement($contents, index);

              if ($content.html()) return;

              tabstrip.ajaxRequest($item, $content, function() {
                                      index++
                                      if (index < tabsLength) getContent();
                                  });
                              }

        getContent(); //start loading the contents.
      }

Note that this is just a sample code and it is not tested, but in general shows the idea, which I described in the begging. The getContents will iterate all tabs and will make ajax request to load the content.

Please give a try and let me know what your findings are.

Kind regards,
Georgi Krustev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.