or
<
script
type
=
"text/x-kendo-template"
id
=
"template"
>
<
div
class
=
"toolbar"
>
<
label
class
=
"category-label"
for
=
"category"
>Show products by category:</
label
>
<
input
type
=
"search"
id
=
"category"
style
=
"width: 230px"
></
input
>
</
div
>
</
script
>
var
baseURL =
"/Chargeability/JSON"
var
dataSource =
new
kendo.data.DataSource({
transport: {
read: {
url: baseURL,
dataType:
"json"
}
},
batch:
false
,
pageSize: 5,
serverPaging:
true
,
serverSorting:
false
,
schema: { data:
"ChargeabilityWeeks"
, total:
"TotalCount"
}
});
var
grid = $(
"#grid"
).kendoGrid({
dataSource: dataSource,
scrollable:
false
,
sortable:
true
,
columns:
[
{
title:
'Name'
,
field:
'Name'
,
template:
'#= Name #'
},
{
title:
'Weekly Requirement'
,
field:
'Weekly_req_pct'
,
template:
'#= kendo.toString(Weekly_req_pct, "p") #'
},
{
title:
'Weekly Actual'
,
field:
'Weekly_act_hrs'
,
template:
'#= Weekly_act_hrs #'
},
{
title:
'Yearly Requirement'
,
field:
'Yearly_req_pct'
,
template:
'#= kendo.toString(Yearly_req_pct, "p") #'
},
{
title:
'Yearly Actual'
,
field:
'Yearly_act_pct'
,
template:
'#= kendo.toString(Yearly_act_pct, "p") #'
},
],
pageable:
true
,
toolbar: kendo.template($(
"#template"
).html())
});
console.log(grid.find(
"#category"
));
var
dropDown = grid.find(
"#category"
).kendoDropDownList({
dataTextField:
"Name"
,
dataValueField:
"ID"
,
autoBind:
true
,
optionLabel:
"All"
,
dataSource: {
type:
"json"
,
serverFiltering:
false
,
transport: {
read:
'/Chargeability/BU_JSON'
}
}
});
series: [{
type:
"pie"
,
data: [ {
category:
"Hydro"
,
value: 312
} ]
}]
transport: {
read: {
url:
"http://localhost/myJsonService"
,
dataType:
"json"
,
},
parameterMap: kendo.data.transports.odata.parameterMap
}
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
>
<!-- JPlayer here -->
</
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>
<div class=
"jp-volume-bar-container"
>
<div class=
"jp-volume-bar"
>
<div class=
"jp-volume-bar-value"
></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I know this is alot of code...just fairly lost on the subject of templates and how they work.