JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › don't work a wrap for virtual Tree-grid › Reply To: don't work a wrap for virtual Tree-grid
May 11, 2022 at 11:27 pm
#103218
Keymaster
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/