tabstrip-- is there a way to put an entire page and it's associated code-behind file as part of a tabstriptab content?
1 Answer 10 Views
Lawrence
Top achievements
Rank 1
Lawrence asked on 03 Jun 2021, 03:57 PM

Is there a way to put an entire page and it's associated code-behind file as part of a tabstriptab content?  I'm having a problem styling the entire "page" since it has a component containing a tab strip and it always ends up on the left side of the page and the content ends up on the right side of the page.  The best thing would be to put the content in the tab content itself but i don't want to put all that html and code into one file that contains the tabstriptab.

 

Thanks,
Lawrence.

1 Answer, 1 is accepted

Sort by
0
Eric R | Senior Technical Support Engineer
Telerik team
answered on 07 Jun 2021, 07:55 PM

Hi Lawrence,

This can definitely be achieved in Blazor. This is a major feature in Razor Components which is the underlying technology behind Blazor. Let me review a sample of how to do this below. 

Example

Using the default Telerik UI for Blazor Visual Studio Project Template, I moved the content of the Index page into a new component named HelloWorld and moved it into into a Components folder below the Shared folder along with the FetchData and Counter pages as shown in the below screenshot.

This enabled using the Index.razor page as a TabStrip which can output the following within the control. Essentially, it will allow composing components within the TasbStrip as desired.

The TabStrip on the Index.razor page is shown in the below code snippet. Note that it references each component individually.

@page "/"

<h1>Dashboard</h1>

<TelerikTabStrip>
    <TabStripTab Title="Hello World!">
        <HelloWorld></HelloWorld>
    </TabStripTab>
    <TabStripTab Title="Fetch Data">
        <FetchData></FetchData>
    </TabStripTab>
    <TabStripTab Title="Counter">
        <Counter></Counter>
    </TabStripTab>
</TelerikTabStrip>

Wrapping Up

For additional reference, attached is a sample that illustrates the above implementation. To run the sample locally, ensure the Telerik NuGet Feed is Configured in Visual Studio.

For more information on nesting Blazor components in advanced scenarios, see the Blazor University - Components section. Alternatively, I encourage taking some time to review our Video On-Demand Training which will provide an excellent foundation for developing with UI for Blazor.

Please let me know if you need any additional information. Thank you for being a valued UI for Blazor developer.

Regards,


Eric R | Senior Technical Support Engineer
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Asked by
Lawrence
Top achievements
Rank 1
Answers by
Eric R | Senior Technical Support Engineer
Telerik team
Share this question
or