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

Problem with Panelbar, datawiz and width

2 Answers 65 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Mattias Hermansson
Top achievements
Rank 1
Mattias Hermansson asked on 13 Jan 2014, 01:12 PM
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 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 13 Jan 2014, 02:42 PM
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!
0
Mattias Hermansson
Top achievements
Rank 1
answered on 14 Jan 2014, 07:14 AM
Thank you, worked perfectly
Tags
PanelBar
Asked by
Mattias Hermansson
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Mattias Hermansson
Top achievements
Rank 1
Share this question
or