KendoGrid scroll within TabPanel

Hi all,

how can I obtain a more nice-looing Kendogrid within this TabPanel, for example making it possible to horizontally scroll the columns?

image

I tried using scrollable true, but nothing changed.

Thank you very much!!

You can set each column in the grid to have a width:

"columns": [
            {
                "label": "myColumn",
                "field": "myField",
                "align": "left",
                "sortable": true,
                "width": 150,
                "id": "myID"
            },

Unfortunately I think you have to do this for every column - but if you set the same width for each and then set scrollable to true, you should be able to scroll through the grid.

You could also set the width of the grid using CSS which should accomplish the same thing because the columns will automatically resize based on the width of the overall grid if they are not given a hardcoded width.

1 Like

Thanks, how do I define the width of the grid through the css? I think it would be quicker than setting each column width individually.

To your UIViewKendoGrid add "cls": "kendo-column-width-150", then in index.less:

div.kendo-column-width-150 {
    td {
      width: 150px;
    }
    th {
      width: 150px;
    }
}

This is just what I came up with off the top of my head. I’m not sure if there’s a more preferred way.

what do you mean with index.less? where do I insert that piece of code?

index.less is where you can put Less.js code

you can put it under your ui folder as ui > content > stylesheets > index.less

@lamarof did that work for you?

Actually I did not try. But I solved through setting each columns’ width. Thanks