So I've got a Kendo Grid initialized like so:
I'm trying to get a grid with a static height and width. It absolutely must not change height and width when I page (which it currently does, due to variably-sized data). The same is true of the data cells. They absolutely must not change size or shape, but they do anyway. I tried setting static width and height, but it seems to be ignoring them to some degree. Beyond that, the column widths are not defining the widths of the columns, but rather the number of pixels to add to the width of the column. Also, it doesn't actually add the specified number of pixels, but some seemingly arbitrary number any given time.
When there's too much data in a cell, it wraps, making the row taller, and thus changing the height of the Grid. That is unacceptable. I require a static height and width, and perhaps it could show the full contained value of the cell on mouseover. I need the values to not wrap or overflow in any way. Is there some way to achieve this?
When paging, the column widths change, throwing off the data alignment. It just looks bad, visually, to be paging through the data, and seeing the column widths changing (and the height of the Grid changing in response to taller rows, too).
Things I need to accomplish, broken out into a list:
Thank you.
Best Regards,
Adrian
var
custData = {
"columns"
: [
{
"field"
:
"ID"
,
"title"
:
"ID"
,
"filterable"
:
true
,
"width"
: 1 },
{
"field"
:
"Last"
,
"title"
:
"Last"
,
"filterable"
:
true
,
"width"
: 1 },
{
"field"
:
"Middle"
,
"title"
:
"Middle"
,
"filterable"
:
true
,
"width"
: 12 },
{
"field"
:
"First"
,
"title"
:
"First"
,
"filterable"
:
true
,
"width"
: 1 },
{
"field"
:
"Role"
,
"title"
:
"Role"
,
"filterable"
:
true
,
"width"
: 1 },
{
"field"
:
"Rank"
,
"title"
:
"Rank"
,
"filterable"
:
true
,
"width"
: 1 }
],
"data"
: [
/* Lots of data here, organized like so: */
{
"ID"
:
"00011"
,
"Last"
:
"Picard"
,
"Middle"
:
""
,
"First"
:
"Jean Luc"
,
"Role"
:
"Commanding Officer"
,
"Rank"
:
"Captain"
}
]
};
var
custDataSource =
new
kendo.data.DataSource({
pageSize: 10,
data: custData[
"data"
]
});
$(
"#customers"
).kendoGrid({
height: 600,
width: 800,
columns: custData[
"columns"
],
dataSource: custDataSource,
groupable:
true
,
scrollable:
false
,
sortable: {
mode:
"multiple"
,
allowUnsort:
true
},
pageable:
true
,
selectable:
"multiple row"
,
nagivatable:
true
,
toolbar: [
{ name:
"create"
, text:
"New"
},
{ name:
"save"
, text:
"Save"
},
{ name:
"cancel"
, text:
"Cancel"
},
{ name:
"destroy"
, text:
"Delete"
}
],
editable: {
update:
true
,
destroy:
false
,
confirmation:
"Are you sure you want to remove this item?"
}
});
I'm trying to get a grid with a static height and width. It absolutely must not change height and width when I page (which it currently does, due to variably-sized data). The same is true of the data cells. They absolutely must not change size or shape, but they do anyway. I tried setting static width and height, but it seems to be ignoring them to some degree. Beyond that, the column widths are not defining the widths of the columns, but rather the number of pixels to add to the width of the column. Also, it doesn't actually add the specified number of pixels, but some seemingly arbitrary number any given time.
When there's too much data in a cell, it wraps, making the row taller, and thus changing the height of the Grid. That is unacceptable. I require a static height and width, and perhaps it could show the full contained value of the cell on mouseover. I need the values to not wrap or overflow in any way. Is there some way to achieve this?
When paging, the column widths change, throwing off the data alignment. It just looks bad, visually, to be paging through the data, and seeing the column widths changing (and the height of the Grid changing in response to taller rows, too).
Things I need to accomplish, broken out into a list:
- Static column or cell widths
- No wrapping of cell content, and no resulting overflow either (white-space: nowrap; overflow: hidden;)
- Static row or cell heights
- Static overall Grid height (cannot have scrolling Grids, because may be viewed on mobile platform where scrolling in child containers does not function)
Thank you.
Best Regards,
Adrian