I could not render multiple axis for stock chart. Is it possible to have multiple value axis in Stock Chart?
Please help me in this regard.

Thanks,
Prabhakar Manne

I've seen this approach:

var formId = this.select().closest("tr").find("td:eq(1)").text()

The problem is that's taking a value from the grid that I assume is included in the columns collection.  How do I set a datakey that's not visible in the grid and retrieve it?  Is there a simple way to do that or am I just being obtuse?

I have a KendoChart that is set up as a line which displays gaps for missing values.  I receive the following error when I try to pass in data with null values:

SCRIPT5007: Unable to get value of the property 'value': object is null or undefined
kendo.all.js, line 72292 character 21

value = defined(item.value) && defined(item.value[field]) ? item.value[field] : item.fields[field];

My chart settings: 
$("#chart").kendoChart({
        title: {
            font: "20px sans-serif",
            weight: "bold",
            color: "#1a4a65",
            text: "Index Price Data"
        },
        legend: {
            font: "10px sans-serif",
            weight: "bold",
            color: "#1a4a65",
            position: "top"
        },
        categoryAxis: {
            type: "date",
            //baseUnits:"months",
            //field:"contractMonth",
            labels: {
                 font: "10px sans-serif",
                rotation: -90,
                dateFormats: {
                    days: "M/d/yyyy",
                    months: "M/d/yyyy"
                },
            },
            title: {
                font: "14px sans-serif",
                color: "#1a4a65",
                //text:"Contract Month",
            }
        },
        valueAxis: {
            labels: {
                font: "10px sans-serif",
                format: "{0:c}",
            },
            majorUnit: .2,
            title: {
                font: "14px sans-serif",
                color: "#1a4a65",
                text: "$/BBL",
            },
        },
        tooltip: {
            visible: true,
            radius: "5px",
            background: "#1a4a65",
            color: "#ffffff",
            font: "14px sans-serif",
            format: "{0:c}"
        },
        transitions: false,
        seriesDefaults: {
            type: "line",
            missingValues: "gap"
        },
    });

My series settings are set dynamically:
var chart = $("#chart").data("kendoChart");
var chartOptions = chart.options;
var categoryDates = [];
chartOptions.categoryAxis.title.text = "Price Date";
chartOptions.categoryAxis.baseUnits = "days";
chartOptions.categoryAxis.field = "priceDate";
var seriesPrices = new kendo.data.ObservableArray([]);
chartOptions.series.push([]);
chartOptions.series[0].data = seriesPrices;
chartOptions.series[0].type = "line";
chartOptions.series[0].missingValues = "gap";
chartOptions.series[0].color = "#1a4a65";
chartOptions.series[0].field = "price";
chartOptions.series[0].name = self.get('selectedIndexName');
chartOptions.categoryAxis.categories = categoryDates;
chart.redraw();

categoryDates : [
Sat Aug 10 00:00:00 CDT 2013,
Sun Aug 11 00:00:00 CDT 2013,
Mon Aug 12 00:00:00 CDT 2013,
Tue Aug 13 00:00:00 CDT 2013,
Wed Aug 14 00:00:00 CDT 2013,
Thu Aug 15 00:00:00 CDT 2013,
Fri Aug 16 00:00:00 CDT 2013,
Sat Aug 17 00:00:00 CDT 2013,
Sun Aug 18 00:00:00 CDT 2013,
Mon Aug 19 00:00:00 CDT 2013,
Tue Aug 20 00:00:00 CDT 2013,
Wed Aug 21 00:00:00 CDT 2013,
Thu Aug 22 00:00:00 CDT 2013,
Fri Aug 23 00:00:00 CDT 2013,
Sat Aug 24 00:00:00 CDT 2013,
Sun Aug 25 00:00:00 CDT 2013,
Mon Aug 26 00:00:00 CDT 2013,
Tue Aug 27 00:00:00 CDT 2013,
Wed Aug 28 00:00:00 CDT 2013,
Thu Aug 29 00:00:00 CDT 2013,
Fri Aug 30 00:00:00 CDT 2013,
Sat Aug 31 00:00:00 CDT 2013
]

