Hey Guys,

First, I want to say you guys did a great Job on Kendo UI, we are planing to upgrade from MVC extension to Kendo.
My issue is on the grouped line chart the legend is taking the default sort of the group data and showing as the attached image.
Is there a way to control the order on the legend?

<%= Html.Kendo().Chart<TestOrders>()
        .Name("Hl7Line")
        .Title("Number of NEW ORDERS PER HOUR BY MONTH  -  RUNNING TOTAL")
        .ChartArea(chartArea => chartArea.Background("transparent"))
        .Legend(legend => legend.Position(Kendo.Mvc.UI.ChartLegendPosition.Right))
        .DataSource(ds => ds
            .Read(read => read.Action("AJaxOrdersPerHourByMonth", "Dashboard"))
            .Group(group => group.Add(m => m.MonthName))
            .Sort(sort => sort.Add(m => m.Hour).Ascending())
        )
        .Series(series => series
            .Line(model => model.NumberOfOrders)
            .GroupNameTemplate("#= group.value #")
        )
        .CategoryAxis(axis => axis
            .Categories("12AM", "1AM", "2AM", "3AM", "4AM", "5AM", "6AM", "7AM", "8AM", "9AM", "10AM", "11AM", "12PM", "1PM", "2PM", "3PM", "4PM", "5PM", "6PM", "7PM", "8PM", "9PM", "10PM", "11PM")
            .Title("Hours of Day")
        )
        .ValueAxis(axis => axis
            .Numeric().Labels(labels => labels.Format("{0}"))
            .Title("Number of Orders")
        )
        .Tooltip(t => t.Visible(true).Format("{0}").Template("#=series.name# (#= value#)"))
        .Transitions(true)
    %>

Hi, I have a following scenario:

- for each day in month, I need calendar to indicate if a task is done or not done for that day
- I could use icons as a markers like in 'Customizing Templates' example, but calendar might look too cluttered
- I'd prefer to set date cell background color to green or red to indicate if task is done or not.

I did check the documentation, but couldn't find any direct way to do it. The template for dates in month view looks promising, but I don't have enough knowledge of that. So, could you help me with this problem? Is there a feasible way to change date cell background color, or should I use some alternative way?

I have a Kendo Chart defined on my cshtml page as below:

@(Html.Kendo().Chart<MyModel>()
        .Name("chart")
        .Title("")
        .Legend(legend => legend
            .Visible(false)
        )
        .Series(series =>
         {
                    series.Scatter(model => model.X, model => model.Y);
                    series.Scatter(model => model.X, model => model.Y);
        })
        )
        
