Questions on Kendo UI for jQuery Forum

5 answers

806 views

[Solved] Date types from Remote JSON datasource

Hi, hopefully a quick solution here.

I have a grid showing data from a remote data source, code is below inc JSON sample. All works fine apart from filtering on the date column, which then gives a JS error "no method getTime()". I believe this is because the dates returned in the JSON datasource are actually in string format rather than a date object.

If this is the case, or if there is something else I'm missing can someone please help out?

thanks.

// models

var ftModel_EventLog = kendo.data.Model.define({

id: "EventLog_ID",

fields: {

EventLog_ID: { type: "number" },

EventLog_EntryDate: { type: "date" },

EventLog_Message: { type: "string" }

}

});

// dataSource

var ftDataSource_EventLog = new kendo.data.DataSource({

transport: {

read: {

url: "Services/Grid.aspx",

data: {

src: "eventlog"

},

dataType: "json"

}

},

schema: {

data: function (data) {

return eval(data.data);

},

model: ftModel_EventLog

}

});

// start of functions

function ftLoadContent_EventLog() {

$(".grid").kendoGrid({

dataSource: ftDataSource_EventLog,

filterable: true,

height: 380,

sortable: true,

columns: [

{ field: "EventLog_Message", title: "Message" },

{ field: "EventLog_EntryDate", title: "Entry Date" }

]

});

}

A sample of the JSON data is:

{"data":[{"EventLog_ID":"1","EventLog_Message":"This is an event.","EventLog_EntryDate":"01/02/2012 17:34:22"},{"EventLog_ID":"2","EventLog_Message":"This is another event.","EventLog_EntryDate":"01/02/2012 17:34:45"}]}

Data Source

answered on 23 Mar 2012

3 answers

479 views

[Solved] datasource.read()

Hello,

Normally, if I look at the documentation, the datasource will not contain any data until a read is called. But, in my program, I don't call the read() method and the datasource is filled. How can I disable this automatic reading ?

Cordially,
Kakone.

Data Source

answered on 23 Mar 2012

1 answer

127 views

Resizing Column Width

Does the Grid have the ability to resize column width?

Grid

answered on 23 Mar 2012

10 answers

490 views

[Solved] Using Kendo Web UI widgets and DataViz within the Mobile UI

I am trying to get my head around Kendo UI and would like to use it to build a mobile version of a website. I have never built a website for a mobile before nor have I ever built an application for a mobile.

I have tested some off the Web UI Widgets on my android phone, IPad and PC and am really impressed.

I have now come to test the Mobile UI and am getting a little confused. Is the Web UI and Mobile UI completely separate? I notice that for the Web Widgets you need to include the file kendo.all.min.js and for mobile you include kendo.mobile.min.js. Can these be used in conjunction? What about Dataviz?

For example, If I wanted to use the upload widget and use dataviz charts within the Mobile UI could I? I have tested this and it does to appear to work. Its great that the mobile UI will re-skin to an Android or iOS but will this work on other platforms ?

Many thanks in advance for anyone who can clear this up.

General Discussions

answered on 23 Mar 2012

1 answer

125 views

Kendo Trial - error on "empty" app

Just downloaded the trial version of Kendo Mobile, and created a "empty" MVC3 web project as a playground.

Added the css and js files, but I can't seem to get it to work.

_Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title </title>
<link href="@Url.Content("~/Content/kendo.mobile.ios.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/kendo.mobile.min.js")" type="text/javascript"></script>

</head>
<body>
<div data-role="view">
    <div data-role="header">
      Header</div>
    Hello world!
    <div data-role="footer">
      Footer</div>
</div>
@RenderBody()
<script type="text/javascript">
    window.kendoMobileApplication = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
* The @RenderBody will only render a dummy content (no HTML present)
Running the website I get a JScript runtime error in the kendo.mobile.min.js file.

Application

answered on 23 Mar 2012

1 answer

144 views

Loading KendoUI widgets on demand?

I see that the KendoUI Tabstrip content container can load/render its content on-demand via ajax request to server.
I'm curious how the KendoUI Tabstrip content container will load/render other KendoUI widgets on-demand, say, Grid, List, Tabstrip, ect.
Ajax requests to server should just to get json data.

