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

Overylay existing Html Content instead of pushing down content on expand

5 Answers 61 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Greg
Top achievements
Rank 1
Greg asked on 25 Apr 2017, 09:20 PM

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

 

Thanks

 

 

5 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 26 Apr 2017, 03:20 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Greg
Top achievements
Rank 1
answered on 27 Apr 2017, 06:52 PM

Thank you.

0
Greg
Top achievements
Rank 1
answered on 28 Apr 2017, 12:46 PM

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>

 

0
Dimitar
Telerik team
answered on 02 May 2017, 09:43 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Greg
Top achievements
Rank 1
answered on 02 May 2017, 12:34 PM
Yes, that did it.  Thank you so much!
Tags
PanelBar
Asked by
Greg
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Greg
Top achievements
Rank 1
Share this question
or