cannot resize item

[Dario]

Hi to all,I'm trying to use a chart into a TileLayout.

my code

<script id="newcontacts-template" type="text/x-kendo-template">
    @(Html.Kendo().Chart<Portale.Web2.Models.RolePages.ContactCount>()
        .Name("newContactChart")
        .Title("Nuovi contatti per provenienza")
        .Legend(legend => legend
            .Position(ChartLegendPosition.Top)
        )
        .DataSource(ds => ds.Read(read => read.Action("NewContactRolePage", "Home")))
        .Series(series => {
            series.Bar(model => model.Count).Name("Nuovo Contatti").CategoryField("Category");
        })
        .CategoryAxis(axis => axis
            //.Labels(labels => labels.Rotation(-90))
            .Crosshair(c => c.Visible(true))
        )
        .ValueAxis(axis => axis.Numeric()
            .Labels(labels => labels.Format("{0:N0}"))
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Shared(true)
            .Format("{0:N0}")
        )
        .HtmlAttributes(new { style = "height:100%;width:100%;" })
        .ToClientTemplate()
    )
</script>
<div class="row">
    <div class="col">
        @(Html.Kendo().TileLayout()
        .Name("rolepagetilelayout")
        .Columns(2)
        .Containers(c => {
            c.Add().Header(h => h.Text("Nuovi Contatti")).BodyTemplateId("newcontacts-template").ColSpan(2);
        })
        .Reorderable(true)
        .Resizable(true)
        .Events(e=>e.Resize("onTileResize"))
    )
    </div>
</div>

 

chart not resized, why?

 

[Alex Hajigeorgieva]

Hello, Dario,

The Charts and barcodes do not auto resize and require programmatic handling when their container changes size with the help of the  kendo.resize() method. Having said that, it appears that the chart in the screenshot might have already been resized but the space is just too small for it to be able to fit the labels and title.

You could use some of the techniques in the jQuery TileLayout Overview Demo and that could include the chart title as well.

// onTileResize if rowspan is 1, hide labels
var rowSpan = e.item.css("grid-column-end");
var chart = e.item.find(".k-chart").data("kendoChart");

if (rowSpan === "span 1" && chart) {
    chart.options.categoryAxis.labels.visible = false;
    chart.redraw();
}
// show chart labels when the space is enough
if (rowSpan !== "span 1" && chart) {
    chart.options.categoryAxis.labels.visible = true;
    chart.redraw();
}

Other alternatives when displaying a chart in a very small container could be labels auto rotation and automatic base unit adjustment:

 .Labels(l=>l.Rotation("auto"))

// autobase unit for date charts
.CategoryAxis(c => c.Date()
    .BaseUnit(ChartAxisBaseUnit.Fit)

I hope this helps.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Dario]

Thank you Alex, but I didn't want to resize in a small width.

What i expect is that the chart uses all the space in the container as it should use all 2 columns, why doesn't it?

[Dario]

Here you are, an example.

The "strange things" is that I set colspan=2, but it seems it use colspan=1.

Why?

[Alex Hajigeorgieva]

Hi, Dario,

The item itself has a grid-column-end attribute with span 2. 

Could you provide a set ColumnsWidth, for example .ColumnsWidth("300px") as the parent containers have some bootstrap classes that might interfere.

Give this a try and let us know how you get on.

Regards,
Alex Hajigeorgieva
Progress Telerik