We've got a grid set up to allow for horizontal scrolling (no vertical). We accomplished this by enabling scrolling on the grid, setting the width of the grid to 200px (which doesn't seem to actually restrict the width, which is strange), and setting individual widths on each of the columns, also in pixels.
var
grid = $(
"#report_grid"
).kendoGrid({
dataSource: jsonDataRemote,
columnMenu:
true
,
groupable: { showFooter:
true
},
pageable: {
refresh:
true
,
pageSizes: [20, 50, 100],
buttonCount: 5
},
sortable: {
allowUnsort:
true
},
dataBinding: onDataBinding,
filterable:
true
,
resizable:
true
,
scrollable:
true
,
width:
"200px"
,
columns: [
{ title:
"Home Group"
, field:
"HomeGroup"
, width:
"125px"
},
{ title:
"Learner"
, field:
"LearnerName"
, width:
"125px"
},
{ title:
"Learner Wage"
, field:
"LearnerHourlyWage"
, width:
"80px"
, sortable:
false
, groupable:
false
},
{ title:
"Learner Hours"
, field:
"LearnerHours"
, width:
"92px"
, groupable:
false
},
{ title:
"Learner Cost"
, field:
"LearnerCost"
, width:
"84px"
, groupable:
false
},
{ title:
"Trainer"
, field:
"TrainerName"
, width:
"125px"
},
{ title:
"Trainer Wage"
, field:
"TrainerHourlyWage"
, width:
"80px"
, sortable:
false
, groupable:
false
},
{ title:
"Trainer Hours"
, field:
"TrainerHours"
, width:
"92px"
, groupable:
false
},
{ title:
"Trianer Cost"
, field:
"TrainerCost"
, width:
"80px"
, groupable:
false
},
{ title:
"Extra Cost Description"
, field:
"ExtraCostDescription"
, width:
"125px"
},
{ title:
"Extra Cost Amt"
, field:
"ExtraCostAmount"
, width:
"92px"
, groupable:
false
},
{ title:
"Total Cost"
, field:
"TotalTrainingCost"
, width:
"94px"
, aggregates: [
"sum"
], groupFooterTemplate:
"<div class='f-right'>Sub Total: #=kendo.toString(sum, 'n2')#</div"
, footerTemplate:
"<div class='f-right'>Total: #=kendo.toString(sum, 'n2')#</div"
, groupable:
false
},
{ title:
"Training Type"
, field:
"TrainingType"
, width:
"125px"
},
{ title:
"Course"
, field:
"CourseName"
, width:
"125px"
, template:
"# var icon = '' #"
+
"# if (TrainingType == 'Online') { #"
+
"# icon = 'fa-icon-desktop' #"
+
"# } else if (TrainingType == 'External') { #"
+
"# icon = 'fa-icon-share-square-o' #"
+
"# } else if (TrainingType == 'SCORM') { #"
+
"# icon = 'fa-icon-cloud' #"
+
"# } #"
+
"<span><i class='#= icon # margin-right-5'></i>#= CourseName #</span>"
},
{ title:
"Session Date"
, field:
"SessionDate"
, width:
"125px"
, format:
"{0:dd-MMM-yyyy h:mm tt}"
, groupable:
false
, template:
"# if (SessionDate != '') { #"
+
"<div class=\'f-right'>#= SessionDate #</div>"
+
"# } #"
},
{ title:
"Completed Date"
, field:
"CompletionDate"
, width:
"125px"
, format:
"{0:dd-MMM-yyyy}"
, groupable:
false
},
{ title:
"Grade"
, field:
"Grade"
, width:
"125px"
, groupable:
false
}
]
}).data(
"kendoGrid"
);
This all works fine, however we noticed that when you start removing columns from the grid, via the option in the column header dropdown, at a certain point (probably when the columns no longer "fill" the grid width), the grid display "breaks" and starts showing empty space on the right (see attached image).
How can we prevent this from occurring?
Also, while this bug is my primary concern, I was also hoping someone could explain why setting the grid and column widths in px is necessary for horizontal scrolling, and how it will affect the responsiveness of the grid.