Questions on Kendo UI for jQuery Forum

5 answers

382 views

Get returns undefined when using serverPaging

Hello,

I'm using the Datasource with serverPaging where the Datasource is used by a Grid with virtual scrolling.
This works perfect except for 1 problem I'm running into.

After a cancelchanges on the Datasource the grid jumps back showing the data of the 1st Page.
When I use Datasource.get(myID), where the Model with myID is on another Page the method returns undefined.

I noticed that internally the Datasource is using an array of ranges, where 1 range contains the models of 1 page, but I don't think a Datasource.get(myID) is using those ranges.

For now i'm using a descendant of the Datasource where I implemented a findByID to use the _ranges as well.

Data Source

answered on 01 Oct 2013

3 answers

180 views

combobox with drop-down tree

Hi all;
The screenshot here is from out Windows desktop app. Is it possible to do the same thing in Kendo?
The user needs to be able to type in the value for a comparison. They also need to be able to select from the tree. And the tree needs to populate nodes when they are expanded because the tree can have nodes that are circular (ie Salesperson -> Orders -> Order -> Salesperson).
How can I do this?
thanks - dave

ComboBox

answered on 01 Oct 2013

1 answer

56 views

Grouping in ie10 is messed up

The + button appears half way across the grid rather than indented on the left. This is due to an ie10 bug that they claim is not a bug, and have no plans to fix. More here:

https://connect.microsoft.com/IE/feedback/details/781009/ie-10-fails-to-render-tables-width-fixed-layout-correctly

Please let me know if you have plans to resolve this issue.

Thanks,
Mark Hynes

Grid

answered on 01 Oct 2013

1 answer

40 views

Is multiple value axis possible for Stock Chart?

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

General Discussions

answered on 30 Sep 2013

1 answer

151 views

Retrieving datakey through javascript

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?

Grid

answered on 30 Sep 2013

2 answers

348 views

Error with null data values in Kendo line chart

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!

Charts

answered on 30 Sep 2013

2 answers

232 views

Typescript + RequireJS

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:

declare module "k/kendo.autocomplete.min" {

export var load;

}

declare module "k/kendo.menu.min" {

export var load;

}

I also included the kendo.all.d.ts file.

In my JavaScript I configured RequireJS like the following:

<script type="text/javascript">

require.config({

paths: {

app: '/Scripts/app',

k: 'http://cdn.kendostatic.com/2013.2.716/js'

}

});

require(['app/index'],

function (i) {

new i.index();

});

</script>

In the TypeScript file, index.ts I brought in the dependencies like the following:

import kendoConstant = require('app/kendoConstant');

import kendoMenuScript = require('k/kendo.menu.min');

import kendoAutoCompleteScript = require("k/kendo.autocomplete.min");

export class index {

private _menuElement: JQuery;

private _searchButtonElement: JQuery;

private _searchBoxElement: JQuery;

private _searchDataSource: kendo.data.DataSource;

private _searchBox: kendo.ui.AutoComplete;

private _searchAutocompleteMinLength: number;

constructor() {

kendoMenuScript; //necessary reference so the k/kendo.menu.min will be in the generated require statement

kendoAutoCompleteScript; //necessary reference so the k/kendo.autocomplete.min will be in the generated require statement

this._searchAutocompleteMinLength = 3;

this._menuElement = $("#menu")

this._searchBoxElement = $("#searchBox");

this._searchButtonElement = $("#searchButton");

this._menuElement.kendoMenu();

this._menuElement.show();

this._searchDataSource = this.createSearchDataSource();

this._searchBox = this.createAutoComplete();

this._searchBoxElement.keydown((e) => {

if (e.which == kendo.keys.ENTER) {

this.processSearch();

}

});

this._searchButtonElement.click(() => this.processSearch());

}

private createSearchDataSource(): kendo.data.DataSource {

return new kendo.data.DataSource({

data: [

{ "id": 1, "name": "John Doe" },

{ "id": 2, "name": "John Smith" },

{ "id": 3, "name": "Jane Doe" },

{ "id": 4, "name": "Johnny Appleseed" },

{ "id": 5, "name": "Joan Maryland" },

{ "id": 6, "name": "Johan Brown" }

]

});

}

private createAutoComplete(): kendo.ui.AutoComplete {

return this._searchBoxElement.kendoAutoComplete({

dataSource: this._searchDataSource,

placeholder: "Search...",

minLength: this._searchAutocompleteMinLength,

filter: "startswith",

dataTextField: "name",

suggest: true,

}).data(kendoConstant.kendoAutoComplete);

}

private processSearch() {

var value = this._searchBox.value();

if (value != "") {

alert(value + " would be searched for...");

}

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?

General Discussions

answered on 30 Sep 2013

1 answer

976 views

Hide the number 0 in the data grid when formatted as number

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)

)
)

Grid

answered on 30 Sep 2013

3 answers

86 views

Bubble Chart: Group Field not respect sizeField

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

Charts

answered on 30 Sep 2013

1 answer

220 views

Height of the views

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

Scheduler

answered on 30 Sep 2013