chart and grid not working on the same page

10 posts, 0 answers
  1. Nick
    Nick avatar
    2 posts
    Member since:
    Feb 2013

    Posted 17 Feb 2013 Link to this post

    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.




  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 19 Feb 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Nick
    Nick avatar
    2 posts
    Member since:
    Feb 2013

    Posted 19 Feb 2013 Link to this post

    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 

  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 19 Feb 2013 Link to this post

    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!
  6. Siggi og Garðar
    Siggi og Garðar avatar
    8 posts
    Member since:
    Dec 2012

    Posted 30 Oct 2013 Link to this post

    I´m also fighting this same problem.  Has the developer team fixed this issue?
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 30 Oct 2013 Link to this post

    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!
  8. Siggi og Garðar
    Siggi og Garðar avatar
    8 posts
    Member since:
    Dec 2012

    Posted 30 Oct 2013 Link to this post

    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?
  9. Siggi og Garðar
    Siggi og Garðar avatar
    8 posts
    Member since:
    Dec 2012

    Posted 30 Oct 2013 Link to this post

    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  :)
  10. Nihad
    Nihad avatar
    1 posts
    Member since:
    Nov 2013

    Posted 15 Nov 2013 Link to this post

    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. 
  11. Siggi og Garðar
    Siggi og Garðar avatar
    8 posts
    Member since:
    Dec 2012

    Posted 18 Nov 2013 Link to this post

    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready