Questions on Kendo UI for jQuery Forum

1 answer

110 views

For the life of me, I cannot find kendoPopup() in the TypeScript definition file as either an extension to JQuery or as a class widget in kendo.ui.

Is this by design or an oversight?

General Discussions

answered on 21 Nov 2013

1 answer

318 views

Tooltip Problem - dataitem member undefined

It is pretty straight forward, there are plenty of references to using:

@(Html.Kendo().Chart(Model.oeeList)

.Name("widget-oee-breakdown")

.Theme("black")

.DataSource(ds => ds

.Group(group => group.Add(model => model.resp_id))

)

.Series(series =>

{

series.Column <double

?, string> (model => model.total, categoryExpression: model => model.area_name).Color("White").Name("Downtime").Labels(labels => labels.Visible(false).Format("{0:n2}")).Stack(true);

})

.ChartArea(ca => ca

.Background("transparent")

)

.CategoryAxis(axis => axis

.MajorGridLines(lines => lines.Visible(false))

.Labels(model => model.Rotation(90))

)

.Legend(legend => legend

.Visible(false)

)

.ValueAxis(axis => axis

.Numeric()

.Max(100)

.Line(line => line.Visible(false))

.MajorGridLines(lines => lines.Visible(false))

.Labels(false)

)

.Tooltip(tooltip => tooltip

.Visible(true)

.Template("#= dataItem.resp_name #: #= kendo.format('{0:n2}', value) #")

)

)

In this forum as well as others. "dataItem" doesn't return as undefined, but any member I specify does. In the example above I am using resp_name, which is in the data. Even if I try to use resp_id, which is what shows if I use series.name instead. Basically, anything I put after dataItem returns as undefined. Any ideas??

Charts

answered on 21 Nov 2013

0 answers

164 views

ModalView width/height set to 100% regression in Q3 2013

A last minute regression slipped into Kendo UI Mobile Q3 2013 - the ModalView always has 100% width and height.

In order to fix it, use the attached stylesheets or download the latest internal build that will be available later today.

General Discussions

asked on 21 Nov 2013

4 answers

578 views

[Solved] Adding an average line to an existing column chart

I've got a column chart with a single series. I am trying to add an average line to it. So, let's say the column chart has 5 data points [10, 20, 30, 20, 30] and shows 5 columns on the chart. The average is 22. Do I really need to have the average data be [22, 22, 22, 22, 22], which will put a circle for each data point on the line? Ideally, I'd like a single horizontal line across the chart without any data points showing up (while still having the data points on the columns show up so I can do hover). Hmmm, it would be nice to still have the hoverable capability on the average line so the user can see the exact value.
What are my options here?
Thanks,
--Ed

Charts

answered on 21 Nov 2013

2 answers

202 views

[Solved] Filter persists on reload of data

Hi,
Using the Kendo grid in Single Page Application using MVVM.
The filtering is only at client side, so when the user filters once on a column (say it has only one row) and then next reloads new data to the grid -the filter persists on the grid. It should ideally clear the filter off and reload fresh data without filters.
How is that possible (how to enforce it since it is not happening as expected)

Grid

answered on 20 Nov 2013

3 answers

259 views

PanelBar and JSON

Hi,

I am working with KendoUI Web widgets PanelBar:

<div id="example" class="k-content">
<div class="wrapper">
<ul id="panelbar">
</ul>
</div>
</div>

I want to achieve this:

$(document).ready(function () {

var jsonStr = "[{text: " + "Item 1" + ",cssClass: " + "myClass" + ", url: " + "http://www.kendoui.com/" + "}]";
$("#panelbar").kendoPanelBar({
dataSource: jsonStr
});
});

