I have implemented KendoUI in my WebApp, is there any way of making the grid responsive? Like, showing fewer columns on smaller resolutions!
The responsive features of the Kendo UI Grid for Angular are: Responsive columns—Based on the viewport width, the visibility of the Grid columns toggles. Responsive height—Based on the height setting (for example, "100%" ), the Grid adjusts its size depending on the height of its container.
It sets the page size to the total number of records. If a pageSize setting is provided for the data source then this value will be selected initially.
Telerik UI for PHP is a Kendo UI product flavor which targets the PHP web application developers. It includes PHP classes for configuring all Kendo UI components.
Here's my bootstrap-styled Kendo UI grid BEFORE applying the following styles
And here's what you get afterwards. May not be perfect, or what some will consider 'responsive' enough. But, for my users, this works a treat. Phone isn't our target platform anyways, but, now we can at least see what's in the grid, even if we cannot sort it.. etc.
And here are the styles inspired by @Vel's codepen, from earlier in this thread. His codepen styles are missing a statemetn to hide the colgroup element.. which is integral for this approach. Be sure to put this CSS in your page flow somewhere AFTER the main kendo CSS file
@media screen and (max-width: 800px) {
.k-widget table {
border: 0;
}
.k-widget table thead, table colgroup {
display: none;
}
.k-widget table tr {
margin-bottom: 10px;
display: block;
border-bottom: 2px solid #ddd;
border-radius: 20px;
}
.k-widget table tr td:last-child {
background-color: #313444;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.k-widget table tr td:nth-child(2) {
background-color: #313444;
color: #FFF;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
font-weight: bold;
padding-top:1em;
}
.k-widget table td {
display: block;
font-size: 13px;
border-bottom: 1px dotted #ccc;
}
.k-widget table td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
}
There is now a minScreenWidth
setting for each column, which hides the column when the browser width is less than the specified. In our application we have set some constants corresponding to the Bootstrap media query breakpoints, so instead of manually specifying the width every time, we use these constants and thus some columns are hidden when you are below e.g. the Bootstrap sm
or xs
breakpoints.
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.minScreenWidth
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With