Search code examples
webixwebix-treetable

Treetable with horizontal scrollbar

Codepen example

Here's a codepen demonstrating a treetable with groups:

https://codepen.io/dharmatech/full/mdWGbox

Screenshot

Screenshot of the above treetable:

enter image description here

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:

enter image description here

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:

enter image description here

however, it does not resize as the window is resized.

Any suggestions are welcome!

Solution

  • 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