Questions on Kendo UI for jQuery Forum

2 answers

61 views

Hello!
I'm trying to figure how http://demos.kendoui.com/web/datasource/shared-datasource.html works.
I copied code to my project, provided full url to transport object:
read: {
url: "http://demos.kendoui.com/content/web/datasource/internet-users.json",
dataType: "json"
}
};

Problem is that chart and grid are empty (see UIScreenShot.png).
What could be wrong here?
Thanks!

Kendo UI version:13.1.320
OS: win2008
exact browser version: FF 20.0.1

Data Source

answered on 07 May 2013

2 answers

181 views

Chart unable to render Json string from asp.net

Hi Kendo Team,
I received a funny behaviour of KendoChat (please refer to the attachment) . Need help in what i have done wrong? I am using asp.net 3.5 framework and below are my code:

KendoUI.aspx.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web.Services;

public partial class KendoUI : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

[WebMethod]

public static string GetJson()

{

System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();

List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();

Dictionary<string, object> row;

for (int i = 0; i <= 5; i++) {

row = new Dictionary<string, object>();

row.Add("country", "Singapore");

row.Add("year", (2000 + i).ToString() );

row.Add("value", 50 + i);

rows.Add(row);

}

return serializer.Serialize(rows);

}

KendoUI.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="KendoUI.aspx.cs" Inherits="KendoUI" %>

<!doctype html >

<html>

<head runat="server">

<link href="KendoCSS/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />

<script src="KendoJs/jquery.min.js" type="text/javascript"></script>

<script src="KendoJs/kendo.dataviz.min.js" type="text/javascript"></script>

<script src="KendoJs/kendo.data.min.js" type="text/javascript"></script>

</head>

<body>

<form id="form1" runat="server">

<div>

<div class="chart-wrapper">

<div id="chart" ></div>

<div id="test" />

</div>

</form>

</body>

<script>

