Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > PanelBar > Panel Bar Rendering but not Exanding or functioning

Not answered Panel Bar Rendering but not Exanding or functioning

Feed from this thread
  • Mark avatar

    Posted on Dec 28, 2011 (permalink)

    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

    Reply

  • Mark avatar

    Posted on Dec 28, 2011 (permalink)

    Okay, so I've moved the:

    @{
    Html.Telerik().ScriptRegistrar()
        .DefaultGroup(group => group.Add("AjaxLogin.js")
                                    .Add("jquery-ui-1.8.16.custom.min.js"))
        .Render();
    }

    to after the footer, just before the final </html> in the _layout.cshtml, and lo, it starts working. My tab control, however, does not. Guess I'll need to post another forum post for that one...

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > PanelBar > Panel Bar Rendering but not Exanding or functioning
Related resources for "Panel Bar Rendering but not Exanding or functioning"

[  ASP.NET MVC PanelBar Features  |  Documentation  |  Demos  |  Telerik TV ]