Example for Responsive Kendo UI grid

Question

I have implemented KendoUI in my WebApp, is there any way of making the grid responsive? Like, showing fewer columns on smaller resolutions!

Answer 1

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;
}
}