seriesPrices: {
price: 3.1, priceDate: Sat Aug 10 00:00:00 CDT 2013,
price: 3.2, priceDate: Sun Aug 11 00:00:00 CDT 2013,
price: 3.3, priceDate: Mon Aug 12 00:00:00 CDT 2013,
price: null, priceDate: Tue Aug 13 00:00:00 CDT 2013,
price: null, priceDate: Wed Aug 14 00:00:00 CDT 2013,
price: null, priceDate: Thu Aug 15 00:00:00 CDT 2013,
price: null, priceDate: Fri Aug 16 00:00:00 CDT 2013,
price: null, priceDate: Sat Aug 17 00:00:00 CDT 2013,
price: null, priceDate: Sun Aug 18 00:00:00 CDT 2013,
price: null, priceDate: Mon Aug 19 00:00:00 CDT 2013,
price: null, priceDate: Tue Aug 20 00:00:00 CDT 2013,
price: null, priceDate: Wed Aug 21 00:00:00 CDT 2013,
price: null, priceDate: Thu Aug 22 00:00:00 CDT 2013,
price: null, priceDate: Fri Aug 23 00:00:00 CDT 2013,
price: null, priceDate: Sat Aug 24 00:00:00 CDT 2013,
price: null, priceDate: Sun Aug 25 00:00:00 CDT 2013,
price: 4.1, priceDate: Mon Aug 26 00:00:00 CDT 2013,    //non-null price
price: null, priceDate: Tue Aug 27 00:00:00 CDT 2013,
price: null, priceDate: Wed Aug 28 00:00:00 CDT 2013,
price: null, priceDate: Thu Aug 29 00:00:00 CDT 2013,
price: null, priceDate: Fri Aug 30 00:00:00 CDT 2013,
price: null, priceDate: Sat Aug 31 00:00:00 CDT 2013
}


The chart displays correctly if I pass in the following data.  However, the chart does not display the empty dates after the last non-null point (8/27-8/31)
categoryDates : [
Sat Aug 10 00:00:00 CDT 2013, 
Sun Aug 11 00:00:00 CDT 2013,
Mon Aug 12 00:00:00 CDT 2013,
Tue Aug 26 00:00:00 CDT 2013
]

seriesPrices: {
price: 3.1, priceDate: Sat Aug 10 00:00:00 CDT 2013, 
price: 3.2, priceDate: Sun Aug 11 00:00:00 CDT 2013,
price: 3.3, priceDate: Mon Aug 12 00:00:00 CDT 2013,
price: 4.1, priceDate: Tue Aug 2600:00:00 CDT 2013
}

If I pass in the following data, the chart displays the entire range of dates (8/10 - 8/31), but the point for 8/26 is displayed on 8/13 and it connected to the previous points:
categoryDates : [
Sat Aug 10 00:00:00 CDT 2013, 
Sun Aug 11 00:00:00 CDT 2013,
Mon Aug 12 00:00:00 CDT 2013,
Tue Aug 13 00:00:00 CDT 2013,
Wed Aug 14 00:00:00 CDT 2013,
Thu Aug 15 00:00:00 CDT 2013, 
Fri Aug 16 00:00:00 CDT 2013,
Sat Aug 17 00:00:00 CDT 2013,
Sun Aug 18 00:00:00 CDT 2013,
Mon Aug 19 00:00:00 CDT 2013,
Tue Aug 20 00:00:00 CDT 2013, 
Wed Aug 21 00:00:00 CDT 2013,
Thu Aug 22 00:00:00 CDT 2013,
Fri Aug 23 00:00:00 CDT 2013,
Sat Aug 24 00:00:00 CDT 2013,
Sun Aug 25 00:00:00 CDT 2013, 
Mon Aug 26 00:00:00 CDT 2013,
Tue Aug 27 00:00:00 CDT 2013,
Wed Aug 28 00:00:00 CDT 2013,
Thu Aug 29 00:00:00 CDT 2013,
Fri Aug 30 00:00:00 CDT 2013, 
Sat Aug 31 00:00:00 CDT 2013
]