General Discussions

answered on 23 Mar 2012

1 answer

88 views

Will KendoUI offer an integrated middle tier?

The UI stuff is great, but having a server side/middle-tier to build the logic that is integrated with the UI, is the real key to jump in and build application. Having this separation and trying to glue things together, is too time consuming to build LoB apps.

Is the team considering providing a more integrated framework that is a one-stop place to do everything?
Thanks!

Data Source

answered on 23 Mar 2012

0 answers

73 views

Why I can't sort of more column, and this can be a single?

Why I can't sort of more column, and this can be a single?
code:
var grid= $("#grid").kendoGrid({
dataSource: {
transport: {
read:{
url: "contract/list",
dataType:"json"
}
},schema: {
model: {
fields: {
num: { type: "string" },
proj: { type: "string" },
type: { type: "string" },
amount: { type: "number" },
paid: { type: "number" },
unpaid: { type: "number" },
bl: { type: "number" }
}
}
},

pageSize: 20
// serverPaging: true,
// serverFiltering: true,
// serverSorting: true
},
selectable: "row",
// change: onChange,
change: onChange,
dataBound: function(e) {
if(this.dataSource.group().length == 0) {
//changes the text of the grouping template
setTimeout( function() {
$(".k-grouping-header").html("拖动列到此进行数据分组");
// $(".k-toolbar.k-grid-toolbar").append("<span id='customMessage'>New or changed data are not stored - Please save data.</span>");
});
}
// var grid = $("#grid").data("kendoGrid");
// grid.tbody.find("tr:gt(0)").find(" td:eq(1)").css(tr_sl);
// grid.tbody.find("td:eq(1)").css('background','#F00');
// var x= grid.tbody.find("tr:gt(0)").find(" td:eq(7)").text();
// alert(x)
// if(x<=0){
// x.css('background','#F00')
// }
// alert(x);
},
columns: [
// { title: "aaaa", field: "num", width: 130,template:inlineTemplate},
{ title: "bbbb", field: "num", width: 130},
{ title: "cccc", field: "proj",width: 60},
{ title: "dddd", field: "type",width: 50},
{ title: "eeee", field: "amount",width: 70},
{ title: "ffff", field: "paid",width: 70},
{ title: "gggg", field: "unpaid",width: 80},
{ title: "hhhh", field: "bl",width: 50}
],
filterable: {
name: "FilterMenu",
extra: true, // turns on/off the second filter option
messages: {
info: "数据筛选选项", // sets the text on top of the filter menu
filter: "执行筛选", // sets the text for the "Filter" button
clear: "取消筛选", // sets the text for the "Clear" button

// when filtering boolean numbers
isTrue: "是", // sets the text for "isTrue" radio button
isFalse: "否" // sets the text for "isFalse" radio button
},
operators: {
//filter menu for "string" type columns
string: {
eq: "等于",
neq: "不等于",
startswith: "指定内容开头",
contains: "内容包括",
endswith: "指定内容结尾"
},
//filter menu for "number" type columns
number: {
eq: "等于",
neq: "不等于",
gte: "大于等于",
gt: "大于",
lte: "小于等于",
lt: "小于"
},
//filter menu for "date" type columns
date: {
eq: "等于",
neq: "不等于",
gte: "大于等于",
gt: "大于",
lte: "小于等于",
lt: "小于"
}
}
},
// toolbar: kendo.template($("#template").html()),
height: h,
groupable: true,
scrollable: true,
sortable: {
mode: "multiple",
allowUnsort: true
},
sortable: true,
sortable: {
mode: "multiple",
allowUnsort: true
},
pageable: true
filterable: true
}).data("kendoGrid");

Grid

asked on 23 Mar 2012

1 answer

190 views

DatePicker doesn't seem to recognise the data-format configuration option

I'm trying to use declarative widget initialization, but setting the date format of a DatePicker doesn't seem to have any effect.

I would have expected the following would work:

<div id="container">

<input data-role="datepicker" data-format="yyyy/MM/dd"></select>

</div>

<script>

$(document).ready(function () {

kendo.init($("#container"));

});

</script>

Regards,
Vaughan.

MVVM