or
<
div
id
=
"real-estate-2"
data-role
=
"view"
data-layout
=
"main"
data-before-show
=
"beforeShowRealEstate"
data-show
=
"realEstateListShow"
data-hide
=
"hideRealEstateList"
class
=
"real-estate-view"
>
</
div
>
function realEstateListShow(e) {
e.view.content.append($('<
ul
class
=
"real-estate-list-properties"
></
ul
>'));
var viewID = e.view.id;
$(viewID + " .real-estate-list-properties").kendoMobileListView({
dataSource: new kendo.data.DataSource({
pageSize: 20, //defines page size. Required by the "Endless scrolling"
data: realEstateFormattedData
}),
template: $('#profile-list-item-template').text(),
endlessScroll: true,
scrollTreshold: 30 //treshold in pixels
});
}
<
div
id
=
"real-estate-1"
data-role
=
"view"
data-layout
=
"main"
data-before-show
=
"beforeShowRealEstate"
data-show
=
"realEstateListShow"
data-hide
=
"hideRealEstateList"
class
=
"real-estate-view"
>
<
ul
class
=
"real-estate-list-properties"
></
ul
>
</
div
>
.k-state-selected.k-state-focused,
.k-state-selected.k-state-highlight {
background-color: #5f7e00;
border-color: #5f7e00;
}
function
addCellClickEventListener() {
var
grid = $(
'#grid'
).data(
'kendoGrid'
);
$(grid.tbody).on(
'click'
,
"> tr:not(.k-grouping-row, .k-detail-row, .k-group-footer) "
,
function
(e) {
popup(e);
});
}
function
popup(e) {
var
cell = e.target;
var
ix = $(cell).index();
assert((ix != 0),
"index must be greater than zero"
);
}
function
assert(val, msg) {
if
(!val) {
alert(msg);
return
false
;
}
return
true
;
}
I'm trying to add a custom header template for the Kendo Grid, but when I do this the sort arrow graphic no longer shows up. I've search for quite a while looking for an example or forum discussion on how to fix this and I haven't found anything.
Can someone please tell me how to do this?
Here is an example of my current column definition:
columns.Bound(p => p.TotalCharges)
.HeaderTemplate(@<
text
>Total<
br
/>Charges</
text
>);