I need to set the data of each of these series using a JQuery call. 


 function GetChartData(ex,ten) {
            var str = "{'arg': '" + ex + "', 'arg2': '" + ten ' }";
            $.ajax({
                type: 'POST',
                url: '/Controller/CreateChartData',
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: str ,
                success: function (data) {
                
                    var grid = $("#chart").data("kendoChart");
                    grid.dataSource.data(data.ChartData);
                    grid.refresh();
                    
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    alert(thrownError);
                }
            });

The above will set the 1st series data, but I need to be able to set the second series as well. I have all of the data returning correctly from the database, but no way of setting both series data.

I have tried the following which rendered nothing on the chart:

 function GetChartData(ex,ten) {
            var str = "{'arg': '" + ex + "', 'arg2': '" + ten ' }";
            $.ajax({
                type: 'POST',
                url: '/Controller/CreateChartData',
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: str ,
                success: function (data) {
                
                    var grid = $("#chart").data("kendoChart");
    grid.options.series[0].data = data.ChartData;
     grid.options.series[1].data = data.ChartDataSeries2; 

                    grid.refresh();
                    
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    alert(thrownError);
                }
            });

 
                  

I do not know if this is possible, or if this can be added to a new version of the DataViz toolkit.

I would like to be able to add an image, or icon inside a Bubble Chart so you know exactly what it is with just looking at it

Thanks

How to add 'Menu' next to title of 'Window' Component or on hover of custiom icon how to populate a menu with 4 items

Thanks,
Chetan

The following code is dataSource for validating values via a controller method:

            SampleDataSource: new kendo.data.DataSource({
                transport: {
                    read: {
                        url:  "Sample/ValidateSampleCodes",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        type: "POST"
                    },
                    parameterMap: function (options, operation) {
                        return JSON.stringify({ SampleCode: options.SampleCode });
                    },
                },
                schema: {
                    model: {
                        id: "Id"
                    },
                    parse: function (data) {
                        viewModel.set("SampleCodesFromDB",data[0]);
                        return data;
                    }
                }
            }),

The following code is the grid in which i need to validate values entered, instantly and display an in-line validation message. I am using the custom validator as shown below...

                $("#Sample-code-grid").kendoGrid({
                    dataSource: { 
                        data: viewModel.SampleCodes,
                        schema: {
                            model: {
                                id:"Id",
                                fields : {
                                    SampleCode : { editable: true, validation: { custom: function (input) {
                                            var isValid = true;
                                            if (input.attr("name") == "SampleCode") {
                                                
                                                // Reading the below datasource to check if value already exists in DB
                                                
                                                viewModel.SampleDataSource.read({ SampleCode: input.val() });


                                                // When debugging, i find that the above read method call is skipped until 
                                                // custom validator function is fully executed...


                                                var isValidMessage = viewModel.get("SampleCodesFromDB");
                                                if(isValidMessage == "Code Exists")
                                                    isValid = false;
                                                if(!isValid)
                                                    input.attr("data-custom-msg", "Sample Code already added.");
                                            }
                                            return isValid;
                                        }
                                        }
                                    }
                                }
                            }
                        },
                        change: function(e) {
                            if(e.action == "itemchange" || "remove") {debugger;
                                viewModel.SampleCodes = [];
                                $.each(e.sender.data(), function(inx, val) {
                                    viewModel.SampleCodes.push({ SampleCode : val.SampleCode });
                                });
                            }
                        }
                    },
                    selectable: true,
                    editable: "inline",
                    toolbar: [{ name: "create" , text : "Add Sample Code" }],
                    columns: [
                        { field: "SampleCode", title: "Sample Codes" },
                        { command: ["edit", "destroy"], title: "&nbsp;", width: "210px" }
                    ]
                });

I have added some comments inside the code so that you get some idea about my problem. I just need to know how to approach validation for duplicates using the custom validator that calls a dataSource for the same purpose.

Any help will be greatly appreciated.

I have a grid whose datasource has a filter set on a foreign key. It's a remote datasource to a SharePoint 2010 list odata service. The create command in the grid's toolbar does not do anything. As soon as I remove the filter from the datasource, the create command works again. How can I get the create command to work with the filter set? I assume I need to find a way to set the foreign key on the newly created object to the same value as the filter and only then will the new object show up in the grid.

I can find plot bands, but I cannot find how to plot lines.

I can also add a plotband to the valueAxis like this:  However this requires me to add a from and a to. This doesn't exist. i just want a simple line plotted at a particular value.

Can anyone help? I have a link to Highcharts where they show an example of how they do it (addPlotLine): http://www.highcharts.com/studies/dynamic.htm 

Hi,

We have a web user control with an input and a HTML select:


The options will be added by JavaScript (text and value).
The binding with kendo.observable and kendo.bind in JavaScript:


The user has to fill the input box and select an entry. In the submit method, we will get the view model:


And here is the problem. By default the first entry of the select is selected. If the user does not select another option of the select, the “TenantId” of the viewModel will be null. If the user selects another option of the select, the “TenantId” will be set in the viewModel perfectly.
Our actual work around:


Almost the same problem appears with an input box. In another web user control, the user only has to type a name in input box. By typing enter the submit method will be called. In this case the cursor does not leave the input box and the same problem appears.

Is it a general problem? Can someone help?

Thanks.

my command don't run 
.Create(c=>c.Action("CreateNewEmployee", "HRM")) 
.Update(update => update.Action("Employee_Update", "HRM"))
        .Destroy(update => update.Action("Employee_Destroy", "HRM")) 
in controller but can run
.Read(read => read.Action("Employee_Read", "HRM")) 

@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.EmpID).Visible(false);
        columns.Bound(p => p.Role);
        columns.Bound(p => p.Branch);
        columns.Bound(p => p.Name);
        columns.Bound(p => p.Address);
        columns.Bound(p => p.Username);
        columns.Bound(p => p.Status);
        columns.Command(c =>
        {
            c.Edit();
            c.Destroy();
        }).Width(250);
    })
    .Editable(editable =>
    {
        editable.Mode(GridEditMode.PopUp);
        editable.TemplateName("EmployeeEditor");
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .ToolBar(toolbar =>
    {
        toolbar.Create();
        })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10)
        .Events(events => events.Error("error_handler"))
        .Model(model => model.Id(p => p.EmpID))
        .Create(c=>c.Action("CreateNewEmployee", "HRM"))
        .Read(read => read.Action("Employee_Read", "HRM"))
        .Update(update => update.Action("Employee_Update", "HRM"))
        .Destroy(update => update.Action("Employee_Destroy", "HRM"))
    )
    .HtmlAttributes(new { style = "height:550px" })
)