Questions on Kendo UI for jQuery Forum

1 answer

139 views

Hi,

I'm having an issue whereas if my data is in negatives, the categoryAxis still stays base at zero. Ideally, I would like it not to be zero-based. Coming from a Flex background, a simple solution would be "baseAtZero = false". Is there a property similar or perhaps another way that can fix the positioning of my categoryaxis?

Thanks,
Tonih

Charts

answered on 17 Apr 2013

3 answers

302 views

[Solved] Safari Mobile Upload Inconsistent Success/Failure

We are using Kendo async upload across PC and Mobile platforms, and are encountering issues when trying to upload documents over the mobile-data (3G) network. Pictures from the iPad (around 250KB) are only successfully uploaded about 25% of the time. This issue is only occurring on the iPad, in the Safari browser, and when we are not using WiFi. When using Google Chrome on the device, or when using WiFi, we are able to successfully upload documents without any issues.

This appears to be a network problem, since smaller files (14KB) can be consistently uploaded, while larger files cannot.

When checking the Status and StatusText returned in the onError method, the Status is 0 and the StatusText is empty. We are able to successfully upload the same documents when attempted on the Kendo upload demo site.

Has anyone encountered similar problems, or have any ideas on what could be causing the inconsistency?

Upload

answered on 17 Apr 2013

1 answer

116 views

kendoStockChart label problem

Hello,

We need advice for 2 changes at kendoStockChart, see attachment:
- we don't know how to change the number of displayed (visible) labels. For example we have chart with date values from 2005 to 2012 and we want to show only 2004, 2009 and 2012 values. Not all years. Is it possible?

- we don't know how to change formatting of displayed labels. We have same chart as above with years formatted as 2005 and would like to change to '05 format.

Any advice please?

Thank you

Charts

answered on 17 Apr 2013

2 answers

280 views

[Solved] dataSource: ds vs dataSource: { data: ds }

Hi Everyone,

I have following very simple code that works as expected.

