Posted 6 February 2020, 4:03 pm EST
Team
While clicking on a node, my wijmo tree grid’s selection looks inappropriate after I toggle the node to collapse & expand. It just works fine unless until I click on collapse/expand of a node. Here is my code.
HTML
TYPESCRIPT
public initializeGrid() {
if (!this.selectedFeaturesTree) { this.selectedFeaturesTree = new wijmo.grid.FlexGrid(this.$.selectedFeaturesTree); this.selectedFeaturesTree.initialize({ autoGenerateColumns: false, columns: [ { header: t("Label"), binding: "label", width: "*" } ], itemsSource: this.filteredSelection, // hierarchical data childItemsPath: "children", // set hierarchy path allowResizing: "None", // disable resizing headersVisibility: "None", // hide headers selectionMode: "ListBox" // use ListBox selection }); this.selectedFeaturesTree.itemFormatter = (panel, r, c, cell) => { const item = panel.rows[r].dataItem; // Store the cells to highlight later (as children when parent is selected) if (item._cells === null) item._cells = []; item._cells.push(cell); cell.draggable = (item.parent && item.allowMove && this.editingEnabled); cell.style.border = "none"; cell.style.color = "black"; if (!panel.rows[r].isSelected) { cell.style.backgroundColor = "white"; } else if (item.selectionColor != null) { cell.style.backgroundColor = item.selectionColor; } // Difficulty drawing the icon with the treeview expander when icon was its own column. Concatenate to label to avoid this if (panel.cellType === wijmo.grid.CellType.Cell && panel.columns[c].header === t("Label")) { const noDiv = cell.innerHTML.split("</span>"); const obj = item.symbolData ? `<object row="${r}" class="symbol" data="${item.symbolData}" type="image/png"></object>` : `<span class="no-symbol" ></span>`; cell.innerHTML = noDiv.length > 1 ? cell.innerHTML = `${noDiv[0].toString()}</span>${obj}${noDiv[1].toString()}` : cell.innerHTML = `${obj}${cell.innerHTML}`; } if (panel.columns[c].header === t("Label") && !panel.rows[r].hasChildren) { cell.style.paddingLeft = `${Number(cell.style.paddingLeft.substr(0, cell.style.paddingLeft.length - 2)) + 9}px`; } }; } this.initializeEvents();
}
public initializeEvents() {
this.selectedFeaturesTree.hostElement.addEventListener("mousedown", e => { // If the column click is the expander ( a span ), we don't want to stop functionality or we won't be able to collapse or expand the tree. if (e.srcElement.localName.toUpperCase() !== "SPAN") e.stopPropagation(); }, true); this.selectedFeaturesTree.hostElement.addEventListener("mouseup", e => { // Get the selected item const ht = this.selectedFeaturesTree.hitTest(e); // If we mouse up in a blank row, nothing to highlight if (!ht._p) return; this.currentSelectedFeature = ht._p.rows[ht.row]._data; if (this.filteredSelection) { this.filteredSelection.forEach(item => { this.setCellColors(item, "white"); }); } this.lastSelectedFeature = this.currentSelectedFeature; // Change all of their background colors to what was set in featuresTrees_changed if (this.currentSelectedFeature) this.setCellColors(this.currentSelectedFeature, null); }, true);
}
private setCellColors(item, color) {
if (item && item._cells) {
item._cells.forEach(cell => {
cell.style.backgroundColor = color ? color : item.selectionColor;
});
if (item.children) { item.children.forEach(child => { this.setCellColors(child, color ? color : child.selectionColor); }); } }
}
Please note, the selection while on click goes inappropriate only after collapse/expand a node.
Please let me know what I’m doing incorrectly.
Thanks in advance,
Mano.
