Questions on Kendo UI for jQuery Forum

0 answers

108 views

write textbox in the grid cell

Can I write textbox in the grid cell?

Thanks & Regards
Sourav

Grid

asked on 02 Nov 2011

0 answers

132 views

Choppy Scrolling In Grid

Hello,

I copied the code for the grid in the examples section of the BETA release into a Visual Studio .aspx page. However, when I use the scroll bar on the right to scroll to the bottom of the grid, it stops me every few hundred rows or so, and I have to start scrolling again.

The funny thing is, when I create a blank .html page in a folder on my computer, it runs fine. I only get this problem when I put the code into Visual Studio.

Any ideas?

Here is my code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Kendo2.aspx.cs" Inherits="VSKendo.Kendo2" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!doctype html>

<html>

<head>

<title>Grid virtualization using remote data</title>

<link href="Styles/kendo.examples.css" rel="stylesheet" />

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

<link href="Styles/kendo.kendo.css" rel="stylesheet" />

<script src="Scripts/kendo.jquery.js" type="text/javascript"></script>

<script src="Scripts/kendo.core.js" type="text/javascript"></script>

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

<script src="Scripts/kendo.data.odata.js" type="text/javascript"></script>

<script src="Scripts/kendo.draganddrop.js" type="text/javascript"></script>

<script src="Scripts/kendo.grid.js" type="text/javascript"></script>

<script src="Scripts/kendo.groupable.js" type="text/javascript"></script>

<script src="Scripts/kendo.pageable.js" type="text/javascript"></script>

<script src="Scripts/kendo.people.js" type="text/javascript"></script>

<script src="Scripts/kendo.sortable.js" type="text/javascript"></script>

</head>

<body>

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

<div class="description">

Grid virtualization using remote data</div>

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

<script>

