Display the tree view dropdown with some options disabled and some of the options enabled based on condition.




Asked on September 12, 2018
Hello,

I want to display the tree view dropdown with some options disabled and some of the options enabled
For example I have the following scenario:
Where the loggedin user needs to see only his location and child location (along with the associated parents in read only format[disabled]).

Assuming the below structure is configured for the client.
-India Group
---India Oil Field Services
------Delhi
------Mumbai
------Gujarat
------Hyderabad
India IT Solutions
------Chandigarh
------Karnataka
---------Bangalore
---------Mysore
------Kerala
------Bihar
---IT solutions
------Hubli
------Bangalore

Scenario 1: If the user belongs to IT solutions location, then he will see the below structure.
-India Group (Read Only - Can't Select [means disabled])
---IT solutions  [should be enabled]
------Hubli      [should be enabled]
------Bangalore  [should be enabled]

Scenario 2: If the user belongs to Bangalore location, then he will see the below structure.
-India Group (Read Only - Can't Select [means disabled])
---India IT Solutions (Read Only - Can't Select [means disabled])
------Karnataka (Read Only - Can't Select [means disabled])
---------Dubai [should be enabled]


Following is my code which will display all the locations in tree view format. 

location-dropdown.component.html:

<div *ngIf="locations?.length">
<ul style="list-style: none;-webkit-margin-start:-33px;line-height: 2em;margin-inline-start:-33px;">
<li *ngFor="let location of locations" class="tree__branch" [ngClass]="{'tree__branch--has-children': location.has_children}">
<a *ngIf="location.has_children" (click)="location.toggle=!location.toggle">
{{ !!location.toggle ? '▶' : '▼' }}
</a>
<a (click)="selectLocationId(location.pk_location_id, location.locationname)" onMouseOver="this.style.backgroundColor='skyblue'" onMouseOut="this.style.backgroundColor='#fff'">{{ location.locationname }}</a>
<app-location-dropdown *ngIf="!location.toggle" [startingParentLocationId]="location.pk_location_id" (sendLocationId)="getLocationId($event)"></app-location-dropdown>
</li>
</ul>
</div>
  
  
location-dropdown.component.ts:
  

 import { Component,OnInit,Input, Output, EventEmitter } from '@angular/core';
import { Location } from '../../shared/services/index';
import { LocationService } from '../../shared/services/index';
import { Globals } from '../../shared/services/globals';

@Component({
selector: 'app-location-dropdown',
templateUrl: './location-dropdown.component.html',
styleUrls: ['./location-dropdown.component.scss']
})
export class LocationDropdownComponent implements OnInit {

constructor (public globals:Globals,private locationService: LocationService) {}
  @Input('startingParentLocationId')
  private startingParentLocationId: string;

   @Output() sendLocationId: EventEmitter<any> =new EventEmitter();
   public selectedLocationId : string;

  /**
   * Holds entire location list
   */
  allLocationArray=[];

  /**
   * Holds entire location list but in
   * filter function returns single location
   */
  locations = [];
  allLocations : Location[];
 locationFilteredList = [];

  ngOnInit() {
    this.getAllLocationOnce();
  }
  
  selectLocationId(pk_location_id : string, locationname : string){
    let locationIdAndName:any ={
      pk_location_id: pk_location_id,
      locationname: locationname
     }
    this.sendLocationId.emit(locationIdAndName);
  }

  public getLocationId(locationIdAndName:any) {
    this.globals.locationIdAndName = locationIdAndName;
}
public getAllLocationOnce(){
  let parent_location_id = this.startingParentLocationId;
  this.locationService.getAllLocationsOnlyOnce().subscribe(data => {
   this.allLocationArray.push(data);
   this.globals.locationArray.push(data);
   this.locationFilteredList = this.allLocationArray[0].filter((book: Location) => book.parent_location_id === parent_location_id);
   this.locations = this.locationFilteredList;
  }
  );
}
}


I want to display that tree view with some of the options enabled and some of the options disabled based on logged in user location. 
Can any one please provide solution in achieving this functionality.

Thanks & Regards
Shilpa Kulkarni




Replied on September 12, 2018
Sorry in my code, I am using list<ul> for listing the locations. How to enable & disable the <li> based on conditions?


Replied on September 12, 2018
Try the below solution:

location-dropdown.component.html

Add [disabled] :

<li *ngFor="let location of locations" [disabled]="isDisabled">
   ------
</li>

location-dropdown.component.ts

Find logged-In User location, suppose loggedInUserLocationId:
Now try it:

isDisabled = true;
ngOnInit() { 
  ------
  if(this.loggedInUserLocationId===startingParentLocationId) {
     this.isDisabled = false;
  }
}




Replied on September 20, 2018
Thank you for the reply. But I am getting following error:
Can't bind to 'disabled' since it isn't a known property of 'li'.




Replied on September 21, 2018
Try this.

<li *ngFor="let location of locations" [attr.disabled]="isDisabled ? true : null">

   <a *ngIf="!isDisabled && location.has_children">
     ---
   </a>

   <a *ngIf="!isDisabled" (click)="selectLocationId(location.pk_location_id, location.locationname)">{{ location.locationname }}</a>
  
   <label *ngIf="isDisabled">{{ location.locationname }}</label>

   ------
</li>


Write Answer










©2024 concretepage.com | Privacy Policy | Contact Us