Questions on Kendo UI for jQuery Forum

1 answer

110 views

Resizing Column Width

Does the Grid have the ability to resize column width?

Grid

answered on 23 Mar 2012

10 answers

427 views

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

104 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

122 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

64 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

52 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

166 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

answered on 23 Mar 2012

0 answers

99 views

column template, functions, and encoding

This post is a mistake. Admins please delete.

Grid

asked on 23 Mar 2012

0 answers

30 views

Treeview support for Checkbox? included in 2010 Q1 (3-22) release?

Is 'Treeview' support for checkboxes included in the 2012 Q1 release (03-22-2012) of Kendo UI?
If not, are there any workarounds?

Are release notes available that document the changes for the new release.

Thank you.
Ryan

TreeView

asked on 22 Mar 2012

0 answers

45 views

Templated remote data bound grid, jquery selectors not finding generated elements

Help! I am having some trouble with a data bound grid that uses a template whose generated html has <a> tags that need jquery click handlers.

in essence
$('mygrid').kendoGrid({....});
$('.classWithInGridTemplateRowOutput').click(function(){...});
clicks installed when datasource is array data, and not installed when datasource is remote xml

In the following fiddle the array based data bound grid appears as I want _and_ the click handlers are never installed.
http://jsfiddle.net/RichardAD/U2pwe/

The fiddle was tweaked so the grid has remote XML data binding. Tweaked page is on another site because I don't know how to use jsfiddle echo/xml for the scenario.
In this case the click handlers are NOT installed! ?
http://devenezia.com/kendo/clickProblem.html

I am speculating there is a time delay incurred loading the remote data so the DOM is not updated at the time the desired selectors are used.

Thanks,
Richard

Grid

asked on 22 Mar 2012