Questions on Kendo UI for jQuery Forum

0 answers

63 views

Values of a Combobox with a dataSource are displayed in Serif and not with the font of the body

I display two combobox (from existing HTML), one with a dataSource and one without dataSource

When I open the combobox to see the list of values

The combobox with a datasource displays the list with font family : Serif
The combox without a datasource displays the list with the font I define in my css body.

Is this a bug or when we use a datasource in a combobox I need to set something??

Info: I use KendoUi version 2011.3.1129

ComboBox

asked on 03 May 2012

0 answers

84 views

copy text from one grid to another grid editable uneditable

hello I have a grid that is editable and copy a row to another grid that is editable if it gets copied but not editable and when you pass the second grid if need be editable.

my code I have it in this way

<div id="domSelection" style="width:620px; height:300px"></div>

<script>

$(document).ready(function() {

$("#domSelection").kendoGrid({

dataSource: {

data: addItems(),

},

selectable: "multiple",

pageable: true,

scrollable: true,

navigatable: true,

columns: [

{ field: "FirstName", title: "name", format: "{0:c}", type:"String",editable: false, width: "150px" },

{ field: "add", title: "add", width: "120px" }

],

editable: false

});

$('#añadir').click(function () {

var sourcegrid = $('#domSelection').data('kendoGrid'); //SOURCE GRID

var destinationgrid = $('#Selection').data('kendoGrid'); // DESTINATION GRID

sourcegrid.select().each(function () {

var dataItem = sourcegrid.dataItem($(this));

var column = dataItem.FirstName; // whatever the name of the unique id for your data source

alert(column);

destinationgrid.dataSource.add(dataItem); // DESTINATION DATASOURCE

});

destinationgrid.refresh(); // MUST REFRESH THE DESTINATION GRID

});

</script>

<div id="Selection" style="width:600px;"></div>

<script>

$(document).ready(function() {

$("#Selection").kendoGrid({

dataSource: {

},

selectable: "multiple",

pageable: true,

scrollable: true,

navigatable: true,

columns: [

{ field: "FirstName", title: "name", format: "{0:c}", type:"String",editable: false, width: "150px" },

{ field: "City", title: "city", editable:true, type:"Number", validation: { min: 1, required: true },width: "150px" },

{field: "BirthDate", title: "date", type:"String", editable: true, width:"150px"},

{ command: ["edit", "destroy"], title: "Editar", width: "210px" }],

editable: true

});

</script>

do not know if there will be a way to make the copy when you pass a parameter for that can be edited in the second grid
or once you pass everything to the second grid is editable as a functional actualize it not editable editable.

if I put in the datasource.add (column) does not add
if I put the dataItem yes, but not editable in the second grid

regards.
and thanks in advance.
hopefully this answer me : (
or if I want to say something

Grid

asked on 03 May 2012

1 answer

52 views

Text goes from centered to left justified once I move to another view and then back again

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>My Open Cal</title>

<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />

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

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

<script>

var twitterDataSource;

$( //jQuery page load

function ()

{

var app = new kendo.mobile.Application($(document.body), { layout: "layout", icon: "/images/xboxavatar.png" });

})

function setupListView()

{

twitterDataSource = new kendo.data.DataSource(

{

transport:

{

read:

{

url: "http://search.twitter.com/search.json",

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

type: "GET",

dataType: "jsonp",

data:

{

q: "#tampa"

}

},

schema:

{

data: "results"

}

})

$("#ulMyCal").kendoMobileListView({

pullToRefresh: true,

appendOnRefresh: true,

dataSource: twitterDataSource,

template: "<p>${text}</p>"

});

}

</script>

</head>

<body>

<div data-role="layout" data-id="layout">

<div data-role="header" >

<div data-role="navbar">

<span data-role="view-title">My Open Cal</span>

</div>

<div data-role="footer">

<div data-role="tabstrip">

<a href="#index" data-icon="organize">My Calendar</a>

<a href="#search" data-icon="search">Search</a>

<a href="settings.htm" data-icon="settings">Settings</a>

</div>

<div data-role="view" id="index" data-title = "My Calendar" data-init="setupListView"

<div style="text-align:center">

<ul id="ulMyCal" data-style="inset">

</ul>

</div>

<div data-role="view" id = "search" data-title = "Search">

</div>

</body>

</html>

ListView (Mobile)

answered on 03 May 2012

6 answers

1.2K+ views

Client side paging for single JSON GET call

How do I enable client side paging for the following code?

$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "Home/GetWorklist",
dataType: "json",
type: "GET",
contentType: "application/json; charset=utf-8"
}
}
}
});

Grid

answered on 03 May 2012

5 answers

177 views

Widget initialization

Hello,

I initialize a Kendo UI Mobile ListView like this :

var projects = new kendo.data.DataSource({

type: "odata",

transport: { read: "http://localhost:50486/WcfDataService.svc/Projects" }

});

$("#projectsListView").kendoMobileListView({

dataSource: projects,

style : "inset",

template: "${Number} - ${Label}",

});

In this case, it works well.

But, if I use the syntax below, it doesn't work at all (no data displayed). Why ?

$("#projectsListView").kendoMobileListView();

var lv = $("#projectsListView").data("kendoMobileListView");

lv.options.template = "${Number} - ${Label}";

lv.options.style = "inset";

lv.dataSource = projects;

lv.refresh();

Cordially,
Kakone.

General Discussions

answered on 03 May 2012

1 answer

98 views

the grid is not maximized when many columns

the grid is not maximized when many columns. what is the proper configuration for a grid with many columns?

Grid

answered on 03 May 2012

3 answers

161 views

Getting Started With Kendo?

I am a longtime Telerik user and want to support the mobile plarforms with my ASP.Net apps. I am still running VS2008. I am looking for any tutorials that might exist to help me get going. The samples that are with the download will not load in VS2008 so I don't have a sample reference.

BTW: I tried to upgrade to VS2010 but the MS web site had an error.

I tried to take the samples from the web site and build a page in one of my ASP.Net apps and when I display it on my iPhone 4 I get just plain HTML.

Any guidence would be great!

Rod

Application

answered on 03 May 2012

14 answers

2.2K+ views

Add data or hidden column for record ID

I'm evaluating the kendo UI, and would like to have a grid with a hidden column for the record ID, or better yet, attach some data to each row that would contain an ID, and I was wondering if there is a straightforward way to do this?

Thanks, Dennis

Grid

answered on 03 May 2012

1 answer

99 views

issue with seriesHover

as per documentation
seriesHover should work like seriesClick. However in my example below it doesnt . when i replace seriesHover with seriesClick it works for a click event.

function createChart() {
$("#chart").kendoChart(
{
title: {
text: "Kendo Chart Example"
},
seriesDefaults: {
type: "line"
},
series: [
{ name: "Example Series", data: [200, 450, 300, 125] }
],
tooltip: {
visible: true,
format: "{0}%"
},
seriesHover:function(e) {
var w=e.value;
alert(w);
}
}
);
}

$(document).ready(function() {
createChart();
});

Charts

answered on 03 May 2012

4 answers

96 views

Get > Button Styling in Template

Hi,

Could someone please look at this -

http://jsfiddle.net/wickedw/72wLY/

And tell me what I am doing wrong?

I am trying to get the listview buttons in v1 to display as mobile style -

1 >
2 >

Not as

[1]
[2]

Thanks
Matt

ListView (Mobile)

answered on 03 May 2012