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

Problem with Panelbar, datawiz and width

2 Answers 189 Views

PanelBar

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

Mattias Hermansson asked on 13 Jan 2014, 01:12 PM

panelbar-with-datawiz.png

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

Accepted