$(document).ready(function () {

$.ajax({

type: "POST",

url: "KendoUI.aspx/GetJson",

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (data) {

if (data != "") {

$("#test").html(internetUsers);

$("#chart").kendoChart({

theme: $(document).data("kendoSkin") || "default",

dataSource: {

data: internetUsers

},

title: {

text: "Internet Users"

},

legend: {

position: "bottom"

},

seriesDefaults: {

type: "line",

labels: {

visible: true,

format: "{0}%"

}

},

series: [{

field: "value",

name: "Singapore"

}],

valueAxis: {

labels: {

format: "{0}%"

}

},

categoryAxis: {

field: "year"

}

});

}

})

});

</script>

</html>

General Discussions

answered on 07 May 2013

1 answer

282 views

any/all operators for filtering using DataSourceRequest - many to many

I have an Alert DataSource i have a listview bound to.
Alerts many to many with Tags
I need a way to filter using the any operator. Is this supported in: DataSourceRequest?

how would i define the json if supported or is there a workaround?
{
     "field": "Tags",
                    "operator": "eq",
                   "value": 'Marketing'
}

related:
http://stackoverflow.com/questions/9278044/wcf-data-services-many-to-many-with-filter

Data Source

answered on 07 May 2013

2 answers

183 views

Image files called sprite@2x.png

Hi,
Is there any reason why this file needs to have an @ symbol in it?
It causes a problem when trying to deploy in a SharePoint app. SharePoint doesn't like files with an @ symbol in it.
Many thanks

General Discussions

answered on 07 May 2013

2 answers

61 views

How do you open time component of datetimepicker using keyboard?

Hi,

How do you open the timepicker in the datetimepicker using the keyboard?

According to the following link:
http://demos.kendoui.com/web/datetimepicker/navigation.html

you can open the date picker using alt+down arrow, but how do you access the timepicker component of the datetimepicker using the keyboard?

Thanks

DatePicker

answered on 07 May 2013

1 answer

231 views

Splitter and percentages totaling more than 100%

I have the need for a 7 column splitter where only 4 columns are visible at any point. I have set the overflow to hidden on the parent container and will control horizontal scrolling programatically as needed.

Is this a bug or is this an unsupported use-case? It appears that everything is calculated properly except for the width. I'm going to try fixing it after creation as well as after the resize event fires. Your help would be appreciated.

$('#target').kendoSplitter({

orientation: 'horizontal',

panes: [

{ collapsible: false, resizable: false, size: '25%' },

{ collapsible: false, resizable: false, size: '25%' }

]

});

The 7th column gets rendered with a width of 0. This is probably a bug where the splitter doesn't expect for the columns to be greater than 100%. Here's what gets rendered:

<div id="target" class="k-widget k-splitter" data-role="splitter">

<div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 300px; height: 300px; left: 0px;">1</div><div data-marker="f3ca4302" class="k-splitbar k-state-default k-splitbar-horizontal k-splitbar-static-horizontal" tabindex="0" role="separator" aria-expanded="true" style="height: 300px; left: 300px;"></div>

<div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 300px; height: 300px; left: 307px;">2</div><div data-marker="f3ca4302" class="k-splitbar k-state-default k-splitbar-horizontal k-splitbar-static-horizontal" tabindex="0" role="separator" aria-expanded="true" style="height: 300px; left: 607px;"></div>

<div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 300px; height: 300px; left: 614px;">3</div><div data-marker="f3ca4302" class="k-splitbar k-state-default k-splitbar-horizontal k-splitbar-static-horizontal" tabindex="0" role="separator" aria-expanded="true" style="height: 300px; left: 914px;"></div>

<div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 300px; height: 300px; left: 921px;">4</div><div data-marker="f3ca4302" class="k-splitbar k-state-default k-splitbar-horizontal k-splitbar-static-horizontal" tabindex="0" role="separator" aria-expanded="true" style="height: 300px; left: 1221px;"></div>

<div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 300px; height: 300px; left: 1228px;">5</div><div data-marker="f3ca4302" class="k-splitbar k-state-default k-splitbar-horizontal k-splitbar-static-horizontal" tabindex="0" role="separator" aria-expanded="true" style="height: 300px; left: 1528px;"></div>

<div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 300px; height: 300px; left: 1535px;">6</div><div data-marker="f3ca4302" class="k-splitbar k-state-default k-splitbar-horizontal k-splitbar-static-horizontal" tabindex="0" role="separator" aria-expanded="true" style="height: 300px; left: 1835px;"></div>

<div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 0px; height: 300px; left: 1842px;">7</div>

</div>

The most important being the last

<div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 0px; height: 300px; left: 1842px;">7</div>

Splitter

answered on 07 May 2013

1 answer

869 views

How to set min value for Kendo web grid numeric field filter?

Hi,

I am using KendoUi web grid with MVC. I have a integer column. I need to prevent user to enter negative values in the filters from the numericdropdown.

Please guide me how can I achieve this?

Please refer attached image for clear idea what I want to do.

Grid

answered on 07 May 2013

0 answers

75 views

How to set min value for Kendo web grid numeric field filter?

I am using KendoUi web grid with MVC. I have a integer column. I need to prevent user to enter negative values in the filters from the numericdropdown.

Please guide me how can I achieve this?

Grid

asked on 07 May 2013

4 answers

165 views

Pan on chart with multiple series

Hello,
I am triying to implement the pan behavior over a Line Chart with multiple series.
With one series it works fine, but when add more series ot still makes the pan, but only the first serie is visible.
The others series just dissapear.
I am using one datasource, and each series uses one field of each json node.
DataSuorce example:

This DataSource is generated dinamically, bacause the user can adds data and series.
The original dataSource:
[{time : "22:10" , count : 1000 },{time : "22:11" , count : 1450}]
Whe user adds a new data and new serie the next data source is generated dinamically adding more fields to the original dataSource (user adds 3 more data sources, for example):
[{time : "22:10" , count : 1000 , count_2 : 998, count_3: 756},{time : "22:11" , count : 1450 , count_2 : 398, count_3: 686},etc...]
The first series defines its "fields source" to "count", the second serie to "count_2",etc...
Everything is ok at this point, but when I drag the chart ,only the fisrt serie is still visible. If I adds the series again are en the right place, the pan is ok.
Could you give me any help please?
Some images are attached to try to explain better..

Charts

answered on 07 May 2013

1 answer

134 views

Editorr "keydown" event doesn't fire with enter key

Using event binding, the "keydown" event doesn't fire when the enter key is pressed. If I bind to the "keyup", it works just fine. I really need it to be on keydown, is this default behavior?

Thanks,
Dean Wise

Editor

answered on 07 May 2013