Treetable with horizontal scrollbar - webix

Question

Codepen example
Here's a codepen demonstrating a treetable with groups:
https://codepen.io/dharmatech/full/mdWGbox
Screenshot
Screenshot of the above treetable:
The Issue
Only some of the columns are shown; there are many more available. However, note that there is no horizontal scrollbar shown at the bottom to bring the other columns into view.
Is there a way to turn on a horizontal scrollbar?
Approaches I've explored
I've tried each of these:
scrollX: true,
scroll: 'xy',
However, they don't seem to enable a scrollbar.
Treetable Code
Code for the treetable demonstrated above:
{
view: "treetable",
id: "grida",
columns: [
//{ id: "Id", },
//{ id: "Date" },
{
id: "Date",
header: 'Food',
width: 300,
template: function (obj, common) {
if (obj.value) {
return common.treetable(obj, common) + obj.value + `<button onclick=' ( function() { console.log( "${obj.value} - ${obj.Date} - ${obj.Time}" ); } )(); '>Add</button>`;
}
else {
return common.treetable(obj, common) + obj.Food;
}
}
},
// { id: "Time" },
// { id: "Food" },
{ id: "Amount", header: 'Amt', width: 50 },
{ id: "Calories", header: "Cal", width: 50 },
{ id: "Fat", header: "Fat", width: 50 },
{ id: "MonounsaturatedFat", header: "Mono", width: 50 },
{ id: "PolyunsaturatedFat", header: "Poly", width: 50 },
{ id: "Omega3", header: "Om3", width: 50 },
{ id: "Omega6", header: "Om6", width: 50 },
{ id: "SaturatedFat", header: "Sat", width: 50 },
{ id: "TransFat", header: "Trans", width: 50 },
{ id: "Cholesterol", header: "Chole", width: 50 },
{ id: "Carbohydrates", header: "Carb", width: 50 },
{ id: "Fiber", header: "Fib", width: 50 },
{ id: "SolubleFiber", header: "Sol", width: 50 },
{ id: "InsolubleFiber", header: "Ins", width: 50 },
{ id: "Starch", header: "Star", width: 50 },
{ id: "Sugars", header: "Sug", width: 50 },
{ id: "AddedSugars", header: "Add", width: 50 },
{ id: "Protein", header: "Pro", width: 50 },
{ id: "VitaminB1", header: "B1", width: 50 },
{ id: "VitaminB2", header: "B2", width: 50 },
{ id: "VitaminB3", header: "B3", width: 50 },
{ id: "VitaminB5", header: "B5", width: 50 },
{ id: "VitaminB6", header: "B6", width: 50 },
{ id: "VitaminB12", header: "B12", width: 50 },
{ id: "Folate", header: "Fol", width: 50 },
{ id: "VitaminA", header: "A", width: 50 },
{ id: "VitaminC", header: "C", width: 50 },
{ id: "VitaminD", header: "D", width: 50 },
{ id: "VitaminE", header: "E", width: 50 },
{ id: "VitaminK", header: "K", width: 50 },
{ id: "Calcium", header: "Cal", width: 50 },
{ id: "Copper", header: "Cop", width: 50 },
{ id: "Iron", header: "Iron", width: 50 },
{ id: "Magnesium", header: "Mag", width: 50 },
{ id: "Manganese", header: "Mang", width: 50 },
{ id: "Phosphorus", header: "Pho", width: 50 },
{ id: "Potassium", header: "Pot", width: 50 },
{ id: "Selenium", header: "Sel", width: 50 },
{ id: "Sodium", header: "Sod", width: 50 },
{ id: "Zinc", header: "Zinc", width: 50 },
],
scrollX: true,
//scroll: 'xy',
data: data
}
Thanks for any suggestions!
Update 2021-06-11
Aquatic's answer below works well in the codepen. (Thank you Aqauatic!)
However, when I use this treetable in an ASP.NET Core application with the default styling, it looks like this:
Note the following:
The footer and table overlap
The scrollbar is applied to the entire page, instead of just the table.
It appears that the treeview goes out of bounds of the enclosing div.
As suggested by Aquatic, I have a div:
<div style="width: 800px; height: 400px;" id="abc"></div>
Then I reference abc from webix:
webix.ready(function () {
webix.ui({
container: "abc",
Here's a codepen with the CSS copied over from Chrome tools:
https://codepen.io/dharmatech/pen/LYWgyMN
Here's a link to the ASP.NET Core cshtml file on github (as well as the rest of the entire project):
https://github.com/dharmatech/NutritionTrackerRazorPages-2021-05-27-07-32/blob/8207bbd0f6162c8b1a752d8941ea153dd04a1cef/Pages/FoodRecords/IndexWebix.cshtml
If I hardcode the width and height as follows:
{
view: "treetable",
//responsive: true,
id: "grida",
//autowidth: true,
//autoheight: true,
width: 800,
height: 500,
the treeview is properly bounded:
however, it does not resize as the window is resized.
Any suggestions are welcome!

Answer 1

Your code is correct. And TreeTable does show all columns, you just miss the horizontal scroll at bottom of the grid.
To fix the situation, you need to
init UI in container ( currently it is atached to the body ). To do so you need to add container property to the UI configuration
<div id="tree_here">
</div>
webix.ui({
container:"tree_here",
rows: [
be sure to define sizes for the container
#container{
width: 100%;
height: 300px;
}
https://codepen.io/mkozhukh/pen/MWpPwpP