Tabstrip contents not reloaded after clicked on second time

[Santosh]

I have 3 tabs in tabstrip control for Asp.Net Mvc app.
Each tab loads the contents using LoadContentFrom() API.
once tab is clicked for the first time it calls the action method of the controller.
After the same tab is clicked for the 2nd time it doesn't call the controller method and hence same content is displayed which was displayed for the 1st click. We need to have a functionality which will call the controller method every time the tab is clicked. Let us know if there is a workaround or property available to set this.

Thanks,

[Vladimir Iliev]

Hi Santosh,

You can use the Select event of the TabStrip to clear the current content of the tab which will force the TabStrip to load it's content again:

function onSelect(e) {
    //clear the current content of the tab before it's displayed to force the tabStrip to load it
    $(e.contentElement).html("");
}

Kind Regards,
Vladimir Iliev
the Telerik team

[Santosh]

Hi Vladimir,

It does solves the problem but then introduces new one.

I have a button in the tab. when that tab is loaded for two times and when the button is clicked. the client side click  event for that button is fired two times because of the changes you have suggested. Let me know if there is better solution available for original issue.

Thanks,
Santosh

[Vladimir Iliev]

Hi Santosh,

 
You should use the current approach and detach all events before clearing the content of the tab using custom code. 

Kind Regards,
Vladimir Iliev
Telerik

[Santosh]

But it doesn't seem to be a maintainable and readable code. I was hoping that control will expose a property which determines if tab is reloaded every time it is clicked.

Thanks,

[Vladimir Iliev]

Hi Santosh,

 
I would suggest to share your idea at KendoUI UserVoice to allow other users vote for it. Most voted ideas are included in next KendoUI releases.

Kind Regards,
Vladimir Iliev
Telerik

[Santosh]

We cant wait for next release of KendoUI, since we will release our product in next week. So please let me know if there is a workaround with sample code.

Thanks,
Santosh

[Vladimir Iliev]

Hi Santosh,

 
As I mention in my previous reply detaching the events in the content of the tabs currently is not supported and you should implement it using custom code which is out of scope of our support service as it covers the build-in functionality of the controls only.

Kind Regards,
Vladimir Iliev
Telerik

[Paul]

The proposed solution to just blank out the html during the "onSelect" event is poor, and as it was mentioned, it causes more problems than before. Even unbinding the events causes the page to reload several times because it actually calls the document.ready event several times.

Here is a cleaner solution. Instead of using the onSelect event, just use your own click event:

var ts = $("#clienttabstrip").data().kendoTabStrip;
    ts.tabGroup.on('click', 'li', function (e) {
    ts.reload($(this));
});

This will reload the data in the tab.  One more note: use the syntax above (data().kendoTabStrip) instead of the syntax in the documentation:

var tabStrip = $("#clienttabstrip").data().kendoTabStrip;
//$("#clienttabstrip").kendoTabStrip().data("kendoTabStrip");
tabStrip.reload("li:first");

I hope this helps anyone. This took me 3 days to figure out... please fix this in the next release. Thanks.

[G]

Paul,

I came across your post and it looks very similar to what I want to do as well. However, I am getting an error when trying to access the tabStrip.data() object, saying that it is null.

I'm curious where on your page you have the JavaScript.

Thank you,

-G

[Paul]

You can try this instead:

$("#maintabstrip").data("kendoTabStrip");

If you're still getting null, then your tab strip hasn't been initialized yet or you have the wrong id in there. Check to see if this is null as well:

if($("#clienttabstrip") == null) {
    //Then check to see if this is null:
    if($("#maintabstrip").data("kendoTabStrip") == null) {
        $("#tabstrip").kendoTabStrip(<br>
    }
}

Hope this helps.

[Paul]

Sorry for the bad code in the last post, it won't let me edit it:

if($("#clienttabstrip") != null) {
    //Then check to see if this is null:
    if($("#clienttabstrip").data("kendoTabStrip") == null) {
      // Initialize it here...
       $("#tabstrip").kendoTabStrip();
    }
}

[G]

Paul,

Thanks for the quick response, while reading it occurred to me that I need the "#" sign in front of the elementID - I had forgotten it because the Kendo syntax for using "#" for evaluations of variables was confusing. Once I added that back on it works as expected.

To add to the complexity, I am using tab strip as a template within a grid that will (hopefully) be able to POST data and then reload it from the server. Hence your portion of the code - reloading the data. I am running into an issue with the JavaScript inside of a Kendo script template. With your code and some tweaking I was able to come up with:

<script id="script_#=ID#">
        var onActivate = function (e) {
            var ts = $("\#tabStrip_#=ID#").data().kendoTabStrip;
            ts.tabGroup.on('click', 'li', function (e) {
                ts.reload($(this));
            });
        }
<\/script>

[You'll notice the additional "\" in front of the "#tabStrip" and the bottom "</script>" tag. The "\" is simply Kendo's escape character when using templates. If you simply use "#tabStrip" or "</script>" the Kendo template won't render the correct HTML and you get a JavaScript error.]

The onActivate is tied to the tab Event.Activate which fires after the data has been loaded, which is exactly what I am looking for in order to reload the tab data on each click. I am essentially going to try to override the reload in order to POST data to the server and use the tab header (title) as a "Save" button.

I know this is a bit off topic, but I am using the tab strip to load a partial view which has a Model. Any thoughts on how to use the ajax calls associated with the tab strip in order to POST the Model back to the server?

Thank you,

-G

[Vladimir Iliev]

Hi,

As this thread is out of the original topic, may I kindly ask you to open a new support thread/ forum post for the TabStrip and provide your current TabStrip code? In this way it is much easier to follow and concentrate on the particular issue which usually leads to its faster resolving.

Regards,
Vladimir Iliev
Telerik

[Stephen]

Hello,

I realize this post is a little bit older but I am hoping to still get some help.  Paul's solution with adding the click event seems like a great solution.  I am having one issue though.  My tabstrip is setup much the same as the OP's is.  Each tab uses LoadContentFrom to load a partial view.  Each of my partial views are Ajax forms.  When I add the click even script to the tabstrip, the first time I click on a tab it seems like it is loading it and then it never does.  If I click it a second time then it is fine.  Each time after that it is fine, it is just the first time.  I am guessing it has something to do with the Ajax form which is calling the Get method on the controller and then the click event performing the same action?

If there is something I am not understanding or simply missing I would appreciate the help.

Thanks,

Steve

[Vladimir Iliev]

Hi Stephen,

Could you please open a new support ticket / forum post and provide your current TabStrip setup as well as the related partial views and Controller? This would help us pinpoint the exact reason for current behavior. 

Regards,
Vladimir Iliev
Telerik

 

 

[Stephen]

ok done

[Danilo]

Nice solution, Thanks

[Srinivas]

This solution seems to work fine for Chrome but doesn't work on IE. Is there a different workaround to implement this in IE? 

 

Thanks,

Srini.

[Vladimir Iliev]

Hi Srinivas,

The previously provided solution works as expected in IE browser on our side - could you please isolate the issue in sample project and send it back to us?

Regards,
Vladimir Iliev
Telerik