Questions on Kendo UI for jQuery Forum

1 answer

136 views

Listview Template - is there (possibly) a way of including JPlayer in a template?

Working on a basic application that recieves some records from a database which contain audio files. We've had the ability to display the records in a list view and we were able to include a Jplayer at the bottom (as a footer) playing a local music file. Is there a possibility of including the JPlayer inside of a template like so...

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

<strong>${data.StartTime}</strong>

<strong>"Hello World"</strong>

</script>

The JPlayer is simply a div tag with a function that is called upon document being ready...

<div id="jquery_jplayer_1" class="jp-jplayer"></div>

<div class="jp-audio-container">

<div class="jp-audio">

<div class="jp-type-single">

<div id="jp_interface_1" class="jp-interface">

<ul class="jp-controls">

<li><a href="#" class="jp-play" tabindex="1">play</a></li>

<li><a href="#" class="jp-pause" tabindex="1">pause</a></li>

<li><a href="#" class="jp-mute" tabindex="1">mute</a></li>

<li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>

</ul>

<div class="jp-progress-container">

<div class="jp-progress">

<div class="jp-seek-bar">

<div class="jp-play-bar"></div>

</div>

<div class="jp-volume-bar-container">

<div class="jp-volume-bar">

<div class="jp-volume-bar-value"></div>

</div>

I know this is alot of code...just fairly lost on the subject of templates and how they work.

Templates

answered on 10 Apr 2012

0 answers

136 views

How to Integrate charts with PHP mySQl

Dear kendos,

I am using kendo for charts. but i get some problem about how to integrate charts with PHP and mySQL. i want to generate charts. the data come from MySQL and need to process it with PHP and then i want to display it in any simple chart.

I have data of student name and marks.

please tell me what to do. i also try json data with php but no success

Regards,
Sudeep Parchure

Charts

asked on 10 Apr 2012

3 answers

92 views

Can't get the CDN to not return crap (encoded) css

This only happens in IE(9) for me, the other browsers seem okay...any ideas?

http://screencast.com/t/uzdXyTuHM6

General Discussions

answered on 10 Apr 2012

1 answer

169 views

Error on unbinding events

When an element with a data-role and data-binding is rebinded, I get an error in binders.widget.events.destroy.
There is the line:

this.element.unbind(handler, this.handlers[handler]);

This should be:

this.widget.unbind(handler, this.handlers[handler]);

Regards, Jaap

MVVM

answered on 10 Apr 2012

8 answers

468 views

Position menu in existing website

I have an existing website which I edit using Expression Web 4 (template of the website wasdownloaded).
I want to replace the standard (basic) menu with the Kendo Menu. The Kendo Menu is working but I can't get it positioned in the same spot as the original menu.
The style of the original menu was:

#hmenu {

float:right;

margin-top: 38px;

text-align: right;

margin-right: 20px;

}

This positions the menu to the right hand side and near the top.
I replaced it with the Kendo Menu and am still using hmenu as the id for the div that holds the menu and inserted some inline style as well but the Kendo Menu is displayed lower and on the left-hand side.

<div id="hmenu">

<ul id="k-menu" class="k-content" style="float:right; margin-top:38px; margin-right:20px">

<li><a href="index.html">Home</a></li>

<li>Products

<ul>

<li><a href="products.html">Products</a>

Any ideas/tips?
thanks
Ronald

Menu

answered on 10 Apr 2012

1 answer

155 views

How can I custom command text such as "update"and "cancel" when in line-editing mode?

I'm not English language user. so I must custom the command text to my culture language.
When define a command column include command such as "edit", I can custom "edit" command text.
but when click "edit" button into inline-editing mode ,How can I custom command text such as "update"and "cancel"?
Is there a easy way to custom it?

Grid

answered on 10 Apr 2012

1 answer

1.0K+ views

Binding MVVM to a Grid Row Template

Hi

I have a grid with a row template defined that I need to bind to the viewModel

<div id="grid" data-role="grid" data-sortable="true" data-pageable="true" data-editable= "inline" data-bind="source: gridSource" data-row-template="row-template"></div>