seriesPrices: {
price: 3.1, priceDate: Sat Aug 10 00:00:00 CDT 2013, 
price: 3.2, priceDate: Sun Aug 11 00:00:00 CDT 2013,
price: 3.3, priceDate: Mon Aug 12 00:00:00 CDT 2013,
price: 4.1, priceDate: Tue Aug 2600:00:00 CDT 2013
}

Please advise on how I can set up the chart to correctly display my data (all dates shown on chart, even if there is null price data for that date). 

Thank you!

I am working to get KendoUI, Typescript, and RequireJS to work together.  I have a version that is working but I would like advice on improving it.

Attached is my simple example in a Visual Studio 2013 RC project.  (UpdatedKendoUITypeScriptRequireJS.zip)

I have searched the web exhaustively but have not found anyone that has an example of the combination of KendoUI, Typescript, and RequireJS, but I may have missed it. :-).  

What I did to make it work was create a file called kendo.custom.d.ts.  In this file I put the following declarations for the two KendoUI widgets that I am using in my simple example: 
I also included the kendo.all.d.ts file.

In my JavaScript I configured RequireJS like the following:
In the TypeScript file, index.ts I brought in the dependencies like the following:

You can see I import the kendoMenuScript and kendoAutoCompleteScript with a require of the path of the actual Kendo file that contains the JavaScript for the widget.  In the TypeScript file I make add a call to kendoMenuScript and kendoAutoCompleteScript so that TypeScript will add them to the "require" that it will generate, so that the actual Kendo JavaScript files will be pulled in.

Is there a better way to do this?

I have a datagrid of numbers that I format as a number, but if the number if 0 or null, I want don't want anything displayed.

How do I do this with KendoUI?

Also is there an easier way to make all numbers align to the right rather than injecting a style for the column?

Here is the grid that I am using:

@(Html.Kendo().Grid<KendoWithChart.Models.Report_Result>()
            .Name("grid")
            .BindTo((IEnumerable<KendoWithChart.Models.Report_Result>)ViewBag.SomeData)
      
            .Columns(columns =>
            {
                columns.Bound(p => p.DESCRIPTION).Title("Description").ClientTemplate("# if( DESCRIPTION == 'Total IP') { # <strong>#: DESCRIPTION#</strong> # } else if( DESCRIPTION == 'Target Blended Liability') { # <strong>#: DESCRIPTION #</strong> # } else { # #: DESCRIPTION # # } #");
                columns.Bound(p => p.DV01).Format("{0:n}").HtmlAttributes(new { style = "text-align:right" });
            })
      
            
            .Sortable() // Enable sorting
            .DataSource(dataSource => dataSource.Ajax()
                .Group(group => group.Add(p => p.Type))
                .ServerOperation(false)
                
            )
        )

Hi!

I am using "Group Field" and my bubbles size not respect the values. The bubbles are all the same size.
http://jsbin.com/onabop/44/edit?html,css,output

