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

chart and grid not working on the same page

9 Answers 117 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Nick
Top achievements
Rank 1
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

Sort by
0
Iliana Nikolova
Telerik team
answered on 19 Feb 2013, 12:14 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Nick
Top achievements
Rank 1
answered on 19 Feb 2013, 03:52 PM
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 

0
Iliana Nikolova
Telerik team
answered on 19 Feb 2013, 04:18 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Garðar
Top achievements
Rank 2
answered on 30 Oct 2013, 03:21 PM
I´m also fighting this same problem.  Has the developer team fixed this issue?
0
Iliana Nikolova
Telerik team
answered on 30 Oct 2013, 03:38 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Garðar
Top achievements
Rank 2
answered on 30 Oct 2013, 03:41 PM
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?
0
Garðar
Top achievements
Rank 2
answered on 30 Oct 2013, 03:51 PM
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  :)
0
Nihad
Top achievements
Rank 1
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. 
0
Garðar
Top achievements
Rank 2
answered on 18 Nov 2013, 08:58 AM
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
Tags
Chart
Asked by
Nick
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Nick
Top achievements
Rank 1
Garðar
Top achievements
Rank 2
Nihad
Top achievements
Rank 1
Share this question
or