1. Home
  2. Forum
  3. Angular - EJ 2
  4. when i select value from one dropdownlist that value i dont want in second dropdownlist

when i select value from one dropdownlist that value i dont want in second dropdownlist

i have two dropdownlist when i select one value from first dropdown then that value should not come in second dropdownlist for that i written some code but code is not working as expected.please provide solution. i am attaching code below.


<div class="page-titles">
  <div>
    <ol class="breadcrumb">
      <li class="breadcrumb-item" tabindex="0" ng-reflect-router-link="/index">Pre-processing
      </li>
      <li class="breadcrumb-item active">Configure</li>
    </ol>
  </div>
</div>
<form #checkListForm="ngForm" (ngSubmit)="onCheckListSubmit(checkListForm)">


  <div class="card">
    <div class="card-body">
      
      <!-- Checkbox Row-->
      <div fxFlexFill class="flex-container" fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px"
        fxLayoutAlign="start" [style.margin-bottom]="'20px'">
        <div fxFlex class="child-1">

          <ejs-radiobutton name="check" value="normal" label="Normal Check"  [(ngModel)]="checktype"
            (change)="yesnoCheck($event)"  checked="true" ></ejs-radiobutton>

          &nbsp;<ejs-radiobutton name="check" value="dependency" label="Dependency Check" [(ngModel)]="checktype"
            (change)="yesnoCheck($event)" checked="false"></ejs-radiobutton>
          </div>
      </div>
      <br>

      <!-- First row  -->
      <div fxFlexFill class="flex-container" fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px"
        fxLayoutAlign="start" [style.margin-bottom]="'20px'">
        <div fxFlex class="child-1">
          <ejs-dropdownlist floatLabelType="Always" id='attributeName1' name="attributeName1" [dataSource]='tesData112'
            placeholder='Attribute Name1' popupHeight='200px' ngModel (change)="onContractSelect($event)">
          </ejs-dropdownlist>
        </div>
        <div fxFlex class="child-2">
          <ejs-dropdownlist floatLabelType="Always" id='documentType' name="documentType" [dataSource]='docData'
            placeholder='Document Type' popupHeight='200px' ngModel>
          </ejs-dropdownlist>
        </div>
        <div fxFlex class="child-3">
          <ejs-dropdownlist floatLabelType="Always" id='type' name="type" [dataSource]='type' placeholder='Type'
            popupHeight='200px' ngModel  (change)="onContractSelect($event)">
          </ejs-dropdownlist>
        </div>
      </div>

      <br>
      <!-- Second row  -->
      <div fxFlexFill class="flex-container" fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px"
        fxLayoutAlign="start" [style.margin-bottom]="'20px'">

        <div fxFlex class="child-1">
          <ejs-dropdownlist id='condition' floatLabelType="Always" name="condition" [dataSource]='conditionData'
            placeholder='Condition' popupHeight='200px' ngModel (change)="onChange($event)">
          </ejs-dropdownlist>
        </div>

        <div fxFlex class="child-2" *ngIf="showtext1">
          <ejs-textbox placeholder="Value" floatLabelType="Always" [(ngModel)]="value1" name="value1"></ejs-textbox>
        </div>

        <div fxFlex class="child-3" *ngIf="showtext2">
          <ejs-textbox placeholder="Value" floatLabelType="Always" [(ngModel)]="value2" name="value2"></ejs-textbox>
        </div>

        <!-- <div fxFlex class="child-4" *ngIf="showtext3">
          <ejs-textbox placeholder="Value2" floatLabelType="Always" [(ngModel)]="value2" name="value2"></ejs-textbox>
        </div> -->

        <div fxFlex class="child-5" *ngIf="showAttributeInput">
          <ejs-dropdownlist floatLabelType="Always" id='attributeName2' name="attributeName2" [dataSource]='tesData113'
            placeholder='Attribute Name2' popupHeight='200px' >
          </ejs-dropdownlist>
        </div>


      </div>


      <div style="text-align: center;">

        <button ejs-button cssClass="e-primary" content="Save" type="submit"> </button>
      </div>
    </div>
  </div>







  <br>

  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-body">
          <!-- <h4 class="card-title">CheckList</h4>

          <button ejs-button cssClass="e-primary" content="Save" (click)="checkList()"> </button> -->

          <br>
          <br>
          <ejs-grid #grid [dataSource]='checklistData' [allowPaging]='true' [editSettings]='editSettings'
            [toolbar]='toolbar' (toolbarClick)='toolbarClick($event)' (actionBegin)="actionBegin($event)">

            <e-columns>

              <e-column field='attributeName1' headerText='Attribute Name' textAlign='Left' [allowEditing]="true">
              </e-column>

              <e-column field='documentType' headerText='Document Type' textAlign='Left' [allowEditing]="true">
              </e-column>

              <e-column field='attrribute' headerText='Created By' textAlign='Left' [allowEditing]="true">
              </e-column>
              <e-column field='attrribute' headerText='Date Created' textAlign='Left' [allowEditing]="true">
              </e-column>

              <e-column field='attrribute' headerText='Date Modified' textAlign='Left' [allowEditing]="true">
              </e-column>



            </e-columns>

          </ejs-grid>
        </div>
      </div>
    </div>
  </div>



