Change Kendo Column with DDL
by chanaka1
HTML
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.blueopal.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<select id="firstColoumnChoice">
<option>Serial Number</option>
<option>First Name</option>
<option>Last Name</option>
</select>
<br />
<br />
<div id="columnChangingGrid"></div>
<input type="checkbox" data-role="switch" checked />
<input type="checkbox" data-role="switch"/>
JavaScript
var serialNumbers = [123, 234, 534, 456, 765, 867, 890],
firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"],
lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"],
statuses = ["Unknown", "Inactive", "Active"],
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")];
function createRandomData(count) {
var data = [],
now = new Date();
for (i = 0; i < count; i++) {
var serialNumber = serialNumbers[Math.floor(Math.random() * serialNumbers.length)],
firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
status = statuses[Math.floor(Math.random() * statuses.length)],
birthDate = birthDates[Math.floor(Math.random() * birthDates.length)];
data.push({
SerialNumber: serialNumber,
FirstName: firstName,
LastName: lastName,
Status: status,
DOB: birthDate
});
}
return data;
}
var columnDefinitions = [
{
field: "SerialNumber",
title: "Serial Number"},
{
field: "Status",
title: "Status"},
{
field: "DOB",
title: "DOB",
template: "#= kendo.toString(DOB,'MM/dd/yyyy') #"}];
var gridDataSource = new kendo.data.DataSource({
data: createRandomData(50),
pageSize: 10,
schema: {
model: {
fields: {
SerialNumber: {
type: "number"
},
FirstName: {
type: "string"
},
LastName: {
type: "string"
},
...