How can I set a max-width property to individual kendo grid columns?
There is no property like max-width exposed for kendo grid. One of the round about solution will be to set Width of Column as autosize and then use template where you use css properties to maintain max width.
Following is the example. Not sure if you are looking for the same answer.
<style>.intro { max-width: 100px ;width: 20px ;background-color: yellow;</style>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "ContactName",
title: "Contact Name",
template : '<span class=intro>#:ContactName#</span>'
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
});
</script>
Kala J
Engineer that likes to break things. I hope I can help those around me more with the knowledge I gain from StackOverflow but I'm super thankful for all the help I get here. #SOreadytohelp
Updated on June 16, 2022Comments
-
Kala J almost 2 years
Here's a jsfiddle with a sample kendo grid:
http://jsfiddle.net/owlstack/Sbb5Z/1619/
Here's where I set the kendo columns:
$(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: 10 }, height: 500, scrollable: true, sortable: true, selectable: true, change: onChangeSelection, filterable: true, pageable: true, columns: [{ field: "FirstName", title: "First Name", width: "100px", }, { field: "LastName", title: "Last Name", width: "100px", }, { field: "City", width: "100px", }, { field: "Title", width: "105px" }, { field: "BirthDate", title: "Birth Date", template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #', width: "90px" }, { field: "Age", width: "50px" }] }).data("kendoGrid"); applyTooltip(); });
I added individual widths to each of the columns. However, I would also like to set a max-width to each kendo grid column. Is it possible to set a max-width (not a set one for all columns but max-width for individual columns?)?
-
Admin about 6 yearsDojo link appears to be dead now.
-
quicklikerabbit about 5 yearsSome text to explain your answer would be helpful.
-
serge almost 2 yearswhere is autosize in your sample?*