<script id="row-template" type="text/x-kendo-template">

<tr>

<td>

<input class='k-textbox' data-bind="value: Name, source: gridSource" width: '150px'/>

</td>

<td>

<input class='k-textbox' data-bind="value: Price, source: gridSource" width: '150px'/>

</td>

<td>

<input class='k-textbox' data-bind="value: UnitsInStock, source: gridSource" width: '150px'/>

</td>

</tr>

</script>

<script>

$("#grid").kendoGrid({

dataSource: {

schema: {

model: {

fields: {

Name: { validation: { required: true} },

Price: { validation: { required: true} },

UnitsInStock: { validation: { required: true } }

}

},

columns: [

{ field: "Name", title: "Name", width: "150px" },

{ field: "Price", title: "Price", width: "150px" },

{ field: "UnitsInStock", title: "Units In Stock", width: "150px" },

],

});

var viewModel = kendo.observable({

gridSource: [

{ Name: "1Chai", Price: 18.00, UnitsInStock: 39 },

{ Name: "2Chai", Price: 18.00, UnitsInStock: 39 },

{ Name: "3Chai", Price: 18.00, UnitsInStock: 39 },

{ Name: "4Chai", Price: 18.00, UnitsInStock: 39 },

{ Name: "5Chai", Price: 18.00, UnitsInStock: 39 },

],

displayGridSource: function() {

var gridSource1 = this.get("gridSource");

return $.map(gridSource1, function(product) {

return "\t" + kendo.stringify(product);

}).join(",\r\n");

}

});

kendo.bind($("table"), viewModel);

</script>

It's 'half working' in that the first Name in the first row is bound and updates the viewModel. After that I get an error 'Uncaught TypeError: undefined has no properties'. Attempting to update any other text boxes result in the same error.

2 more questions:

Is it possible to bind to the onFocus event?
Is there a way to determine the index of the viewModel array that a row is bound to?

I want to capture the onFocus event of a text box in the row template and update the model based on the index of the row that contains the textbox.

MVVM

answered on 10 Apr 2012

3 answers

838 views

Retaining leading zeros in a column

Hi,

I have a kendo grid and one of the column is of type string. From server, i get data something like this: "000545". Now, before creating the grid, i am changing the datatype to number(done on client side). And then create the grid. While changing such data to int, i lose the leading zeros. And i want it to be of type number, as i want the sorting and filtering on that column. There is no way, i can modify the data on server-side as it comes from third party. Thats why, i am changing the datatype also on client side. Is there any way,that i can retain the leading zeros?

Regards,
Khushali

Grid

answered on 10 Apr 2012

1 answer

52 views

Documentation Suggestion

Could you please add horizontal scrollbars to the the demo code where applicable? There have been a few times where I've needed to copy paste the examples outside of the KendoUI site just to be able to see all the code.

Heres one such example:
http://demos.kendoui.com/web/combobox/api.html

On a 1920x1200 monitor at fullscreen the right hand side is visibly being cut off.

It looks like your code viewer has the ability to enable horizontal scrollbars (2nd last example on this page):
http://www.kendoui.com/documentation/ui-widgets/combobox/overview.aspx

Just a thought ...

General Discussions

answered on 10 Apr 2012

6 answers

441 views

Multiple line template displays first data element only

Kendo UI version: 2012.1.322 (CDN)
OS: Windows 7
exact browser version: Mozilla FireFox 11.0
jQuery version (if registered independently from Kendo UI): v1.7.1

Scenario: using Kendo MVVM data-binding and listview template to create a form.
What works: I can reproduce the example on http://demos.kendoui.com/web/mvvm/source.html that displays data in a table.
- I can display data in a table from a page method using this template script

<tr><td data-bind="text: Message"></td><td data-bind="text: CurrentState"></td><td data-bind="text: Subject"></td></tr>

Problem: As soon as I add multiple rows into the template script, only the first data element is populated.

<tr><td data-bind="text: Message"></td></tr><tr><td data-bind="text: CurrentState"></td></tr><tr><td data-bind="text: Subject"></td></tr>

Templates

answered on 10 Apr 2012