leovo2708 / ngx-treeview

An Angular treeview component with checkbox
MIT License
362 stars 337 forks source link

Change display of drop down #93

Open khemebuen opened 6 years ago

khemebuen commented 6 years ago

Is it possible to change the display of the DropdownTreeviewComponent? For our project we want to only show a folder icon and when they click on the icon we show the tree. If the component used a template like the tree items do then we could change the the display to not only show text but show an icon or icon and text

leovo2708 commented 6 years ago

Yes, you can see code to implement DropdownTreeviewComponent, it will reuse TreeviewComponent, so you will not have to write many codes.

khemebuen commented 6 years ago

The ngx-dropdown-treeview-select works as we would like for our project. But can we make the combo dropdown just show a folder icon not the folder selected? I extended the TreeviewComponent but the drop down does not seem to work. See attached component. Thanks

custom-dropdown-treeview.component.zip

khemebuen commented 6 years ago

Still trying to reuse the TreeviewComponent to only how a folder icon and when the folder icon is selected the tree view shows. I setup my html for my control like this but it does not work. It just shows the whole tree and button separate. Am I missing smething:

import { Component } from '@angular/core'; import { DropdownTreeviewComponent, TreeviewI18n, TreeviewConfig } from "ngx-treeview";

@Component({ selector: 'custom-dropdown-treeview', templateUrl: './custom-dropdown-treeview.component.html', styleUrls: ['./custom-dropdown-treeview.component.scss'] }) export class CustomDropdownTreeviewComponent extends DropdownTreeviewComponent {

constructor(
    public i18n: TreeviewI18n,
    private dConfig: TreeviewConfig
) {
    super(i18n,dConfig);
}

getText(): string {
    return this.i18n.getText(this.treeviewComponent.selection);
}

onSelectedChange(values: any[]) {
    this.selectedChange.emit(values);
}

}

SteffiKeranJ commented 6 years ago

How to initialize the init of all as false?

joschne commented 6 years ago

I also need to customize the display of the dropdown toggle. Apart from that, DropdownTreeviewComponent fits all my needs.

Current code

https://github.com/leovo2708/ngx-treeview/blob/73698cce8f202c0cebfaee3a69467623850a46d6/src/lib/dropdown-treeview.component.html#L1-L12

Proposed Approach

The change would be very easy, I guess, by adding the possibility to inject a dropdownToggleTemplate.

This template could be provided to DropdownTreeviewComponent through an @Input(), like it is done with the headerTemplate of TreeviewComponent.

I'd like to hear your opinion about this approach before implementing...

SSDSynergyAsad commented 2 years ago

image image image image

how to reuse placeholder Value actually i create three time dropdown but every dorpdown placeholder value change so how to reuse...