Is there a way to specify the width of each column and not have it auto expand to match the grid width?
In the first grid, all columns have a specific width set, however, the combined width is less than the grid width.
This causes the column widths not being adhered to and expand to meet the grid width.
The second grid has the “Title” column without a width set. This makes all the other columns adhere to their widths.
For the third grid, I put a dummy column as the last one, so it behaves the same way as the second grid.
There’s an issue that exists with this method. When there’sno data, resizing any columns will cause the last column to “disappear”.
However, by hovering the mouse near where it was supposed to exist, the mouse cursor changes to the column resize cursor, indicating that it is still actually there.
Resizing any of the columns creates a horizontal scroll bar. The “dummy” column keeps its width and does not resize with the other grids.
This is not desired behavior as the “dummy” column shrink to match. Even setting the column width to be 100% and null didn’t work.
<!DOCTYPE html>
<html>
<head>
<title>Basic usage</title>
</head>
<body>
<div id="example" class="k-content">
<div id="grid" style="height: 200px"></div>
<br>
<div id="grid2" style="height: 200px"></div>
<br>
<div id="grid3" style="height: 200px"></div>
<br>
<div id="grid4" style="height: 200px"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: createRandomData(50),
pageSize: 10
},
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true
},
width: "100%",
resizable: true,
columns: [ {
field: "FirstName",
width: 90,
title: "First Name"
} , {
field: "LastName",
width: 90,
title: "Last Name"
} , {
width: 100,
field: "City"
} , {
width: 100,
field: "Title"
} , {
width: 100,
field: "BirthDate",
title: "Birth Date",
template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
} , {
width: 50,
field: "Age"
}
]
});
$("#grid2").kendoGrid({
dataSource: {
data: createRandomData(50),
pageSize: 10
},
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true
},
resizable: true,
width: "100%",
columns: [ {
field: "FirstName",
width: 90,
title: "First Name"
} , {
field: "LastName",
width: 90,
title: "Last Name"
} , {
width: 100,
field: "City"
} , {
field: "Title"
} , {
width: 100,
field: "BirthDate",
title: "Birth Date",
template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
} , {
width: 50,
field: "Age"
}
]
});
$("#grid3").kendoGrid({
dataSource: {
data: [],
pageSize: 10
},
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true
},
resizable: true,
width: "100%",
columns: [ {
field: "FirstName",
width: 90,
title: "First Name"
} , {
field: "LastName",
width: 90,
title: "Last Name"
} , {
width: 100,
field: "City"
} , {
width: 100,
field: "Title"
} , {
width: 100,
field: "BirthDate",
title: "Birth Date",
template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
} , {
width: 50,
field: "Age"
}
, {
title: "Dummy"
}
]
});
$("#grid4").kendoGrid({
dataSource: {
data: createRandomData(50),
pageSize: 10
},
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true
},
resizable: true,
width: "100%",
columns: [ {
field: "FirstName",
width: 90,
title: "First Name"
} , {
field: "LastName",
width: 90,
title: "Last Name"
} , {
width: 100,
field: "City"
} , {
width: 100,
field: "Title"
} , {
width: 100,
field: "BirthDate",
title: "Birth Date",
template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
} , {
width: 50,
field: "Age"
}
, {
title: "Dummy"
}
]
});
});
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")];
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 generatePeople(itemCount, callback) {
var data = [],
delay = 25,
interval = 500,
starttime;
var now = new Date();
setTimeout(function() {
starttime = +new Date();
do {
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: data.length + 1,
FirstName: firstName,
LastName: lastName,
City: city,
Title: title,
BirthDate: birthDate,
Age: age
});
} while(data.length < itemCount && +new Date() - starttime < interval);
if (data.length < itemCount) {
setTimeout(arguments.callee, delay);
} else {
callback(data);
}
}, delay);
}
</script>
</div>
</body>
</html>