Hi,

I am trying to use Kendo Line Chart for my application and I want to know how i can add Lines dynamically I am using ASP.NET MVC (Razor).

So far this is what I have

@(Html.Kendo().Chart(Model.colorCart)
.Name("chart")
.Title("15°")

.Legend(legend => legend
.Position(ChartLegendPosition.Left)

)
.ChartArea(chartArea => chartArea
.Background("transparent")
)

.Series(
series =>
{
series.Line(l => l.Std_values).Name("Std"); //To be added dynamically 
series.Line(l => l.Start_values).Name("Start"); //To be added dynamically 
series.Line(l => l.Pred_values).Name("Pred"); //To be added dynamically 
series.Line(l => l.End_values).Name("End"); //To be added dynamically 
series.Line(l => l.Select_values).Name("Select"); //To be added dynamically 
}
)

Hi!

I just upgraded to the latest version of Kendo UI and now my charts wont render any more when I resize my mobile browser window.

In short, this is what I do:

I have two list views. The first one shows avaiable charts to display. The second one show the actual chart.
When a user clicks on a item in the first listview, I create the chart in the click event.
I then do a app.navigate("#chartView");
(In my test, the chart is bound to a static Array of data.)

The chart is displayed correctly, but then the user tilts his/her screen, the chart is redrawn but now no series or data is displayed in the chart. Only the axis is shown.

My resize function:
$(window).resize(function() {    // for any chart or gauge widget
    $("#chart").data("kendoChart").redraw();
});

This all worked before the update, what has changed?

Regards
Per

Hi,
       I am using kendo chart with ajax binding.
       I need to prevent the ajax call (read) when chart initialization.
       Ajax call should occured only when firing from a button.
       Is it possible to set the Autobind property for chart?

      @(Html.Kendo().Chart<foo>()
                .Name("foo")
                       
        .Legend(legend => legend.Position(Kendo.Mvc.UI.ChartLegendPosition.Right))
        .Title("foo| ")
        
        .SeriesDefaults(seriesDefaults =>
            seriesDefaults.Column().Stack(true)
        )
        .DataSource(dataSource => dataSource
          .Read(read => read.Action("foo", "foo").Data("foo")




          )
                   .Group(group => group.Add(model => model.id))
                   .Sort(sort => sort.Add(s => s.id))
         )


       .Series(series =>
        {




            series.Column(x => x.ExecutionTime).Name(string.Empty);


        })




        .CategoryAxis(axis => axis
                    .Categories(m => m.DayFormat)








        )
        .ValueAxis(axis => axis
            .Numeric().MajorUnit(10).Title("Minutes")
        )


                  .Events(events => events.SeriesHover("onSeriesHover").SeriesClick("onSeriesClick").AxisLabelClick("onAxisLabelClick"))
                    
        )
    

I have a simple view with an AutoComplete, a MultiSelect, and an IntegerTextBox side-by-side with no other styling.

The AutoComplete and IntegerTextBox are the same width as each other and have the same font for the placeholder. The MultiSelect is radically different - it fills the width of the page and its placeholder has Arial font, which differs from the other two.

What's going on?

The web page, http://docs.kendoui.com/api/wrappers/aspnet-mvc/Kendo.Mvc.UI.Fluent/GridBuilder, shows an example of ClientAltRowTemplate.  Is this out of date?  When I try it, I get CS1061: Kendo.Mvc.UI.Fluent.GridBuilder<System.Data.DataRowView>' does not contain a definition for ClientAltRowTemplate'.  I am trying to set up alternate rows in a Kendo Grid using Razor syntax.

I have a kendo combobox with an OnSelect method defined on the page, but would like to move it to the jQuery ready function. How do I do that?
Right now, the code looks like this:
I want to place it within : The ready function is in an external JavaScript file that gets loaded at the bottom of the page.

Hi,

Could you please anyone advise me how can i bind model class data annotation attributes using Kendo MVVM?

I have defined the Employee model class as below,

  public class EmployeeModel
    {
        public int EmployeeId { get; set; }

        [Display(Name = "Employee Name")]
        [DataType(DataType.Text)]
        [Required(ErrorMessage = "The employee name should not be empty")]
        [StringLength(50, ErrorMessage = "The employee name should be less than 50 characters length")]
        public string Name { get; set; }

        public bool IsActive { get; set; }
    }

and i have bound this model class into view page using observable object binding. I can use HTML5 attributes for validation and validate using the below Kendo validator code, EmployeeDetails - observable object.

                               <input type="hidden" id="employeeId" data-bind="value : EmployeeDetails.EmployeeId"/>
                                Name<br />
                                <input data-bind="value: EmployeeDetails.Name" type="text" id="Name" name="Name" class="k-textbox" 
                                    placeholder="Employee name" required validationMessage="Please enter employee {0}" />
                                <div></div>
                                <span class="k-invalid-msg" data-for="Name"></span>
                             
                                <input type="checkbox" data-bind="checked: EmployeeDetails.IsActive" id="Status" />


           var validator = $("#EmployeeDetailsView").kendoValidator().data("kendoValidator");

                if (!validator.validate()) {
                    $("#Name").focus();
                    return false;
                }

Now, how can i achieve the same validation by binding the  model attributes directly to input fields with HTML5 validation attributes mentioned as above?
At the same time i have to use observable object binding for elements.

Cheers,
Mahesh

Hi,

While using Kendo UI Upload control in IE9 the UI is little bit distorted when status message is displayed. But, it's fine in IE10, FF & Chrome. After observing in IE developer tool, I found the following difference in the rendered HTML. Please refer the attached image -

IE10 the status-message is wrapped inside a div with class k-dropzone. But, in IE9 there is no wrapper for that. What could be the solution for this?
Stackoverflow Link - http://stackoverflow.com/questions/18699119/kendoui-upload-status-message-issue-in-ie9

Thanks

Hello,

I'm using Kendo UI ver. Q1 2013 and jQuery 1.9.1.
I have some difficulties to show the graph in area chart when I use grouped data. The problem is that, it doesn't paint the graph in Chrome. The graph is painted in Firefox but it is completely wrong and when I move my mouse over legends, Firebug tells "TypeError: u is null". I've reproduce the code on http://jsfiddle.net/saes/7EWRU/1/ so you can see the graph is not painted (in Chrome).

Something that is strange for me is that when I use Kendo UI ver. Q2 2013 (not Q1) as library in jsfiddle, it shows the graph but it's completely wrong (exactly the same like I use Firefox in my dev. environment). You can see it on http://jsfiddle.net/saes/XvRfn/14/
If you click on legends and choose one of them, you can see the grouped data is wrong. 

I wonder what's wrong in my code?

Thank you in advance,
Sam


Code:

var chartData = [{"PathCategory":"Angel","ScanTime":"/Date(1377295627880)/","Usage":309296486838},{"PathCategory":"Development","ScanTime":"/Date(1377295627880)/","Usage":473316311218},{"PathCategory":"Angel","ScanTime":"/Date(1377374709233)/","Usage":309296486838},{"PathCategory":"Development","ScanTime":"/Date(1377374709233)/","Usage":473316307895},{"PathCategory":"Angel","ScanTime":"/Date(1377806709363)/","Usage":315658122119},{"PathCategory":"Development","ScanTime":"/Date(1377806709363)/","Usage":473148678025},{"PathCategory":"Angel","ScanTime":"/Date(1377893108347)/","Usage":316018638606},{"PathCategory":"Development","ScanTime":"/Date(1377893108347)/","Usage":473653756198},{"PathCategory":"Angel","ScanTime":"/Date(1377979510767)/","Usage":316018638606},{"PathCategory":"Development","ScanTime":"/Date(1377979510767)/","Usage":473653763520},{"PathCategory":"Angel","ScanTime":"/Date(1378065909570)/","Usage":316018638606},{"PathCategory":"Development","ScanTime":"/Date(1378065909570)/","Usage":473653764026},{"PathCategory":"Angel","ScanTime":"/Date(1378152311203)/","Usage":316113243171},{"PathCategory":"Development","ScanTime":"/Date(1378152311203)/","Usage":473653764026},{"PathCategory":"Angel","ScanTime":"/Date(1378238716937)/","Usage":316876500733},{"PathCategory":"Development","ScanTime":"/Date(1378238716937)/","Usage":473685197791},{"PathCategory":"Angel","ScanTime":"/Date(1378325112323)/","Usage":318792603246},{"PathCategory":"Development","ScanTime":"/Date(1378325112323)/","Usage":473685191889},{"PathCategory":"Angel","ScanTime":"/Date(1378411511853)/","Usage":318802654704},{"PathCategory":"Development","ScanTime":"/Date(1378411511853)/","Usage":474014244961}];

$("#dataGrowthOverviewPerCategoryChart").kendoChart({
            theme: $(document).data("kendoSkin") || "metro",
            dataSource: {
                group: {
                    field: "PathCategory"
                },
                data: chartData,
                schema: {
                    model: {
                        fields: {
                            ScanTime: {
                                type: "date"
                            }
                        }
                    }
                }
            },
            series: [
                {
                    type: "area",
                    field: "Usage",
                    missingValues: "interpolate"
                }
            ],
            legend: {
                position: "bottom"
            },
            categoryAxis: {
                field: "ScanTime",
                baseUnitStep: "auto",
                labels: {
                    format: "MM/dd"
                },
            },
            tooltip: {
                visible: true,
                template: "#= series.name #: #= value #"
            },
            chartArea: {
                height: 250,
                background: "transparent"
            }
        });

Hi,

Using the http://demos.kendoui.com/dataviz/api/selection.html code as example, when i add tooltip function, the chart was unable to show the tooltip.
But if i disable the selection api, the tooltip work.
How to make tooltip work together with selection api?

Thanks.

Regards,
Tan