Two multi select listbox am using when i check checkbox checked event not fired

Two multi select listbox am using when i check checkbox checked event not fired

Posted by: bemes9226 on 27 July 2021, 12:32 am EST

• 

  bemes9226

  • Post Options:
  • Link
    Copy

  Posted 27 July 2021, 12:32 am EST

  in angular 2,
  
  when check checkbox it is checked but am unable to get fired any event like
  
  checkedItemsChanged,checkedItems…
  
  but when i click content of the text it is fired.but when select checkbox only checked not fired.

  <wj-multi-select-list-box
  
  #listBox
  
  [showSelectAllCheckbox]=“showSelectAllCheckbox”
  
  (checkedItemsChanged)=“setAddData(listBox, $event)”
  
  (checkedItems)=“setCheckedItems(listBox,$event)”

      class="multiSelect"
      [itemsSource]="columnsAvailable"
      (ngModelChange)="modelChanged($event)"
  ></wj-multi-select-list-box>
  

• 

  bemes9226

  • Post Options:
  • Link
    Copy

  Posted 27 July 2021, 12:33 am EST - Updated 3 October 2022, 12:28 pm EST

  

• 

  bemes9226

  • Post Options:
  • Link
    Copy

  Posted 27 July 2021, 12:35 am EST

  event not fired only check box checked but when click on text it fired event
  
  checkedItemd

• 

  bemes9226

  • Post Options:
  • Link
    Copy

  Posted 27 July 2021, 7:42 am EST

  first time working fine but second time open popup and click on the checkbox only,not in text events not fired.when i clcik text it is fired

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 28 July 2021, 3:48 am EST

  Hi bemes9226,

  We are unable to replicate the issue at our end. And in the provided code snippet, We could observe that the checkedItems property is bind with a function while it should be bind with an array. That may be the cause of the issue.
  
  You may bind checkedItems property with an array. If the issue still persists. Kindly make changes to the below code sample to reproduce the issue -

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

  Regards,
  
  Ashwin

• 

  bemes9226

  • Post Options:
  • Link
    Copy

  Posted 15 September 2021, 3:30 pm EST - Updated 3 October 2022, 12:28 pm EST

  

  1324×501 44.4 KB

  
  
  i am getting this error when checkbox checked in listbox.
  
  checkeditemchanges not hitting .

• 

  bemes9226

  • Post Options:
  • Link
    Copy

  Posted 15 September 2021, 3:34 pm EST

  <wj-multi-select-list-box #listBox [showSelectAllCheckbox]=“true” style=“margin-top: 7px;”
  
  (checkedItemsChanged)=“setAddData(listBox)” class=“multiSelect”
  
  [itemsSource]=“columnsAvailable”
  
  >
  
  
  
  setAddData(s) {
  
  this.checkeditem = ;
  
  this.checkeditem.push(s.checkedItems);
  
  if (this.checkeditem.length >= 1) {
  
  this.isSelected = false;
  
  }
  
  }

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 16 September 2021, 12:01 am EST

  Hi,

  Sorry but I was unable to replicate the issue. It could be possible that there is some issue in your data source. Can you modify the sample below so that it replicates your issue?

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

  ~regards

• 

  bemes9226

  • Post Options:
  • Link
    Copy

  Posted 16 September 2021, 8:55 am EST

  for popup am using ngbootstrap(ngbModule).
  
  <ng-template #tanantName let-c=“close” let-d=“dismiss”>

  <div class="modal-header tenantStyle">
    <h1 class="modal-title">Assign Tenant</h1>
    <button type="button" class="close" aria-label="Close" (click)="c('Close click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
  <div class="row">
    <div class=" addStyles" style="background: #d5d6d8;width: 46%;margin-left: 2%;">
      <div class="addhead" style="padding: 7px;">
        <div style="width: 66%;float: left;margin-left: 9px;">
          <span class="bento-search">
            <input
              class="form-control"
              [(ngModel)]="AddSearch" (ngModelChange)="sharedVarChange($event)" (input)="columnsAvailable.refresh()"
              type="text"
              name="demoSearch"
              placeholder="Filter"
            />
          </span>
        </div>
      <div style="float: right;">
        <span>
          <button [disabled]="isSelected" class="btn btn-primary btn-sm" (click)="addColumn();" 
          style="float: left;margin-right: 12px;padding: 15px;">ADD<span style="margin-left: 4px;" class="bento-icon-chevron-medium-right"></span></button>
        </span>
      </div>
      
      </div>
      <div>                    -->
    <wj-multi-select-list-box #listBox [showSelectAllCheckbox]="true" style="margin-top: 7px;"
    (checkedItemsChanged)="setAddData(listBox,$event)" class="multiSelect"
   [itemsSource]="columnsAvailable" 
  >
  

    </div>
    <div class="removeStyles" style="background: #d5d6d8;width: 45%;">
      <div class="addhead" style="padding: 7px;">
        <span style="float: left;padding-left: 5px;">
          <button (click)="removeColumn();isRemoveSelected=true;" [disabled]="isRemoveSelected" class="btn btn-primary btn-sm" style="float: left;margin-right: 4px;padding: 15px;">
            <span style="margin-right: 4px;" class="bento-icon-chevron-medium-left" ></span>REMOVE</button>
        </span>
        <span class="bento-search" style="float: right;">
          <input
            class="form-control"
            [(ngModel)]="removeSearch" (ngModelChange)="sharedVarChange1($event)" (input)="TanantData.refresh()"
            type="text"
            name="demoSearch"
            placeholder="Filter"
          />
        </span>
      </div>
  
      <wj-multi-select-list-box
      #listBox1 style="margin-top: 7px;"
      (checkedItemsChanged)="setRemoveData(listBox1, $event)"
      [showSelectAllCheckbox]="showSelectAllCheckbox"
     class="multiSelect"
      [itemsSource]="TanantData"
     
  ></wj-multi-select-list-box> 
    </div>
  </div>
    
  </div>
    <div class="modal-footer" style="text-align: center;">
      <button type="button" class="btn btn-primary" (click)="getResultData();c('Close click')">OK</button>
      <button type="button" class="btn btn-outline-primary" (click)="c('Close click')">Cancel</button>
  
  </div>
  

  this.modalService.open(this.tanantName, {windowClass: ‘MainTemplate’,backdrop: ‘static’, keyboard: false});

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 20 September 2021, 8:37 am EST

  Hello,

  We apologize, but still, we are unable to replicate the issue at our end. Could you please provide a sample replicating the issue, You can either modify the sample below to replicate the issue:

  sample link:https://stackblitz.com/edit/ng-bootstrap-modals-7ntw4f?file=src%2Fapp%2Fmodal-content%2Fmodal-content.component.html

  In the above sample, I have used the code snippet provided by you in your response above, feel free to update the sample to replicate the issue and send us back so that we can provide you better assistance.

  Regards