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

chart and grid not working on the same page

9 Answers 345 Views

Chart

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

Nick asked on 17 Feb 2013, 07:07 PM

Hello.
I am currently evaluating kendo charts and web controls in asp.net mvc.
I need to add a chart and grid on the same page but i am getting a javascript error :
''Error: Invalid negative value for <svg> attribute height="-0.6666667461395264px"" After a few hours of debugging i found that if i comment out the css reference line :
<link type="text/css" href="@Url.Content("~/Content/kendo/kendo.common.min.css")" rel="stylesheet" />
then the chart is rendered correcty but the grid styles are messed up.

@using Kendo.Mvc.UI

@using System.Data

@{

var datalist = new DataTable();

datalist.Columns.Add(new DataColumn() {ColumnName = "col1", DataType = typeof (string)});

datalist.Columns.Add(new DataColumn() { ColumnName = "col2", DataType = typeof(string) });

datalist.Rows.Add(new object[] {"dsd", "dcf"});

}

<link type="text/css" href="@Url.Content("~/Content/kendo/kendo.common.min.css")" rel="stylesheet" />

<link type="text/css" href="@Url.Content("~/Content/kendo/kendo.default.min.css")" rel="stylesheet" />

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")"></script>

<script type="text/javascript" src="@Url.Content("~/Scripts/kendo/kendo.all.min.js")"></script>

<script type="text/javascript" src="@Url.Content("~/Scripts/kendo/kendo.aspnetmvc.min.js")"></script>

@(Html.Kendo().Grid(datalist)

.Name("datagrid123")

.Columns(columns =>

{

//add grid columns

columns.Bound("col1").Width(100).Title("col1").Visible(true).HtmlAttributes(new { @class = "dsss" });

columns.Bound("col2").Width(100).Title("col2").Visible(true).HtmlAttributes(new { @class = "dsss" });

})

.Scrollable(scr => scr.Enabled(true))

.Sortable(builder => builder.Enabled(true))

.Resizable(resizing => resizing.Columns(true))

.Selectable()

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

))

@(Html.Kendo().Chart()

.Name("chart")

.Title("Internet Users")

.Legend(legend => legend

.Position(ChartLegendPosition.Bottom)

)

.Series(series => {

series.Column(new double[] { 15.7, 16.7, 20, 23.5, 26.6 }).Name("World");

series.Column(new double[] { 67.96, 68.93, 75, 74, 78 }).Name("United States");

})

.CategoryAxis(axis => axis

.Categories("2005", "2006", "2007", "2008", "2009")

)

.ValueAxis(axis => axis

.Numeric().Labels(labels => labels.Format("{0}%"))

)

.Tooltip(tooltip => tooltip

.Visible(true)

.Format("{0}%")

)

Is this a bug or am i doing something wrong?
Nick.
Oh,Great toolkit i would like to add.

9 Answers, 1 is accepted

answered on 15 Nov 2013, 02:57 PM

Hello, i have almost same problem with Grid in my project. When i try to use Grid, i think i should add
"@Scripts.Render("~/bundles/jquery")"
to be able to have paging and other button events. But this line of code in my _Layout.cshtml doesn,t let me use Chart or TreeView. When i delete this line, i can see Grid and Chart in my page but Paging or Sorting doesn't work at all. Sould i write this code somewhere else?
Thanks.
P.S: I tried to use different layouts, sections for Grid and Chart but it still doesn't.