Questions on Kendo UI for jQuery Forum

0 answers

38 views

Hi,

I have designed web page using kendo ui. My web page is adjustable in ipad width-wise, but height-wise it is not adjustable. It is showing blank space below the web page. I am using Tab & splitter, so what is the process or the way i have to follow so that height also get adjusted automatically. Another problem i am facing during rotating of IPad horizantally & vertically, its not getting adjusted automatically.

Please guide me.

General Discussions

asked on 03 Nov 2011

5 answers

449 views

[Solved] more tables on one page, " "

Hi there,

i have a render problem with " "
is there a fix for this issue?

thanks a lot
cheers roland

Grid

answered on 03 Nov 2011

0 answers

129 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

158 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

220 views

[Solved] 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

172 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

130 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

176 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

293 views

[Solved] 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