[Solved] [VB.NET/PanelBar + Tabstrip] Panelbar does not work inside a tabstrip

[Michiel Peeters]

Dear Telerik community,

Finally the telerik controls are slightly working in my project based on VB.NET. Only i've an another problem with one of the controls and i thought i had it fixed but it isnt. I have a tabstrip control which renders contect via the method LoadContentFrom. In this LoadContentFrom i have defined a partialview (.ascx) for rendering my template. In this partialview i want to make use of the Panelbar control, only there occurs a problem when i want to use a ajax control inside a ajax control. The problem is that the javascript file (telerik.panelbar.min.js) does not load. Via a forumthread i've read that i can add individually javascript files so i have placed in my partialview the following line:

<%

=Html.Telerik().ScriptRegistrar().DefaultGroup(Function(group) group.Add("telerik.panelbar.min.js"))%>

 

So i thought that this will fixes the problem but it didnt. So my question is how do i get my panelbar control working INSIDE a tabstrip control.

Extra info:

In my Site.Master i have created a contentpanelplaceholder which can be filled with the scriptregistar of Telerik. I have chosen this way so that i can make use of the inbuild ASP.NET MVC Validation controls. So when needed i call the scriptregistar of Telerik. Maybe is this the problem?

Page where the partial views + scriptregistar is used:

<

 

asp:Content ID="DetailsProjectMainContent" ContentPlaceHolderID="MainContent" runat="server">

 

<%

 

Dim tabBuilder As Telerik.Web.Mvc.UI.TabStripBuilder = Html.Telerik().TabStrip()

 

 

tabBuilder.Name(

"TabProjectDetails")

 

 

 

For Each projectTypeEntity In Model.ProjectTypes

 

 

Dim strName As String = projectTypeEntity.Name

 

 

Dim intId As Integer = projectTypeEntity.Id

 

tabBuilder.Items(

Function(tab) tab.Add().Text(strName).LoadContentFrom("Load" & strName & "Template", "ProjectType", New With {.id = intId}))

 

 

Next

 

 

tabBuilder.SelectedIndex(ViewData(

"viewTemplate"))

 

tabBuilder.Render()

%>

</

 

asp:Content>

 

<

 

asp:Content ID="DetailsProjectScriptContent" ContentPlaceHolderID="ScriptContent" runat="server">

 

<%

= Html.Telerik().ScriptRegistrar() %>

 

</

 

asp:Content>

 

[Atanas Korchev]

Hello Michiel Peeters,

This help article shows how to use UI components in ajax views. A script registrar put in partial view loaded with ajax cannot register its JavaScript files. Those must be registered with the main ScriptRegistrar.

Regards,
Atanas Korchev
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.

[Michiel Peeters]

Dear Atanas,

Thank you for your quick reply. As i can see a user needs to click first on a link so it can renders the proper layout. In my project it must loads automaticcly. Let me share my way of thinking. Hopefully i can write it correctly.

1) A user goes to a projectoverview (rendered by a telerik grid, which works perfectly fine)
2) A user can choose in this projectoverview to view details about a project (which will bring to the detailsproject.aspx).
3) In this page (detailsproject.aspx) it automaticcly loads all related projecttype (like designs, prototypes, etc) into the tabcontrol of telerik.
4) A user can switch then between the tabs which have a panelbar control of telerik where the versions of designs or prototypes are displayed. The user can click on a panelbar to view all the items that are located under a specific version.

So thats the reason that this view needs to automaticcly load the partialview.

I hope that you understand what i mean.

Kind regards,
Michiel Peeters

[Atanas Korchev]

Hello Michiel Peeters,

I sent you that help article to show you how to register the required JavaScript files (for the panelbar). Please review it.

Regards,
Atanas Korchev
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.

[Michiel Peeters]

Dear Atanas,

I have reviewed twice the article to find a proper way to make this work, but to bad i have failed. I have also called in the help of company experts in Javascript for how to handle this matter, but they couldn't provide me in a proper answer. However i've discovered a thing what is very interesting. Let me sum up again the sequence what is going to happen.

1) A user clicks on the details icon of a project to view alle the details inside a project.
2) When the page loads it checks which projecttypes there are and loads those into seperate tabbars.
3) During the creation of these tabbars it will also loads in via the function LoadContentFrom a partialview which renders a another ajax control called panelbar (which loads again as content a gridview).

In your technical documentation you get the HTML output by calling an action on a controller and places this in a predefined division. This is not the situation what i currently have, because i render my templates via LoadContentFrom with partial views.

After that said, when the page loads with the tabbar control, this control will render first the complete tabbar control and after that it will fires the ajax requests to obtain the content with the LoadContentFrom. My solution lays there but how i should do it? I do not know.

Also another question about the technical documentation, how can scriptregistrar recognize the id of the control when it is loaded into the html division? Because when i add the JS file (telerik.panelbar.min.js) to the scripregistrar it does not recognize my panelbar.

I hope you can help me out.

Kind regards,
Michiel Peeters

[Atanas Korchev]

Hello Michiel Peeters,

Unfortunately I cannot help you without seeing the relevant source code. I suggest you paste it here.

Regards,
Atanas Korchev
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.

[Michiel Peeters]

Dear Atanas,

Ofcourse, that was not good from me for not posting the sourcecode. Is it possible to send it private or? And what kind of source files are you looking for? Do i need to provide you also the SQL database or?

I hope to hear from you soon and thank you for your time.

Kind regards,
Michiel Peeters

[Atanas Korchev]

Hi Michiel Peeters,

I am sending you the simplest application how to load a panelbar component from ajax.

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

[Michiel Peeters]

Dear Atanas,

There is one thing i have read over in the technical documentation and that was that i need to include this file as well:

telerik.common.min.js

After this it works. Thank you for your help.

Kind regards,
Michiel

[Bill]

does anyone have a sample of a tabstrip inside a panelbar?

[Alex Gyoshev]

Hello Bill,

Refer to your other post on this topic for further information.

All the best,
Alex Gyoshev
the Telerik team