Questions on Kendo UI for jQuery Forum

1 answer

500 views

Hello.

I show a report image in my application; this report is a png image. My problem is that as auser I wan't to scroll that image to view some part of the report. How can I zoom it? there is any js function that allow me that?

For reference here goes my code:

<div data-role="view" id="doc-Image" data-layout="default-layout" data-title="Report" >

<img id="doc-Image-DocumentImage" alt="Document Type" src="../Report/1" style="width: 100%;"/>

</div>

Thanks.
Arturo

Application

answered on 04 May 2012

1 answer

128 views

Grid edit mode on iOS issue

Hello,

I just had a look at the grid batch editing example on your demo page here: http://demos.kendoui.com/web/grid/editing.html and the editing doesn't seem to work on my iOS device - (iPad2 and iPhone 4 more specifically).

If you click on an editable cell, the iOS keyboard starts to popup (expected), then it quickly disappears again and resets the grid cell back to non-edit mode.

Is this a known issue?

Thanks
Marko

Grid

answered on 04 May 2012

2 answers

561 views

[Solved] Issue with showing menu inside grid cell

I want to show menu inside one of the grid column, for all the rows.
Please see below my code (modified kendo row template example). This is displaying menu inside cell,
but when i expand it, it is not completely visible. Onlu the part of menu which fits in row height is visible
Please see attached screen shot

<!DOCTYPE html>
<html>
<head>
<title>Row template</title>
<script src="../../../js/jquery.min.js"></script>
<script src="../../../js/kendo.web.min.js"></script>
<script src="../../content/shared/js/console.js"></script>
<link href="../../../styles/kendo.common.min.css" rel="stylesheet" />
<link href="../../../styles/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
<a href="../index.html">Back</a>
<div id="example" class="k-content">
<table id="netflixTable">
<thead>
<tr>
<th>
Cover
</th>
<th>
Title
</th>
<th>
Rating
</th>
<th>
Actions
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3"></td>
</tr>
</tbody>
</table>
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr>
<td>
<img src="${ BoxArt.SmallUrl }" alt="${ Name }" />
</td>
<td>
${ Name }
</td>
<td>
${ AverageRating }
</td>
<td>
<ul id="menu">
<li>Actions
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
<li>Eleven</li>
</ul>
</li>
</ul>
</td>
</tr>
</script>
<script>
$(document).ready(function() {
$("#netflixTable").kendoGrid({
dataSource: {
type: "odata",
serverFiltering: true,
filter: [{
field: "Name",
operator: "contains",
value: "Star Wars"
},{
field: "BoxArt.SmallUrl",
operator: "neq",
value: null
}],
transport: {
read: "http://odata.netflix.com/Catalog/Titles"
}
},
rowTemplate: kendo.template($("#rowTemplate").html()),
height: 600,
dataBound: function(e) {
// handle event
$("#menu").kendoMenu();
}
});
});
</script>
</div>

</body>
</html>

Grid

answered on 04 May 2012

3 answers

186 views

[Solved] jQuery code not loaded when navigating to html file?

I have a very straightforward setup at the moment.
index.html has 2 links. Using jQuery I handle the .click event of the links and call app.navigate to load either "test.html" or "about.html". They both load correctly as far as static HTML goes, however anything inside of a jQuery block does not work.
For example on about.html I have a link with id="test". with the jQuery of :

$("#test").click(function(e){

alert('inside click');

});

it does not show an Alert. If I move the Alert as regular JS code it works or if I move the jQuery code and "test" link to the main view (index.html) it works.

So it seems pretty obvious that any jQuery code (or at least events) not in the index.html and referencing HTML elements that exist in the DOM at the moment won't work correctly.

Is this a known bug? It seems like an incredibly large oversight.

General Discussions

answered on 04 May 2012

1 answer

144 views

Specifying the "items" element name

For the TreeView control, is it possible to have a data structure where the sub-items belong to an element other than one called "items"? For example, if I have the following structure:

$("#treeView").kendoTreeView({

dataSource: [ { category: "A", nodes: [{name:"Node 1"}, {name:"Node 2"}]} ]

});

I know I can use a template for the "category" element at the top level, but I'm not sure how I can specify that the sub-items are in the "nodes" element.

<script id="treeview-template" type="text/kendo-ui-template">

# if (item.category) { #

#= item.category #

# } #

// How do I now tell it to render the "nodes" element as children to the category element?

</script>

TreeView

answered on 04 May 2012

0 answers

87 views

live() events ?

Is there a way for the observable to bind to a newly created dom element like live() does?

MVVM

asked on 04 May 2012

1 answer

152 views

Apply Paging in Template?

Hi,

How to apply paging in Template?

Thanks,
Mangesh

Templates

answered on 03 May 2012

3 answers

159 views

php, pdo, tpl and kendo

well I can successfully use php, pdo and kendo together but when I try to put kendo web widgets into TPL I get a Smarty compile error on something that works perfectly well in a php file.

should Kendo work in Smarty tpl files?

thanks,
Richard

General Discussions

answered on 03 May 2012

0 answers

77 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

114 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