[Solved] Invoke TabStrip methods from Content

[Brian Sayegh]

Hey,

I am pretty new to MVC and was hoping someone could help me with this.

We are currently using the Tererik TabStrip.  We have the content of each tab in different View (rather than putting the content directly in the tab item declaration). 

On one of the tabs i have a bunch of radio buttons.  What i want to do is make it so that when a user click on one of the radio buttons in one tab, the view can make the TabStrip select a different tab.  I may just need to cause an Ajax postback with the tab index i would like to select, but there may be a better way.

Could someone point me in the right direction?

thanks!

[Georgi Krustev]

Hi Brian,

If you need to reload view which is related with other tab, you should make a post back to specific action which will set, for instance, some parameter in the ViewData. Hence depending on the set value, you can select the concrete tab.

If you need just to select other tab, you can use the client-side functionality of the tabstrip - http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-tabstrip-client-api-and-events.html.

Best wishes,
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.

[Brian Sayegh]

First, thanks for your response.  What i ended up doing is triggering a post using Jquery.  I can now set a breakpoint in the controller where the view is loaded and see that new data is being gathered based on the Request data.  I can also put a breakpoint in the view itself and see that it should be displaying new data.

The problem that i have no is that even though it appears that the server is being udpated with the new information, the client never changes the reflact this.  Im not sure if the views are being Cached or if there is something i need to change about my Jquery post, but the UI does not appear to render dynamically anymore.

Do you have any idea how i can make it so that each time i select a tab it will attempt to gather and display the updated data in the view rather than displaying it correclty only the first time?

Thanks,

Brian

[Georgi Krustev]

Hi Brian Sayegh,

Ajax is called only first time in order to load the content of the tab. In order to reload the content on every click you should wire the OnSelect event. Please refer to this thread which is related to the similar problem.

All the best,
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.

[Brian Sayegh]

Thanks for the reply!  I managed to figure it out earlier this week.

I am call this on select

function

 

Select(e) {

 

 

var divName = this.innerText; //This respresents the Tab. this.innerText = the text on the tab.

 

$.ajax({ url:

"Home/" + this.childNodes[0].innerHTML + window.location.search + "&TabText=" + this.childNodes[0].innerHTML,

 

cache:

false,

 

async:

false,

 

success:

function(html) {

 

 

// $("#Home").children(".t-state-active").html(html);

 

$(

"#dv" + divName + "Script").parent().html(html)

 

},

error:

function(xhr, ajaxOptions, thrownError) {

 

 

// $("#Home").children(".t-state-active").html(html);

 

alert(thrownError);

}

});

Im sure there is a cleaner way to handle it, but this has worked nicely for me.