Overylay existing Html Content instead of pushing down content on expand

[Greg]

Is the a way when the PanelBar is expanded it just overlays existing Html instead of pushing it down?

 

Thanks

 

 

[Dimitar]

Hello Greg,

Overlaying dropdown is not supported out of the box in Kendo PanleBar. To achieve this you can use the Kendo DropDownList or Menu widgets.

A workaround for this is to modify the PanelBar with CSS, so that you can customize its behavior to your liking. On the following Dojo example I have made a basic implementation of the Kendo PanelBar. You will notice that I have modified the default behavior with the following CSS:

<style>
  .k-item {
    position: relative: width: 100%;
  }

      
  .k-item .k-group.k-panel {
    position: absolute;
    width: 100%;
    z-index: 99;
  }
</style>

Keep in mind that this is just an example and you have to modify it according to your needs.

I hope this helps. In case you have any other questions, please do not hesitate to contact us.

Regards,
Dimitar
Telerik by Progress

[Greg]

Thank you.

[Greg]

For some reason (I think it has to do with me using a grid inside the panelbar) it's not working.

Here is my code:

@(Html.Kendo().PanelBar()
.Name("docPanelbar")
.ExpandAll(false)
.Items(panelbar =>
{
panelbar.Add().Text("<span>" + "<div class=\"spinner\">Documents " + "<img src='" + @Url.Content("~/") + "images/ajax-loader2.gif' />" + "</div></span>").Encoded(false)
.Content(
@<div>
@(Html.Kendo().Grid<DocumentVM>()
.Name("DocumentGrid")
.AutoBind(false)
.Columns(c =>
{
c.Bound(u => u.DocId).ClientTemplate((@Html.ActionLink("#=FileName#", "ShowDocument", "RequestPONumber", new DocumentVM { DocId = "#=DocId#", PONumber = "#=PONumber#", Path = "#=Path#", FileExtension = "#=FileExtension#" }, null).ToHtmlString())).Title("");
c.Bound(u => u.PONumber).Hidden(true);
c.Bound(u => u.FileName).Hidden(true);
c.Bound(u => u.LastModifiedTime).Format("{0:MM/dd/yyyy}").Width(80).Title("Modified");
c.Bound(u => u.InvoiceStatus).Width(90);
c.Bound(u => u.FileExtension).Title("").ClientTemplate("<img src='" + Url.Content("~/images/") + "#=FileExtension#.png' height='24' width='24' alt='#= FileExtension # icon' />").Width(50);
c.Bound(u => u.Path).Hidden(true);
})
.DataSource(d => d
.Ajax()
.Read(r => r.Action("GetDocuments", "RequestPONumber").Data("getPO"))
.Model(m =>
{
m.Id(u => u.DocId);
}))
.Events(events => events.DataBound("onDocumentDatabound"))
.Scrollable()
.HtmlAttributes(new { style = "width:100%", @class = "GridNoHeader" }))
</div>);
})
.HtmlAttributes(new { style = "width:390px" })
)

 

and the css. I do have some css that hides the grids header not sure if maybe that might also be the cause.

 

<style>
.form-group {
margin-bottom: 2px;
}
.margin {
margin-bottom: 12px;
}
.GridNoHeader .k-grid-header {
height: 0;
border-bottom-width: 0;
display: none;
overflow: hidden;
}
</style>

 

[Dimitar]

Hello Greg,

Thank you for the code sample provided.

Indeed you need to set the styling to a different class to achieve this in your current scenario. You can try the following and it should work:

#docPanelbar .k-item {
  position: relative;
  width: 100%;
}

      
#docPanelbar .k-item .k-content {
  position: absolute;
  width: 100%;
  z-index: 99;
}

Regards,
Dimitar
Telerik by Progress

[Greg]

Yes, that did it.  Thank you so much!