This is a migrated thread and some comments may be shown as answers.

[Solved] Panel Bar Rendering but not Exanding or functioning

1 Answer 24 Views

PanelBar

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Mark asked on 28 Dec 2011, 01:18 PM

Hello there,

I am trialling your controls, and frankly, they look pretty wizzy and I'm pretty certain to get sign off on purchasing them if I can get them working and implemented quickly. I have followed the set up instructions, and the grid works wonderfully, so I change my JQuery UI Accordian for your own PanelBar in my razor _Layout.cshtml, and I am having real trouble getting it to work. My problems is that the it will not expand, the control draws, when I move the cursor over the control, it turns to a "hand", but it will not respond to any interaction and it won't animate at all.

The code to draw the test panel is as follows:

<div id="body">

@RenderSection("featured", false)

<div>

@{

Html.Telerik().PanelBar()

.Name("Bob")

.HtmlAttributes(new { style = "width: 140px; float: left; margin-bottom: 30px;" })

.SelectedIndex(0)

.Items(Item =>

{

Item.Add()

.Text("Item 1")

.Items(subItem =>

{

subItem.Add()

.Text("Item 1.1");

subItem.Add()

.Text("Item 1.2");

});

})

.Items(Item =>

{

Item.Add()

.Text("Item 2")

.Items(subItem =>

{

subItem.Add()

.Text("Item 2.1");

subItem.Add()

.Text("Item 2.2");

});

})

.Render();

}

</div>

<section class="content-wrapper main-content clear-fix">

@RenderBody()

</section>

</div>

In the header I have:

<head>

<meta charset="utf-8" />

<title>@ViewBag.Title</title>

@{

Html.Telerik().StyleSheetRegistrar()

.DefaultGroup(group => group.Add("telerik.common.css")

.Add("telerik.transparent.min.css")

.Add("Site.css")

.Add("jquery-ui-1.8.16.custom.css"))

.Render();

}

@{

Html.Telerik().ScriptRegistrar()

.DefaultGroup(group => group.Add("AjaxLogin.js")

.Add("jquery-ui-1.8.16.custom.min.js"))

.Render();

}

<meta name="viewport" content="width=device-width">

</head>

Okay, so what have I tried so far:

I have tried moving the ScriptRegistrar to the end of the document. No joy.
I have tried moving the PanelBar into a standard razor view out of the _Layout.cshtml, no luck.
I have tried explicitly referencing the script by adding it to the .DefaultGroup. I can see then, in fiddler 2, that the .js is loaded, the functionality is the same though. It will still not expand.
I have tried removing the references to jquery-ui to see if there was a conflict. This did not work either.

The code it renders out is below:

<ul class="t-widget t-panelbar t-reset" id="Bob" style="width: 140px; float: left; margin-bottom: 30px;"><li class="t-item t-state-active"><span class="t-link t-state-selected t-header">Item 1<span class="t-icon t-arrow-up t-panelbar-collapse"></span></span><ul class="t-group"><li class="t-item t-state-default"><span class="t-link">Item 1.1</span></li><li class="t-item t-state-default"><span class="t-link">Item 1.2</span></li></ul></li><li class="t-item t-state-default"><span class="t-link t-header">Item 2<span class="t-icon t-arrow-down t-panelbar-expand"></span></span><ul class="t-group" style="display:none"><li class="t-item t-state-default"><span class="t-link">Item 2.1</span></li><li class="t-item t-state-default"><span class="t-link">Item 2.2</span></li></ul></li></ul>

This is using VS2010 and MVC 4 razor views. This is all running on a Windows 7 machine, and I am using Chrome and Fiddler to debug.

Any help would be appreciated.

Regards,

Mark

[Solved] Panel Bar Rendering but not Exanding or functioning

1 Answer, 1 is accepted