but I am getting following error:
Error: Syntax error, unrecognized expression: [{text: Item 1,cssClass: myClass, url: http://www.kendoui.com/}]

I am using 2013.2.918.trial version.

Any help?

PanelBar

answered on 20 Nov 2013

3 answers

82 views

Strange "pseudo caching" or repetition in MutliSelect

I am using a Kendo MultiSelect for a "Tag Cloud" type thing. Tags look like this ... they are simple JSON.

{

Id: "tags/weapon",

Name: "Weapon",

Description: "This item qualifies as a weapon in the game."

},

{

Id: "tags/sword",

Name: "Sword",

Description: "This item qualifies as a sword in the game."

},

{

Id: "tags/shield",

Name: "Shield",

Description: "This item qualifies as a shield in the game."

}

The view model looks a lot like this ...

var viewModel = kendo.observable({

Id: null,

Name: null,

Consumable: false,

Equipable: false,

Tags: [],

});

The javascript to create the multi-select looks like this ...

var $tags = $("#tags").kendoMultiSelect({

dataTextField: "Name",

dataValueField: "Id",

itemTemplate: $('#editing-tags-template').html(),

dataSource: {

transport: {

read: {

dataType: "json",

url: url

}

},

open: function (e) {

this.list.addClass("k-tag-cloud");

},

close: function (e) {

}

}).data("kendoMultiSelect");

Where k-tag-cloud is a custom CSS style, this isn't giving me any trouble.

The HTML that this applies to is like this...

<select id="tags" multiple="multiple"

data-placeholder="Select Tags..."

class="dark k-tag-cloud"

data-bind="value: Tags"

style="width: 500px;"></select>

All of this works exactly as I expect. It appears like this on my screen, the behavior is normal, etc; I can select multiple tags, and when I save the item, they get saved without any extra code - just by being bound to the view model. If I retrieve an item, the tags list gets re-populated correctly with the selected tags.

However there is a template that is being used to draw the list to the screen in a different part of the page, that looks like this ..

<h2>Preview</h2>

<div style="border: dashed 2px black;">

<div style="padding: 8px;">

<h3 data-bind="text: Name" style="margin: auto;"></h3>

<h5 data-bind="visible: Equipable" style="margin: auto;">Equipable</h5>

<h5 data-bind="visible: Consumable" style="margin: auto;">Consumable</h5>

<div data-template="templates-admin-prototype-tags-preview" data-bind="source: Tags"></div>

</div>

And then this is the actual template that I call.

<script type="text/x-kendo-template" id="templates-admin-prototype-tags-preview">

<div class="k-prototype-tag">${ Name }</div>

</script>

Now what happens is that once a tag gets added, it draws to this section, but then it stays there - it will not "go away" if I remove the tag. So ..

If I start out and select "Weapon", the draw looks like this ..

Weapon

If I remove "Weapon", it removes it fine. But if I go above 1 tag ... it starts to repeat itself for each item. So if I select "Weapon" and then "Slashing", I get...

Weapon
Slashing
Weapon

This continues in infinite amounts, each time I add a new tag.

MultiSelect

answered on 20 Nov 2013

1 answer

104 views

[Solved] How to change a lines Dot

The default hover symbol is a small round dot, can this dot be changed to a diamond symbol? Example attached.

Charts

answered on 20 Nov 2013

4 answers

171 views

[Solved] How do I get rid of the white right and bottom border?

Hi there

I've tried a few times now to get rid of the border on this sparkline and cannot work out how!

Here's my code:

$("#chart").kendoSparkline({

series:[{ type:'line', data:[100,200,300,280,300,320,400,500], width:3, color:'#59595B' }],

chartArea:{ border:{ width:0 }, height:39, width:71, margin:0 },

plotArea:{ border:{ width:0 }, background:"#DDDDDD", margin:0 }

});

Can someone help please? :-)

Charts

answered on 20 Nov 2013

3 answers

475 views

e.DataItem in click event returns Undefined when using Date Series Chart

code sample below.

<link href="/Content/kendo.common.min.css" rel="stylesheet"/>

<link href="/Content/kendo.dataviz.min.css" rel="stylesheet"/>

<link href="/Content/kendo.default.min.css" rel="stylesheet"/>

<script src="/Scripts/jquery-1.8.2.js"></script>

<script src="/Scripts/kendo.all.min.js"></script>

<script src="/Scripts/kendo.aspnetmvc.min.js"></script>

<div id="chart" style="width: 350px; height: 250px;"></div>

<script type="text/javascript">

var salesData = [{

DOB: new Date("2011/11/1"),

EmployeeID: 1,

sales1: 2000

}, {

DOB:new Date("2011/11/2"),

EmployeeID: 2,

sales1: 2250

}, {

DOB: new Date("2011/11/3"),

EmployeeID: 3,

sales1: 1550

}]

$(document).ready(function () {

$("#chart").kendoChart({

title: {

text: "Employee Sales"

},

dataSource: {

data: salesData

},

series: [{

type: "column",

field: "sales1",

name: "Sales in Units"

}],

categoryAxis: {

field: "DOB"

},

tooltip: {

visible: true,

format: "{0}"

},

seriesClick: onSeriesClick

});

function onSeriesClick(e) {

//console.log(e);

alert("Employee ID is: " + e.dataItem.EmployeeID);

}

</script>

if I change the code to below it works
Note The data fields are changed to string

<script type="text/javascript">

var salesData = [{

DOB: "2011/11/1",

EmployeeID: 1,

sales1: 2000

}, {

DOB:"2011/11/2",

EmployeeID: 2,

sales1: 2250

}, {

DOB: "2011/11/3",

EmployeeID: 3,

sales1: 1550

}]

$(document).ready(function () {

$("#chart").kendoChart({

title: {

text: "Employee Sales"

},

dataSource: {

data: salesData

},

series: [{

type: "column",

field: "sales1",

name: "Sales in Units"

}],

categoryAxis: {

field: "DOB"

},

tooltip: {

visible: true,

format: "{0}"

},

seriesClick: onSeriesClick

});

function onSeriesClick(e) {

//console.log(e);

alert("Employee ID is: " + e.dataItem.EmployeeID);

}

</script>

Charts

answered on 20 Nov 2013