import { Attribute, AttributeService } from '../../service/data/attribute.service';

import { Component, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { EditSettingsModel, GridComponent, RowSelectEventArgs, ToolbarItems, } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
import { DialogUtility } from '@syncfusion/ej2-angular-popups';
import { ActivatedRoute } from "@angular/router";
import { DocumentService } from '../../service/data/document.service';
import {DropDownListComponent} from '@syncfusion/ej2-angular-dropdowns';

@Component({
  selector: 'app-checklist',
  templateUrl: './checklist.component.html',
  styleUrls: ['./checklist.component.css']
})
export class ChecklistComponent implements OnInit {
  public editSettings: EditSettingsModel;
  public toolbar: ToolbarItems[] | object;

  public DialogObj;


  attributeName1: any=[];
  attributeName2: any=[];
 
  tesData112 = [];
  docName: any;
  docData = [];
  regex = "^$|^[A-Za-z0-9_ ]+";
  type = ["Text", "Numeric", "Date", "Boolean", "Custom Value"];
  showAttributeInput: boolean =false;
  showtext: boolean =false;
  checkType: any;




  @ViewChild('grid') public grid: GridComponent;
  @ViewChild('dropdown')
  public dropdownObject: DropDownListComponent;


  public position1: object = { X: '400', Y: '100' };
  public orderDateFormat: any = { type: "date", format: "MM/dd/yyyy" };
  activatedRoute: ActivatedRoute;
  checklistData: any;
  showtext1: boolean;
  showtext2: boolean;
  showtext3: boolean;
  attribute3: any;
  tesData113= [];
  seletedValue: any;
  attribute2: any;
  listObj2: DropDownListComponent;

  checked: boolean;


  constructor(private attributeService: AttributeService,private route: Router, private documentService: DocumentService) {

    actRoute: ActivatedRoute   // Activated route to get the current component's inforamation

this.checked=true;
  }


  ngOnInit() {
    this.getAllAttribute();
    this.getDocumentName();
    this.checkList();
   
   
   
    this.editSettings = { showDeleteConfirmDialog: false, allowEditing: true, allowAdding: true, allowDeleting: true };
    this.toolbar = ['Edit', 'Delete', 'Search', 'Add', 'Update', 'Cancel',

      {
        text: 'Clear', tooltipText: 'Clear Search',
        prefixIcon: 'e-cancel', id: 'clear', align: 'Right'
      },

    ];

  }




  data = ["Mandtory", "Not-mandotory", "character count ", "contains"];

  onCheckListSubmit(checkListForm) {

    
    console.log("Data:", checkListForm);

    let content = {
      "attributeName1": checkListForm.form.value.attributeName1,
      "condition": checkListForm.form.value.condition,
      "documentType": checkListForm.form.value.documentType,
      "type": checkListForm.form.value.type,
      "value1": checkListForm.form.value.value1,
      "value2": checkListForm.form.value.value2,

      "attributeName2": checkListForm.form.value.attributeName2,
      "checkType": checkListForm.form.value.check


    }

    this.documentService.saveCheckList(content).subscribe(respnse => {

      console.log("succes"+content);

    })
  }



  // compare(args){
  //  console.log(args);

  //  if(args.itemData.text)
  //  {
  //   args.itemData.text.remove();

  //  }else{

  //   args.itemData.text=args.itemData.value
  //  }
  // }    
    


  
    


  getAllAttribute() {
    this.attributeService.getAllAttribute().subscribe(response => {

      this.attributeName1 = response;
      this.attributeName2=response;
      console.log(this.tesData112)


      
      
      for (let j = 0; j < this.attributeName1.length; j++) {
        
        this.tesData112[j] = this.attributeName1[j].attributeName;
      }

      for (let j = 0; j < this.attributeName2.length; j++) {
        
     //   this.tesData113[j] = this.attributeName2[j].attributeName;
      }

      // var index;
    
      // for (var item = 0; item < this.attributeName2.length; item++) {
      //  // this.tesData113[item]=this.attributeName2[item].attributeName
      //   if (this.seletedValue == this.tesData112[item].Id) {
      //     index = item;
      //   }
      //  // this.tesData113[item]=this.attributeName2[item].attributeName;
      // }
      // this.tesData112.splice(index, 1);
      // this.listObj2.dataSource = null;
      // this.listObj2.dataSource = this.tesData113;
    
  

//to for second attribute

let  index=   this.attributeName2.findIndex(a=>a.attributeName ==this.seletedValue)
console.log(index)
if(index!=-1){
this.tesData113.splice(index, 1);
}

       for(let i = 0; i < this.attributeName2.length; i++) {
               let  index=   this.attributeName2.findIndex(a=>a.attributeName ==this.seletedValue)
             //let index=this.attributeName1.indexOf(this.seletedValue);
         //  this.tesData112[i] =  this.attributeName2.splice(index, 1);
                 this.tesData113[i] = this.attributeName2[i].attributeName;

         console.log(index)
         if(index!=-1){

          this.tesData113.splice(index, 1);
         }
        //  this.tesData113[i] = this.attributeName2[i].attributeName;

        // if(this.attributeName2[i].attributeName == this.seletedValue) {
        //  this.tesData113.splice(index, 1);
              
        //   }
     }

//      for (let j = 0; j < this.attributeName2.length; j++) {
       // const id=this.seletedValue
        
      //  if(this.attributeName2[j].attributeName!==id){
      //    this.tesData113.push(this.attributeName2[j]);
    //    }
        
  //    }
    


   //   const idx=this.attributeName1.indexOf(this.seletedValue)
     // const removedItem = this.attributeName2[idx];

      
      //const filteredItem = this.attributeName2.filter((id, index) => id === idx);
      //console.log(filteredItem)

    
    
    
      //let  index=   this.attributeName2.findIndex(a=>a.attributeName ==this.seletedValue)
    //console.log("index of array"+index);
    
      //this.attributeName2.splice(index,1);
      //console.log(this.attributeName2)

      //  for (let j = 0; j < this.attributeName2.length; j++) {

      //    if(this.attributeName2[j].attributeName==this.seletedValue){
         

      //     console.log("compared......."+this.attributeName2);
      //    }
       
        
       // this.tesData112[j] = this.attributeName2[j].attributeName;
        

        
 
    //}
    
    })
  }



  getDocumentName() {
    this.documentService.getAllDocuments().subscribe(
      response => {
        this.docName = response;
        for (let i = 0; i < this.docName.length; i++) {
          this.docData[i] = this.docName[i].documentName;
        }
      })
  }

  conditionData = [];
  onContractSelect(event) {
    var values = event.value;
    this.seletedValue=event.itemData.value;
    console.log("selected Value"+this.seletedValue);
//     for(let i = 0; i < this.attributeName2.length; i++) {
//       let  index=   this.attributeName2.findIndex(a=>a.attributeName ==this.seletedValue)
//     //let index=this.attributeName1.indexOf(this.seletedValue);
// //  this.tesData112[i] =  this.attributeName2.splice(index, 1);


// if(this.attributeName2[i].attributeName == this.seletedValue) {
// this.tesData113.splice(index, 1);
     
//  }
// }


this.getAllAttribute();
    if (values == 'Date') {
      this.conditionData = [];
      this.conditionData = ["Equal To", "Greater Than", "Less Than", "Between", "Not Equal To"]
    }

    if (values == 'Text') {
      this.conditionData = [];
      this.conditionData = ["Contains", "Not Contains", "All Caps", "Initial Caps"]
    }

    if (values == 'Numeric') {
      this.conditionData = [];
      this.conditionData = ["Greater Than", "Equal To", "Less Than", "Between", "Not Equal to"]
    }

    // if (values == 'Boolean') {
    //   this.conditionData = [];
    //   this.conditionData = ["Mandatory", "Non-Mandatory", "Yes", "No", "True", "False"]
    // }

    // if (values == 'Custom Value') {
    //   this.conditionData = [];
    //   this.conditionData = ["Mandatory"]
    // }


  }  
  onChange(event) {
 console.log(event)
 
    
    if (this.checkType =='normal' && event.itemData.value  == 'Between') {
      this.showtext1=true;      
      this.showtext2=true;
      this.showAttributeInput=false;
    }
    //  if(this.checkType.value=='normal')
    //   this.showtext1=true;
    //    this.showtext2=true;

    //  }
    //  else {
    //   this.showtext1=false;
    //   this.showtext2=false;
    //  }


    else if(this.checkType =='normal' && event.itemData.value  != 'Between'){
      this.showtext1=true;
      this.showAttributeInput=false;
      this.showtext2=false;

    }
  else if(this.checkType =='dependency')  {

    this.showAttributeInput=true;
    this.showtext1=false;
    this.showtext2=false;

  }

  }

  // compare(args){

    
  //   console.log("selected........"+ args.itemData.value);
  //   this.seletedValue=args.itemData.value;

    


  // }



  cancelCheckList() {

  }
   yesnoCheck(e) {

console.log(e)

this.checkType=e.value;

 if(e.value =='dependency'){
       this.showAttributeInput =true;
        this.showtext1=false;
        this.showtext2=false;
      
      }

     else{
     
       this.showAttributeInput =false;
//       this.showtext1=true;



      }
  

}






  /** if user click on the grid then below event will execute. */
  toolbarClick(args: ClickEventArgs): void {

    if (args.item.id.endsWith('edit')) {





    }
    if (args.item.id.endsWith('clear')) {

    }

    if (args.item.id.endsWith('add')) {

    }
  }

  actionBegin(args) {
    if (args.requestType === 'add') {
      this.route.navigate(['/dashboard/addNewCheckListComponent'])
    }
  }

  checkList() {

    this.documentService.getAllCheckListData().subscribe(response =>{
      this.checklistData=response;

      console.log(this.checklistData);
      
    })
  }
}



1 Reply
BC Berly Christopher Syncfusion Team September 15, 2021 08:16 AM UTC

Hi Sunil, 
  
Greetings from Syncfusion support. 
  
We have checked the shared code example and requested requirement. If you want to remove the particular item from the data source, we suggest you to use splice() method from the JavaScript. Also, if you want to add particular item in the component’s data source, then we suggest you to add that item with help of AddItem() method from the DropDownList’s instance.  
  
for (var i = 0; i < this.tesData112.length; i++) { 
    if (event.itemData.text === this.tesData113[i]) { 
      this.tesData113.splice(i, 1); 
    } 
  } 
 
if (values == 'Text') { 
    this.droptesData113.addItem('Date'); 
    this.conditionData = []; 
    this.conditionData = [ 
      'Contains', 
      'Not Contains', 
      'All Caps', 
      'Initial Caps' 
    ]; 
  } 
 
  
  
Please refer the below documentation to know more about add and remove item from the DropDownList component. 
  
  
  
Still facing issue means, please share any issue reproducing sample or data source details else modify the attached sample with reported issue that will help us to check and proceed further from our end. 
  
Regards, 
Berly B.C 


Loader.
Up arrow icon