Overylay existing Html Content instead of pushing down content on expand

6 posts, 0 answers
  1. Greg
    Greg avatar
    28 posts
    Member since:
    Dec 2014

    Posted 25 Apr Link to this post

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

     

    Thanks

     

     

  2. Dimitar
    Admin
    Dimitar avatar
    225 posts

    Posted 26 Apr Link to this post

    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.
  3. Greg
    Greg avatar
    28 posts
    Member since:
    Dec 2014

    Posted 27 Apr Link to this post

    Thank you.

  4. Greg
    Greg avatar
    28 posts
    Member since:
    Dec 2014

    Posted 28 Apr Link to this post

    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>

     

  5. Dimitar
    Admin
    Dimitar avatar
    225 posts

    Posted 02 May Link to this post

    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.
  6. Greg
    Greg avatar
    28 posts
    Member since:
    Dec 2014

    Posted 02 May Link to this post

    Yes, that did it.  Thank you so much!
Back to Top