Problem with Panelbar, datawiz and width

[Mattias Hermansson]

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

[Dimo]

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

[Mattias Hermansson]

Thank you, worked perfectly