Problem with Panelbar, datawiz and width

3 posts, 1 answers
  1. Mattias Hermansson
    Mattias Hermansson avatar
    24 posts
    Member since:
    May 2010

    Posted 13 Jan 2014 Link to this post

    Hello,

    I'm using panelbar, and in each panel i use different charts with your addon datawiz, I have the first panel expanded, and when i expend any of the other panels the width is off, it's like 1% width or something, and i have set the htmlattributes to 100% on them all. I have attached a print screen and my code below

    @(Html.Kendo().PanelBar()
            .Name("panelbar")
            .HtmlAttributes(new { @style = "width:100%" })
            .ExpandMode(PanelBarExpandMode.Multiple)
            .Items(panelbar =>
            {
                panelbar.Add().Text("Summa kontant och kort")
                    .Expanded(true)
                    .Content(@<div style="padding: 10px;">
                        @(Html.Kendo().Chart(Model)
            .Name("graphCashOrCard")
            .Title("Köp med kort och kontant")
            .HtmlAttributes(new { @style = "width:100%" })
            .Legend(legend => legend
                .Position(ChartLegendPosition.Top)
            )
     
            .Series(series =>
            {
                series.Column(model => model.TotalCoin).Name("Summa kontantköp");
                series.Column(model => model.TotalCreditCard).Name("Summa kortköp");
            })
            .CategoryAxis(axis => axis
                .Date()
                .BaseUnit(ChartAxisBaseUnit.Fit)
                .Categories(model => model.TimeStamp)
                .Labels(labels => labels.Rotation(-90))
                .MajorGridLines(lines => lines.Visible(false))
            )
            .ValueAxis(axis => axis.Numeric()
                .Labels(labels => labels.Format("{0:N0}"))
                .MajorUnit(100000)
                .Line(line => line.Visible(false))
            )
            .Tooltip(tooltip => tooltip
                .Visible(true)
                .Format("{0:N0}")
            )
                        )
                    </div>);
     
                panelbar.Add().Text("Antal fel")
                    .Expanded(false)
                    .Content(@<div style="padding: 10px;">
                        @(Html.Kendo().Chart(Model)
            .Name("graphFaults")
            .Title("Antal fel")
            .HtmlAttributes(new { @style = "width:100%" })
            .Legend(legend => legend
                .Position(ChartLegendPosition.Top)
            )
     
            .Series(series => series.Column(model => model.NrErrors).Name("Antal Fel"))
            .CategoryAxis(axis => axis
                .Date()
                .BaseUnit(ChartAxisBaseUnit.Fit)
                .Categories(model => model.TimeStamp)
                .Labels(labels => labels.Rotation(-90))
                .MajorGridLines(lines => lines.Visible(false))
            )
            .ValueAxis(axis => axis.Numeric()
                .Labels(labels => labels.Format("{0:N0}"))
                .MajorUnit(20)
                .Line(line => line.Visible(false))
            )
            .Tooltip(tooltip => tooltip
                .Visible(true)
                .Format("{0:N0}")
            )
                        )
                    </div>);
     
                panelbar.Add().Text("Antal transaktioner")
                    .Expanded(false)
                    .Content(@<div style="padding: 10px;">
                        @(Html.Kendo().Chart(Model)
            .Name("graphTransactions")
            .Title("Antal transaktioner")
            .HtmlAttributes(new { @style = "width:100%" })
            .Legend(legend => legend
                .Position(ChartLegendPosition.Top)
            )
     
            .Series(series => series.Column(model => model.NrTransactions).Name("Antal transaktioner"))
            .CategoryAxis(axis => axis
                .Date()
                .BaseUnit(ChartAxisBaseUnit.Fit)
                .Categories(model => model.TimeStamp)
                .Labels(labels => labels.Rotation(-90))
                .MajorGridLines(lines => lines.Visible(false))
            )
            .ValueAxis(axis => axis.Numeric()
                .Labels(labels => labels.Format("{0:N0}"))
                .MajorUnit(10000)
                .Line(line => line.Visible(false))
            )
            .Tooltip(tooltip => tooltip
                .Visible(true)
                .Format("{0:N0}")
            )
                        )
     
                    </div>);
            })
    Thanks in advance
  2. Answer
    Mattias Hermansson
    Mattias Hermansson avatar
    24 posts
    Member since:
    May 2010

    Posted 13 Jan 2014 Link to this post

    Hello Mattias,

    Layout-related issues can occur in cases when a widget is initialized inside a hidden container. You have a couple of options:

    1. Refresh the Charts' layout in the PanelBar's activate event.

    http://docs.kendoui.com/api/web/panelbar#events-activate

    http://docs.kendoui.com/getting-started/using-kendo-with/using-kendo-in-responsive-web-pages

    2. Use a client-side PanelBar (i.e. not the MVC wrapper) and initialize it after all nested Charts.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Mattias Hermansson
    Mattias Hermansson avatar
    24 posts
    Member since:
    May 2010

    Posted 14 Jan 2014 Link to this post

    Thank you, worked perfectly
Back to Top