$(document).ready(function () {

var ds = null;

ds = new kendo.data.DataSource({

transport: {

read: {

url: "data.json", dataType: "json"

}

},

change: function () {

var data = this.data(); // or this.view();

}

});

$("#grid").kendoGrid({

dataSource: ds,

// dataSource: {

// data: ds,

// pageSize: 2

// },

sortable: {

mode: "single",

allowUnsort: false

},

columns: [

{

field: "Product",

title: "Product Title"

},

{

field: "Manufacturer",

title: "Manufacturer Title"

},

{

field: "Description",

title: "Description Title"

},

{

field: "Property2",

title: "Property 2"

}

]

});

Why do I not need to call ds.read() in this scenario?

And

If i replace the dataSource: ds with the commented block dataSource: {data: ds } no data is displayed at all. Any idea why?

Thanks for the help.

Data Source

answered on 17 Apr 2013

5 answers

145 views

Hide Splitview

Hi guys,
Im currently having a project using a splitview..but Im having a difficult problem with the splitview. Because I want the split view hide first and call it in a button..Im paste the codes of splitview in a Page or View container but Its doesnt work. Can you help me guys.Thanks

SplitView

answered on 17 Apr 2013

1 answer

201 views

Declarative grid column external template

How do I put an external template into a grid column declaratively?

Here is what I am trying:

<script id="template" type='text/x-kendo-template'>

#=Amount#

</script>

<div id="calledAndDefeasedDebt"

data-role="grid"

data-scrollable="false"

data-bind="source: calledAndDefeasedDebt"

data-columns="['Description', {'field':'Amount', 'title':'AMT', 'template':'kendo.template($(\'template\').html())'}]">

</div>

Grid

answered on 17 Apr 2013

1 answer

113 views

Grid Datasource create on REST end point

I have

kendoGrid({

dataSource : {

transport : {

read : "http://testsite/rest/receipts/_list_last/10.xml",

create : {

url : "http://testsite/rest/receipts.xml",

dataType : "xml",

type : "POST",

contentType : "text/xml",

processData : false,

batch : false

},

parameterMap : function(data, type) {

if (type === "create") {

var postxml = '<reciept><id></id><tenant>';

postxml += data.tenant;

postxml += '</tenant>';

return postxml;

}

When I hit "add new record", every record in the grid including the new one is sent to the server.
Is there a way to prevent this and only allow the newly added record to get POST'ed to the server?
Kind Regards
Andrew

Data Source

answered on 17 Apr 2013

3 answers

526 views

ToolTip without callout

Dear Kendo Team,
I try to run a tooltip (see code below and result in attachment).

var tooltip = $("#Button_Settings_ID").kendoTooltip({

filter: "input",

width: 210,

height: heigth,

position: "bottom",

autoHide: false,

showOn: "click",

callout: true,

content: kendo.template($("#Button_Settings_template").html())

}).data("kendoTooltip");

This works fine, excepted I can see the call out...
I force the value to true, but without succes...
I take your example, provided here, and I've got the same result....(see in attachment)

<head>

<title></title>

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

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

<script src="Script/jquery-1.8.3.min.js" type="text/javascript"></script>

<script src="Script/kendo/2013.1.319/kendo.all.min.js" type="text/javascript"></script>

</head>

<body>

<div id="example" class="k-content">

<div class="demo-section">

<div id="agglomerations">

<a href="#" title="Canton - 26,300,000" id="canton"></a>

<a href="#" title="Jakarta - 25,800,000" id="jakarta"></a>

<a href="#" title="Mexico City - 23,500,000" id="mexico"></a>

<a href="#" title="Delhi - 23,500,000" id="delhi"></a>

<a href="#" title="Karachi - 22,100,000" id="karachi"></a>

<a href="#" title="New York - 21,500,000" id="newyork"></a>

<a href="#" title="Sao Paulo - 21,300,000" id="saopaolo"></a>

<a href="#" title="Mumbay/Bombay - 21,100,000" id="bombay"></a>

<a href="#" title="Los Angeles - 17,100,000" id="losangeles"></a>

<a href="#" title="Osaka - 16,800,000" id="osaka"></a>

<a href="#" title="Moscow - 16,200,000" id="moscow"></a>

</div>

<script>

$(document).ready(function () {

var tooltip = $("#agglomerations").kendoTooltip({

filter: "a",

width: 120,

position: "top"

}).data("kendoTooltip");

tooltip.show($("#canton"));

$("#agglomerations").find("a").click(false);

});

</script>

<style scoped="scoped">

.demo-section {

width: 692px;

}

#agglomerations {

position: relative;

width: 692px;

height: 480px;

margin: 0 auto;

background: url('../../content/web/tooltip/world-map.jpg') no-repeat 0 0;

}

#agglomerations a {

position: absolute;

display: block;

width: 12px;

height: 12px;

background-color: #fff600;

-moz-border-radius: 30px;

-webkit-border-radius: 30px;

border-radius: 30px;

border: 0;

-moz-box-shadow: 0 0 0 1px rgba(0,0,0,0.5);

-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.5);

box-shadow: 0 0 0 1px rgba(0,0,0,0.5);

-moz-transition: -moz-box-shadow .3s;

-webkit-transition: -webkit-box-shadow .3s;

transition: box-shadow .3s;

}

#agglomerations a:hover {

-moz-box-shadow: 0 0 0 15px rgba(0,0,0,0.5);

-webkit-box-shadow: 0 0 0 15px rgba(0,0,0,0.5);

box-shadow: 0 0 0 15px rgba(0,0,0,0.5);

-moz-transition: -moz-box-shadow .3s;

-webkit-transition: -webkit-box-shadow .3s;

transition: box-shadow .3s;

}

#canton { top: 226px; left: 501px; }

#jakarta { top: 266px; left: 494px; }

#mexico { top: 227px; left: 182px; }

#delhi { top: 214px; left: 448px; }

#karachi { top: 222px; left: 431px; }

#newyork { top: 188px; left: 214px; }

#saopaolo { top: 304px; left: 248px; }

#bombay { top: 233px; left: 438px; }

#losangeles { top: 202px; left: 148px; }

#osaka { top: 201px; left: 535px; }

#moscow { top: 153px; left: 402px; }

#canton:hover,

#jakarta:hover,

#mexico:hover,

#delhi:hover,

#karachi:hover,

#newyork:hover,

#saopaolo:hover,

#bombay:hover,

#losangeles:hover,

#osaka:hover,

#moscow:hover { z-index: 10; }

</style>

</div>

</body>

</html>

The only things that i've changed, it's the jquery path (currently using jquery-1.8.3.min.js)
Thanks for your help!
Best regards

ToolTip

answered on 17 Apr 2013

2 answers

433 views

DataSource Filtering

I am absolutely new to Kenod and all it attached features and needed tasks - so please forgive me.

I was able to retrieve data from my sql database and bind it to a tabstrip.

var dsBuecherAT = new kendo.data.DataSource(

{

transport: {

read: {

url: "/api/t_buechers",

dataType: "json"

}

});

$("#buecherAT").kendoTabStrip({

dataTextField: "Buch",

dataContentField: "Buch_ID",

dataSource: dsBuecherAT

});

However when I try to filter (remember I am actually clueless what I am doing) its not working.

1) http://docs.kendoui.com/api/framework/datasource the syntax looks like

var dataSource = new kendo.data.DataSource({

data: [

{ name: "Jane Doe" },

{ name: "John Doe" }

],

filter: { field: "name", operator: "startswith", value: "Jane" }

});

If I search the web I mostly find fiields operator and value in""

Does it matter?
Which is correct?

var dataSource = new kendo.data.DataSource({

data: [

{ name: "Jane Doe" },

{ name: "John Doe" }

],

filter: { "field": "name", "operator:" "startswith", "value:" "Jane" }

});

2) this are two ways I tried and both did not work. Any suggestions?

Try # 1

//we are getting the kapitels

function getKapitels(buch_ID) {

alert(buch_ID);

var dsKapitels = new kendo.data.DataSource({

transport: {

read: {

url: "/api/t_kapitels",

dataType: "json"

}

});

$("#kapitel").kendoTabStrip({

dataTextField: "Kapitel_ID",

dataContentField: "Buch_ID",

dataSource: dsKapitels.filter({ field: "Buch_ID", operator: "eq", value: "1" })

})

}

Try #2

//we are getting the kapitels

function getKapitels(buch_ID) {

alert(buch_ID);

var dsKapitels = new kendo.data.DataSource({

transport: {

read: {

url: "/api/t_kapitels",

dataType: "json"

}

},

filter: { field: "Buch_ID", operator: "eq", value: "1" }

});

$("#kapitel").kendoTabStrip({

dataTextField: "Kapitel_ID",

dataContentField: "Buch_ID",

dataSource: dsKapitels

})

}

Any help is appreciated, and please forgive me if these questions are to clear.

Markus

General Discussions

answered on 16 Apr 2013

1 answer

229 views

Intelligent Pie Chart Label Positioning?

I searched around for a while in the forums, etc. but wasn't able to find an answer, so my apologies if this has already been addressed elsewhere.

I'm using a DataViz pie chart and would like to have the option for labels to show outside the pie or on the pie slices themselves. I can accomplish this by setting series.labels.position to outsideEnd for outside the chart and centered to render them on the pie slices.

However, if there are pie slices that are too small (let's say %5 of the pie or less) having the labels render on the pie slice is not very useful, and I'd like to have them render outsider the pie. In other words, it would be nice if there were an option to tell the chart to render the label on the slice except in cases where the slice is too small, in which case the label will automatically render outside the slice. This sort of behavior seems pretty standard in other pie charts I've seen in the past.

Is there a way to easily do this?

Thanks!
--Joel

Charts

answered on 16 Apr 2013