or
tooltip: {
visible:
true
,
template:
"${category}<br />Claim Cost: ${value}"
}
$(document).ready(
function
(){
var
localDataSource =
new
kendo.data.DataSource({
data: [ {
name:
"Dmitry"
,
year: 1987,
id: 1
}, {
name:
"Dash"
,
year: 1994,
id: 2
}, {
name:
"Sam"
,
year: 1954,
id: 3
}
]
});
var
detailsSource =
new
kendo.data.DataSource({
data:[
{
name:
"Dmitry"
,
year: 1987,
id: 1,
address:
'Luga'
,
phnom:
'+380995668745'
},
{
name:
"Dash"
,
year: 1994,
id: 2,
address:
'Brest'
,
phnom:
'+380955569874'
},
{
name:
"Sam"
,
year: 1954,
id: 3,
address:
'Praha'
,
phnom:
'+380679964382'
}
]
});
$(
"#grid"
).kendoGrid({
dataSource: localDataSource,
selectable:
"multiple, row"
,
sortable:
true
,
detailTemplate: kendo.template($(
"#template"
).html()),
detailInit: details,
columns: [
{
field:
"name"
,
title:
"Name"
},
{
field:
"year"
,
title:
"Home address"
,
}]
});
function
details(e){
// @todo get details by id e.data.id
detailsSource.read();
}
})
<
script
type
=
"text/x-kendo-template"
id
=
"template"
>
<
div
>
<
ul
>
<
li
><
label
>Name:</
label
>#= name #</
li
>
<
li
><
label
>Year:</
label
>#= year #</
li
>
<
li
><
label
>Address:</
label
>#= address #</
li
>
<
li
><
label
>Phone:</
label
>#= phnom #</
li
>
</
ul
>
</
div
>
</
script
>
read: {
url: someurl,
data: {
action:
"GetList"
,
sessionID: Auth.sessionID,
},
type:
"POST"
,
},