chart and grid not working on the same page

[Nick]

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.

[Iliana Dyankova]

Hi Nick,

The provided code looks correct. It seems for some reason the Chart is not able to calculate correctly its size. Could you please try to specify explicit height for the Chart via the HtmlAttributes() method?

@(Html.Kendo().Chart()
   //....
   .HtmlAttributes(new { style = "height: 600px;" })
)

Kind regards,
Iliana Nikolova
the Telerik team

[Nick]

Hello Iliana, 
Thanks for your reply.
Yes, setting the height explicitly does fix the problem. 
But I think this should be reported as a fix or bug for a next version,
for consistency with all other kendo controls, or make it clear in documentation
that height is necessary.
Thanks again  for your support and a great toolkit.   
Nick 

[Iliana Dyankova]

Hi Nick,

It seems there is a bug in the current version of Kendo UI Chart for ASP.NET MVC. I forwarded the problem to the developers for further investigation - we will do our best to provide a fix as soon as possible. Please accept my apologies for the inconvenience caused.

Regards,
Iliana Nikolova
the Telerik team

[Garðar]

I´m also fighting this same problem.  Has the developer team fixed this issue?

[Iliana Dyankova]

Hello Sigurður,

This is a pretty old thread and the discussed issue is already addresses. Please test your application using the latest official version of Kendo UI (v2013.2.918) and let me know if you still observe any problems.

Regards,
Iliana Nikolova
Telerik

[Garðar]

Sorry for using this old thread.

Yes I can verify that I am in fact using the version you stated.  I´m not grabbing any errors within firebug console nor am I detecting any events from my grid (when selecting row).  My grid however works fine when chart is not present within the page.

Does grid and chart have any conflicting issues when used on the same page?

[Garðar]

Hi again.

I found out why this was not working and it had nothing to do with the grid, it had to do with the layout of the page and the fact that the grid was floating to the left on the page.  The events were never grabbed because of the chart floating to the right of the grid blocking all interaction with the grid.

Sorry for jumping to conclusions  :)

[Nihad]

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. 

[Garðar]

Hi Nihad.
I´m wondering if you are also including jQuery within your bundle along with the jQuery within the Kendo package?  You should just include one of them (the one within the Kendo package preffarably).  But if that is not the case I´m sorry I couldn´t help you  :)
Regards
Garðar