How to display both expand and collapse button with file icons

Posted by: senthilraja.krishnan on 6 July 2020, 5:06 pm EST

  • Posted 6 July 2020, 5:06 pm EST

    I am working on “wj-flex-grid” and displaying result as a tree view. My task is required to display both expand and collapse button with file icon but it’s not coming as expected. Below i have mention some scenarios, please have a look.

    Case 1: When I am using “cellType” as “CellEdit” then only expand and collapse button is displaying. Not able to display file icons in this case. I have attached the wj-flex-grid.html file for your reference.

    Case 2: When I am using “cellType” as “Cell” then file icons are coming but no expand and collapse button appears.

  • Posted 6 July 2020, 5:39 pm EST - Updated 3 October 2022, 7:01 am EST

    Here is sample layout

  • Posted 6 July 2020, 5:39 pm EST

    
    <wj-flex-grid #flexGrid id="proLawCustomGrid" class="bento-flex-grid has-row-hover" headersVisibility="Column" [class.list-grid]="gridStyle" [itemsSource]="data" [childItemsPath]="'children'" [showSort]="allowGridSorting" (initialized)="gridInitialized(flexGrid)"
        (formatItem)="onFormatItem(flexGrid, $event)" (itemsSourceChanged)="itemsSourceChangedHandler()" (sortedColumn)="allowGridSorting && onSortedColumn($event)" (sortingColumn)="allowGridSorting && onSortingColumn($event)" selection-mode="ListBox" (groupCollapsedChanged)="onGroupCollapsedChanged(flexGrid,$event)">
    	
    	 <ng-template ngFor [ngForOf]="columnDefinitions" let-column>
    	 
    	        <wj-flex-grid-column [header]="column.header" [binding]="column.binding" [minWidth]="column.minWidth" [width]="column.width==0 ? '*' : column.width " [isReadOnly]="column.isReadOnly" [allowSorting]="column.allowSorting" [allowDragging]="column.allowDragging"
                    [align]="column.align" [visible]="column.visible">
    				
    				 <div *ngSwitchCase="'textwithicon'">
                            <ng-template wjFlexGridCellTemplate [cellType]="'ColumnHeader'">
                                <span (click)="expandAndCollapseAll()" [ngClass]="this.expandAll ? 'wj-glyph-right':'wj-glyph-down-right'"></span>{{ column.header }}
                            </ng-template>
    
                            <ng-template wjFlexGridCellTemplate let-dataItem>
                                <span [ngClass]=getIconClass(column.template?.iconClass,item[column.fileName]) style="padding-right: 5px;" [ngbTooltip]="item.tooltip? item.tooltip: column.template?.tooltip" [title]="column.template?.title" container="body">
                                </span> {{ item[column.binding] | limitWordPipe: column.template?.limitWord }}
                            </ng-template>
                        </div>
    				</wj-flex-grid-column>
           
    	 </ng-template>
    </wj-flex-grid>
    
    
  • Posted 7 July 2020, 4:22 pm EST

    Hi Senthil,

    We are sorry but we were unable to replicate the issue at our end. Please refer to the sample link below that we used to replicate the issue:

    https://stackblitz.com/edit/angular-qmvexi

    Can you please let us know whether we are missing something in order to replicate the issue? You can also modify the sample so that it replicates the issue.

    Note that initially you may not see all the expand/collapse icons and as you will scroll, all the icons will be visible. This is just a stackblitz issue and not of Wijmo.

    Regards,

    Ashwin

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels