Telerik Forums
Kendo UI for jQuery Forum
1 answer
53 views
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
Dimiter Madjarov
Telerik team
 answered on 01 Oct 2013
1 answer
39 views
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
Hristo Germanov
Telerik team
 answered on 30 Sep 2013
1 answer
134 views
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?
Alexander Valchev
Telerik team
 answered on 30 Sep 2013
2 answers
326 views
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!












Josh
Top achievements
Rank 1
 answered on 30 Sep 2013
2 answers
221 views
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?

Kerry
Top achievements
Rank 1
 answered on 30 Sep 2013
1 answer
945 views
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)
                
            )
        )

Atanas Korchev
Telerik team
 answered on 30 Sep 2013
3 answers
79 views
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
Alexander Popov
Telerik team
 answered on 30 Sep 2013
1 answer
214 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

Vladimir Iliev
Telerik team
 answered on 30 Sep 2013
16 answers
658 views
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?
Leon
Top achievements
Rank 1
 answered on 30 Sep 2013
1 answer
158 views
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
Steve
Telerik team
 answered on 30 Sep 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?