I just want to change the height of the views
    views: [
            {
              type: "day",
                majorTick: 75, // a major tick represents 120 minutes (2 hours)
                minorTickCount: 3 // display one time slot per major tick
                cellHeight: 10 //Someting Like that
    
            },

Right now, the height is 20

Someting like eventHeight: 20 //for the month view but for the day view

Hello,

I can't ge the autocomplete control work in the mvc grid. I created a new Display and Editor template to bind my person object (login and name property). The display template contains a simple Html.DisplayFor control to output the name of the person. Works perfect.

The Editor template contains an autocomplete bound to a server side data source, which populates the autocomplete controls with persons from a data store. So far so good.
Now the problem: When I leave the cell edit mode (with the autocomplete editor shown), a javascript error is thrown in "kendo.web.js". The error pops up in the following line:

that._unbindDataSource();

The error Message:
"Microsoft JScript runtime error: Object doesn't support property or method '_unbindDataSource'".

Any ideas how to get the autocomplete control work together with the grid?

Starting with an Icenium project in Visual Studio I just wanted to add a timer to the location screen to refresh the map every 60 seconds. However no matter where I put the timer it only fires once it seems that due to how the JS code is laid out/implemented the timer is going out of scope and so is only firing once when it is initialised/

What would be the right way to implement a timer on this tab ?

Thanks

Greg

If I use the data from the web service, edit and save.. Everything works great. If I use the code below I get the following error:
Uncaught TypeError: Object #<Object> has no method 'call'
Full Error:
Uncaught TypeError: Object #<Object> has no method 'call'    kendo.all.js:5521
(anonymous function)   kendo.all.js:5521
jQuery.extend.Deferred   jquery-1.8.2.js:1182
Observable.extend._promise   kendo.all.js:5520
Observable.extend._send   kendo.all.js:5548
Observable.extend.sync   kendo.all.js:5384
Widget.extend.saveRow   kendo.all.js:16577
(anonymous function)   kendo.all.js:16399
jQuery.event.dispatch  jquery-1.8.2.js:3063
jQuery.event.add.elemData.handle.eventHandle   jquery-1.8.2.js:2681

following code:
    <script src="Scripts/KendoUI/jquery-1.8.2.js"></script>
    <script src="Scripts/KendoUI/kendo.all.js"></script>

$(document).ready(createkendo = function () {

var myData = [{"Id":1,"StudyName":"StudyName123","Subjid":"1","MatchId":"1","MatchSources":"1","ArgusCaseNum":"1","Field":"1","ArgusValue":"1","EdcValue":"1","ValuesMatch":"Y","Status":"1","DmComments":"comments, comments","PvComments":"333","DateCreated":"2013-09-26T06:57:07"},{"Id":2,"StudyName":"StudyName555","Subjid":"test","MatchId":"test","MatchSources":"test","ArgusCaseNum":"test","Field":"test","ArgusValue":"test","EdcValue":"test","ValuesMatch":"Y","Status":"test","DmComments":"asdfasdf","PvComments":"222","DateCreated":"0001-01-01T00:00:00"},{"Id":4,"StudyName":"asdfasdf","Subjid":"test","MatchId":"test","MatchSources":"test","ArgusCaseNum":"test","Field":"test","ArgusValue":"test","EdcValue":"test","ValuesMatch":"Y","Status":"test","DmComments":"asdf","PvComments":null,"DateCreated":"0001-01-01T00:00:00"}];
var crudServiceBaseUrl = "http://dev-webapp1.infinitypharm1.com/Argus.WebServices/api",
dataSource = new kendo.data.DataSource({
                            serverPaging: false,
                            serverFiltering: false,
                            serverSorting: false,
                            pageSize: 20,
                            schema: {
                                model: {
                                    id: "Id",
                                    fields: {
                                        StudyName: { type: "string" },
                                        DmComments: { type: "string" },
                                        PvComments: { type: "string" }
                                    }
                                }
                            },
                            batch: false,
                            transport: {
                                create: {
                                    url: crudServiceBaseUrl + "/argus",
                                    contentType: "application/json",
                                    type: "POST"
                                },
/*
                                read: {
                                    url: crudServiceBaseUrl + "/argus",
                                    contentType: "application/json",
                                    success: function(result) {
            options.success(result);
         }
                                },
                                */

read: function (options) {
options.success(localData); // where data is the local data array
},

update: {
                                    url: function (entity) {
                                        return crudServiceBaseUrl + "/argus/" + entity.Id;
                                    },
                                    contentType: "application/json",
                                    type: "PUT"
                                },
                                destroy: {
                                    url: function (entity) {
                                        return crudServiceBaseUrl + "/argus/" + entity.Id;
                                    },
                                    contentType: "application/json",
                                    type: "DELETE"
                                },
                                parameterMap: function (data, operation) {
                                    return JSON.stringify(data);
                                }
                            }
                        });

                    $("#grid").kendoGrid({
                        height: 600,
                        columns: [
                            { field: "StudyName", title: "Study Name" },
                            { field: "DmComments", title: "DM Comments" },
                            { field: "PvComments", title: "PV Comments" },
                            //{ command: "destroy", title: "Delete", width: "110px" }
                            { command: ["edit", "destroy"], title: "&nbsp;", width: "172px" }
                        ],
                        pageable: true,
                        sortable: true,
                        filterable: true,
                        editable: "inline", //true, // enable editing
                        //toolbar: ["create", "save", "cancel"], // specify toolbar commands
                        toolbar: ["create"],
dataSource: dataSource
                    });


});