/*DataSource*/
var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"],
lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"],
cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"],
titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer",
"Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"],
birthDates = [new Date("1948/12/08"), new Date("1952/02/19"), new Date("1963/08/30"), new Date("1937/09/19"), new Date("1955/03/04"), new Date("1963/07/02"), new Date("1960/05/29"), new Date("1958/01/09"), new Date("1966/01/27"), new Date("1966/03/27")];
/*Generate DataSource*/
function createRandomData(count) {
var data = [],
now = new Date();
for (var i = 0; i < count; i++) {
var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
city = cities[Math.floor(Math.random() * cities.length)],
title = titles[Math.floor(Math.random() * titles.length)],
birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],
age = now.getFullYear() - birthDate.getFullYear();
data.push({
Id: i + 1,
FirstName: firstName,
LastName: lastName,
City: city,
Title: title,
BirthDate: birthDate,
Age: age
});
}
return data;
}
function onChangeSelection() {
}
/*Render the grid in document.ready*/
$(document).ready(function() {
var grid = $("#grid").kendoGrid({
dataSource: {
data: createRandomData(10),
schema: {
model: {
fields: {
FirstName: { type: "string" },
LastName: { type: "string" },
City: { type: "string" },
Title: { type: "string" },
BirthDate: { type: "date" },
Age: { type: "number" }
}
}
},
pageSize: 5
},
height: 500,
scrollable: true,
sortable: true,
selectable: true,
change:onChangeSelection,
filterable: true,
pageable: true,
columns: [
{
field: "FirstName",
title: "First Name"
},
{
field: "LastName",
title: "Last Name"
},
{
field: "City"
},
{
field: "Title"
},
{
field: "BirthDate",
title: "Birth Date",
template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #'
},
{
field: "Age"
}
]
}).data("kendoGrid");
grid.tbody.parents(".k-grid-content").eq(0).kendoScroller({ useOnDesktop: false});
});
<div id="grid"></div>
.km-touch-scrollbar
{
position: absolute;
visibility: hidden;
z-index: 200000;
height: .3em;
width: .3em;
background-color: #ffff;
-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
opacity: 0;
-moz-border-radius: .4em;
-webkit-border-radius: .4em;
border-radius: .4em;
}
.km-vertical-scrollbar
{
height: 100%;
right: 1px;
top: 0;
}
.km-horizontal-scrollbar
{
width: 100%;
left: 0;
bottom: 1px;
}
.km-scroll-container
{
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
/*Style Change for changing the row colour*/
tbody .k-state-selected
{
color: red;
background-color: yellow;
border-color: red;
}
External resources loaded into this fiddle: