don't work a wrap for virtual Tree-grid

[arheopterix1960]

Hi,
I am trying to use WrapCell to work with virtualDataSource for Tree-Grid and call “fetch( url)” like yours examples:
”
layout: {
rowHeight: ‘auto’,
rowMinHeight: 50,
allowCellsWrap: true,
},
”
I get the correct tree-grid view with working wrap at level 0, but when expanding the rows :
” dataSource: new window.Smart.DataAdapter ({
virtualDataSourceCache: false,
keyDataField: ‘@unid’, // Flat Hierarchical Data
parentDataField: ‘parent’, //Flat Hierarchical Data
virtualDataSourceOnExpand: function (resultCallbackFunction, details) {….. ” ,
the view brokes and I see error:
” Uncaught (in promise) TypeError: Cannot read property ‘layout’ of undefined
at Object._autoSize (smart.grid.js: formatted: 40944)
at HTMLElement.get _scrollHeight [as _scrollHeight] (smart.grid.js: formatted: 32054)
at HTMLElement._refreshScrollBars (smart.grid.js: formatted: 34114)
at HTMLElement._refreshLayout (smart.grid.js: formatted: 34105)
at HTMLElement._refresh (smart.grid.js: formatted: 33745)
at HTMLElement.refresh (smart.grid.js: formatted: 34705)
at HTMLElement.o (smart.grid.js: formatted: 18413)
at smart.grid.js: formatted: 34560
at Smart.DataAdapter.window.smartDataAdapter.onBindingComplete (smart.grid.js: formatted: 6032)
at Smart.DataAdapter.window.smartDataAdapter._onBindingComplete (smart.grid.js: formatted: 5992)”.
I’m sure that the fetch calls are working correctly, since when disabled
layout: {
rowHeight: ‘auto’,
rowMinHeight: 50,
allowCellsWrap: true,
},
everything works correctly.
By the way the line
“rowMinHeight: XXX,” is needed because its absence causes another error.
Regards…

[arheopterix1960]

What are you mind? Why can’t I use a wrap?
I partially solved this problem  by replacing  “rowHeight: ‘auto’ ” with  “rowHeight: 50 ” .
 
But in this case, the indent is lost : next levels do not have an indent and stand in the same position as the zero level. Could you tell me where the indent changes and which variable is responsible for it?
  https://www.dropbox.com/s/f0uf7ipytt9xjwa/with%20indent.png?dl=0
 
https://www.dropbox.com/s/j0720gnm42fuhr1/no%20indent.png?dl=0https://www.dropbox.com/s/j0720gnm42fuhr1/no%20indent.png?dl=0
 

[YavorDashev]

Hi Oleg Ilin,
I was able to reproduce the issue as you do and this behavior is definitely is a bug and I have added a work item for this.
We will work to fix it as soon as we are able to!
I also would like to thank you for reporting this scenario as it helps us improve our products constantly!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[arheopterix1960]

Excuse me, please!
I have realized that my question isn’t resolved.
Do I need to write to HelpDesk?
Or can this issue be resolved in principle?
Regards,
Oleg I..

[admin]

Hi Oleg Ilin,
There is no new version available, yet. The latest Smart UI release is before you created this topic.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[Oleg Ilin]

How’re you, Mr. Peter Stoev.

Could I interest about the status of my question ?

Regards,
Oleg I..

[admin]

Hi Oleg Ilin,

The fix for that item is scheduled for Q1 2022.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[Oleg Ilin]

Good afternoon.
Could I ask the status of my request.
regards
Oleg

[admin]

Hi Oleg,

The reported issues are already resolved in the current version.

Example:

function GetData() {
    const data = new Array();
    const generatekey = function () {
        const S4 = function () {
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        };
        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
    };
    for (let i = 0; i < 100; i++) {
        const row = {};
        const tasks = ["Shopping", "Housewares", "Kitchen supplies", "Groceries", "Cleaning supplies", "Office supplies", "Remodeling", "Paint bedroom", "Paint wall", "Fitness", "Decorate living room",
            "Fix lights", "Fix front door", "Clean kitchen"];
        const firstNames = [
            "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
        ];
        const lastNames = [
            "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
        ];
        const taskindex = Math.floor(Math.random() * tasks.length);
        row["id"] = generatekey();
        row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
        row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
        row["name"] = row["firstname"] + " " + row["lastname"];
        row["task"] = tasks[taskindex];
        row["duration"] = 1 + Math.floor(Math.random() * 10);
        data.push(row);
    }
    return data;
}
Smart('#grid', class {
    get properties() {
        return {
            dataSource: new Smart.DataAdapter({
                virtualDataSourceLength: 20,
                virtualDataSourceCache: true,
                virtualDataSourceOnExpand: function (resultCallbackFunction, details) {
                    setTimeout(function () {
                        const data = GetData().slice(0, 3);
                        if (details.row.level === 1) {
                            for (let i = 0; i < data.length; i++) {
                                data[i].leaf = true;
                            }
                            resultCallbackFunction({
                                dataSource: data
                            });
                        }
                        else {
                            resultCallbackFunction({
                                dataSource: data
                            });
                        }
                    }, 300);
                },
                virtualDataSource: function (resultCallbackFunction, details) {
                    setTimeout(function () {
                        resultCallbackFunction({
                            dataSource: GetData().slice(0, 20)
                        });
                    }, 300);
                },
                id: 'id',
                dataFields: [
                    'id: string',
                    'name: string',
                    'duration: number',
                    'task: string'
                ]
            }),
            layout: {
                rowHeight: 'auto',
                allowCellsWrap: true
            },
            behavior: { columnResizeMode: 'growAndShrink' },
            columns: [
                { label: 'Task', dataField: "task", align: 'center', width: 300 },
                { label: 'Person Name', dataField: "name", cellsAlign: 'center', align: 'center', width: 300 },
                {
                    label: 'Duration', dataField: "duration", cellsAlign: 'center', align: 'center', formatFunction: function (row, column, value) {
                        const hour = value > 1 ? " hours" : " hour";
                        return value + hour;
                    }
                }
            ]
        };
    }
});

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts