Tabs within tab

Question

Hi All, it is clear that one can render subtabs into a tab in JS. However my tabs are completely data-driven, so I want to define them in Model.

The following almost works, however RazorViewTemplate accepts only string:

foreach (string tabGroup in tabGroups)

{

Tab tab = new Tab{ ID = (++nTab).ToString(), TabModel = new TabProperties { ShowRoundedCorner = true }};

foreach( string tabString in thisTabGroups.tabs )

tab.TabModel.Items.Add( new TabBaseItem { ID = tabString, Text = tabString } );

MainTab.TabModel.Items.Add

(new TabBaseItem

{

ID = tabGroup,

Text = tabGroup,

ContentTemplate = new MvcTemplate { RazorViewTemplate = data => tab }

});

}

It does not seem practical to render the subtabs as partialViews as I don't know at coding time how many there will be with what texts.

Accordion is vertical so it does not fit here. Please advise.

Prince Oliver · Answer

Hi Gyorgy, 

Thank you for contacting Syncfusion support. 

You can get the HTML string of the sub tab control using ToHtmlString() method, kindly refer to the following code. 





foreach (string tabGroup in tabGroups) 
{ 
    Tab tab = new Tab { ID = (++nTab).ToString(), TabModel = new TabProperties { ShowRoundedCorner = true } }; 
    foreach (string tabString in thisTabGroups.tabs) 
        tab.TabModel.Items.Add(new TabBaseItem { ID = tabString, Text = tabString }); 
 
    MainTab.TabModel.Items.Add 
    (new TabBaseItem 
    { 
        ID = tabGroup, 
        Text = tabGroup, 
        ContentTemplate = new MvcTemplate<TabBaseItem> { RazorViewTemplate = data => tab.ToHtmlString() } 
    }); 
} 

Still you will not be able to render the tab control, because of “Object null reference” exception. You can render our controls like button entirely from model. But controls like Tab are have content template which requires ViewContent to render the control. So, it cannot be rendered entirely using model. You need to render the control in the view and pass properties alone from the model. 

Regards, 
Prince

Gyorgy Gorog · Answer

Price, thanks for clarifying this.

I keep discovering that C# code behind is usually in the "how to" sections. I think you have all documentation needed for dummies like me but the documentation structure hides them even with your forum answers and sample codes being part of it.

Also I find I have to consult the JS version docs for property and event completeness.

Anyway your support service is a great one.

Just to mention, I have done with Accordion in half an hour so some controls are really staightforward and still nice. Tab also falls in this category, this "Tab in tab" stuff was actually an extra idea that one can even live without :)

(While at work, I keep wondering if I'm a robot so the captcha may be misleading :)

Ilakkiya Baskar · Answer

Hi Gyorgy,

Thank you for your valuable feedback.

We had given the documentation for updating the value from code behind in how to section of the Tab component.

We will check and update the documentation hierarchy as soon as possible in the MVC platform.

For captcha problem,

Can you please share the details for how the captcha mislead you? Do you faced any problem with captcha? If yes, can you please share the below details about that issue?

Share the snapshot about that issue.
Share the console details for that page.

Steps to take the console details:

1. Right the mouse click inspect element and click console tab and share the details:

2. Press F12 in your browser and share the details.

Let us know , if there is any concern.

Regards

Ilakkiya B