$(document).ready(function ()

{

$("#grid").kendoGrid({

dataSource: {

type: "odata",

serverPaging: true,

serverSorting: true,

pageSize: 100,

transport: {

read: "http://services.odata.org/Northwind/Northwind.svc/Orders"

}

},

height: 280,

scrollable: {

virtual: true

},

sortable: true,

columns: ["OrderID", "CustomerID", "ShipName", "ShipCity"]

});

</script>

<div id="grid">

</div>

</form>

</body>

</html>

General Discussions

asked on 01 Nov 2011

5 answers

202 views

Formating a Date from WCF Service

Hi,

I have a WCF Service that returns a date like this: /Date(1305169200000-0300)/
I have used the template suggested in your demos like this:

template: '#= kendo.toString(MyDate,"dd MMMM yyyy") #'

But it did not worked.

How can I format my this field ??? Shoud I use a custom function ???

IN fact I have some other fields like money fields to format, Where can I find a tutorial or documentation

Thanks in advance

Grid

answered on 01 Nov 2011

0 answers

151 views

Display XML data in a chart

Hi,

I'm new to Kendo. I'm trying to make a graph from xml data.
This is a sample of the xml file I have:

<ArrayOfData xmlns="http://schemas.example.org/DataModels" xmlns:i="http://www.w3.org/2001/XMLSchema-instance">

<SustainabilityObservationSummaryData>

<DateTime>1318204800</DateTime>

<Value>11.5714283</Value>

</SustainabilityObservationSummaryData>

<SustainabilityObservationSummaryData>

<DateTime>1318208400</DateTime>

<Value>10.8461542</Value>

</SustainabilityObservationSummaryData>

</ArrayOfSustainabilityObservationSummaryData>

And this is the js I wrote:

function createChart() {

$("#chart_wrapper").kendoChart({

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

dataSource: {

transport: {

read: {

url: "data.json",

dataType: "json"

}

},

title: {

text: "Spain electricity production (GWh)"

},

legend: {

position: "top"

},

seriesDefaults: {

type: "line"

},

series:

[{

field: "DateTime",

name: "Date and Time"

},

{

field: "Value",

name: "Value"

}

],

categoryAxis: {

field: "DateTime",

labels: {

rotation: -90

}

},

valueAxis: {

labels: {

format: "{0:N0}"

},

majorUnit: 5

},

tooltip: {

visible: true,

format: "{0:N0}"

}

});

}

$(document).ready(function() {

createChart();

$(document).bind("kendo:skinChange", function(e) {

createChart();

});

I get this error from Firebug: f is undefined

What's the problem?

Thanks.

Charts

asked on 01 Nov 2011

1 answer

101 views

DropDownList not working in IE8 when reading from XML datasource

Hi, I'm getting the following javascript error in IE8 when I use XML as the datasource for the DropDownlist: "Object expected kendo.all.min.js, line 1 character 14651"

My code works perfectly fine for all other browsers, just not IE8 (typical). Here is my test code:

<!doctype html>

<html>

<head>

<title>Binding to remote data</title>

<link href="http://cdn.kendostatic.com/2011.3.1007/styles/examples.min.css" rel="stylesheet"/>

<link href="http://cdn.kendostatic.com/2011.3.1007/styles/kendo.common.min.css" rel="stylesheet"/>

<link href="http://cdn.kendostatic.com/2011.3.1007/styles/kendo.kendo.min.css" rel="stylesheet"/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script src="http://cdn.kendostatic.com/2011.3.1007/js/kendo.all.min.js"></script>

</head>

<body>

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

<input id="titles"/>

<script>

$(document).ready(function() {

$("#titles").kendoDropDownList({

dataTextField: "name",

dataValueField: "id",

dataSource: new kendo.data.DataSource({

type: "xml",

transport: {

read: {

url: "WebService.asmx/GetTitles",

data: {

Param1: "input1",

Param2: "input2"

}

},

schema: {

type: "xml",

data: "/NewDataSet/titles",

model: {

fields: {

id: "id/text()",

name: "name/text()"

}

})

});

</script>

</div>

</body>

Here is the XML:

<NewDataSet>

<titles>

<id>1</id>

<name>Test1</name>

</titles>

<titles>

<id>2</id>

<name>Test2</name>

</titles>

</NewDataSet>

Is it my code or is this a bug? Any help is appreciated, I'd rather not have to resort to other jquery plugins

DropDownList

answered on 31 Oct 2011

1 answer

157 views

Autocomplete not working in IE8 when reading from XML datasource

Hi, I'm getting the several javascript errors in IE8 when I use XML as the datasource for the Autocomplete (I;m also having similar problems with the DropDownList not working correctly in IE8 with XML) My code works fine for all other browsers. Here is my test code:

<!doctype html>

<html>

<head>

<title>Binding to remote data</title>

<link href="http://cdn.kendostatic.com/2011.3.1007/styles/examples.min.css"rel="stylesheet"/>

<link href="http://cdn.kendostatic.com/2011.3.1007/styles/kendo.common.min.css"rel="stylesheet"/>

<link href="http://cdn.kendostatic.com/2011.3.1007/styles/kendo.kendo.min.css"rel="stylesheet"/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script src="http://cdn.kendostatic.com/2011.3.1007/js/kendo.all.min.js"></script>

</head>

<body>

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

<input id="titles"/>

<script>

$(document).ready(function() {

$("#titles").kendoAutoComplete({

dataTextField: "name",

dataValueField: "id",

dataSource: new kendo.data.DataSource({

type: "xml",

transport: {

read: {

url:"WebService.asmx/GetTitles",

data: {

Param1: "input1",

Param2: "input2"

}

},

schema: {

type: "xml",

data: "/NewDataSet/titles",

model: {

fields: {

id: "id/text()",

name: "name/text()"

}

})

});

</script>

</div>

</body>

Here is the XML:

<NewDataSet>

<titles>

<id>1</id>

<name>Test1</name>

</titles>

<titles>

<id>2</id>

<name>Test2</name>

</titles>

</NewDataSet>

Is it my code or is this a bug? Any help is appreciated!

AutoComplete

answered on 31 Oct 2011

2 answers

271 views

Grid adds an extra column "undefined"

Hi,

The grid seems to be adding 1 extra column per html column. This is my html table.

<table id="jow"><br> <thead><br> <tr><br> <th data-field="title">title<th><br> <th data-field="jow">jow<th><br> <th data-field="ieps">ieps<th><br> </tr><br> </thead><br> <tbody><br> <tr><br> <td>1977<td><br> <td>1977<td><br> <td>1977<td><br> </tr><br> <tr><br> <td>1980<td><br> <td>1980<td><br> <td>1980<td><br> </tr><br> </tbody><br> </table><br> <br> <script><br> $("#jow").kendoGrid({<br> groupable: true,<br> sortable: true,<br> pageable: true<br> });<br> </script>

And this is what i get:

<table cellspacing="0" id="jow" style="height: auto;" class="k-focusable"><colgroup><col><col><col><col><col><col></colgroup><br> <br> <tbody><tr><td>1980</td><td>undefined</td><td>1980</td><td>undefined</td><td>1980</td><td>undefined</td></tr><tr class="k-alt"><td>1977</td><td>undefined</td><td>1977</td><td>undefined</td><td>1977</td><td>undefined</td></tr></tbody><br> </table>

What am i doing wrong here?

Thx,

Kevin,

Grid

answered on 31 Oct 2011

2 answers

200 views

No styling, no functionality

Hi,

This is my head:

<head>

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

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

<link href="css/style.css" rel="stylesheet">

<link href="css/structure.css" rel="stylesheet">

<link href="css/objects.css" rel="stylesheet">

<script src="kendo/jquery-1.6.4.min.js"></script>

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

<!--[if lt IE 9]>

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

</head>

This is what i'm trying to do:

<ul id="panelbar">

<li>Item 1

<ul>

<li>Sub Item 1</li>

<li>Sub Item 2</li>

</ul>

<li>

<li>Item 2</li>

<li>Item with Content

<div>This is some PanelBar Item content</div>

</li>

</ul>

<script>

var panelBar = $("#panelBar").kendoPanelBar();

</script>

But i'm not getting any functionality nor styling, what's wrong? The calendar works fine, the grid works partialiy (see my other post).

Thx,
Kevin,

PanelBar

answered on 31 Oct 2011

1 answer

64 views

Catergory axis values

Hi,
I am new to Kendo Chart.
I was trying to use the kendo chart with local data binding for my application.
I encountered a problem with setting X-axis values. I need the values X-axis from (0,2,4 ... 20) and Y-axis from (0,2,4 ... 20) the starting point should be (0,0) but i am not able to set the first point for X- axis.

Please help me out asap.....
thanks in advance.

Charts

answered on 31 Oct 2011

1 answer

93 views

Chart on Android Browser

Greetings

I really believe that Kendo UI's chart is one of the most elegant I have seen client-side wise. Keep up the good work!

Sadly, The series do not display in the android browser. Some display successfully - the series item labels and the axis, however, this is not the case for actual series lines, bars etc.

In the bar one specifically, It must had something to do with the <path> tag inside the <g> tag that is generated client side. It seems that the path tag can't be rendered or interpreted by the android browser.

I attempted by injecting a div tag inside the path tag with a background color set to red, but this did not rendered properly.

Could you provide any work around suggestions?
Let me know and Thank you

Sergio

Charts

answered on 31 Oct 2011