New to Telerik UI for ASP.NET Core? Start a free 30-day trial
Window Configuration
By design, the Chart Wizard is displayed in a Window component.
To configure the Window settings like dimensions, position, resizing, and more, utilize the Window() configuration. The Window of the Chart Wizard has all the functionalities available in the stand-alone Window component.
The following example demonstrates how to customize the Window of the Chart Wizard. The Window opens when a button is clicked.
Razor
@(Html.Kendo().Button()
.Name("open-wizard")
.Icon("chart-column-clustered")
.Content("Open Chart Wizard")
.Events(ev=>ev.Click("onClick"))
)
<div class="container">
@(Html.Kendo().ChartWizard<Product>()
.Name("chartwizard")
.DataSource(dataSource => dataSource
.Read(read => read.Action("Read", "ChartWizard"))
)
.DataColumns(columns =>
{
columns.Add().Field(f => f.ProductName).Title("Product Name");
columns.Add().Field(f => f.Quantity);
})
.Window(window =>
{
window.Visible(false);
window.Modal(false);
window.Actions(actions => actions
.Minimize()
.Maximize()
.Close()
);
window.Resizable(resizable => resizable.Enabled(true));
window.Draggable(d => d.Containment(".container"));
window.Height(550);
window.Width(700);
})
)
</div>
<script>
function onClick() {
$("#chartwizard").data("kendoChartWizard").open();
}
<script>