1. Home
  2. Forum
  3. Angular - EJ 2
  4. Multiselect disable

Multiselect disable

I am using a multiselect dropdown,
In the dropdown list i have a  combined item as Pod A & Pod B togeather, when i select this item
i want to disable Pod A or Pod B individual selection




13 Replies 1 reply marked as answer
PM Ponmani Murugaiyan Syncfusion Team May 24, 2021 06:49 AM UTC

Hi vin, 

Thanks for contacting Syncfusion support. 

We have already considered the reported requirement “Need to provide support for disable and selected fields the particular item in dropdownlist” as feature at our end. It will be included in the any of the upcoming release. You can now track the reported feature from the below feedback link,   
    

Until then, we suggest you to achieve your requirement using the below work-around solution, when selecting the item you can disable the specific items in the list using the select event as like below code snippet.  

1.Here we added the custom class to the component using cssClass property, in order to get the licollections for unique Dropdownlist component. 

<ejs-multiselect id="multiselect-checkbox" #checkbox [dataSource]="countries" [placeholder]="checkWaterMark" [fields]="checkFields" [mode]="mode" [popupHeight]="popHeight" [showDropDownIcon]="true" showSelectAll="true" cssClass="custom" [filterBarPlaceholder]="filterPlaceholder" (select)="onSelect($event)" (filtering)="onFilter($event)"></ejs-multiselect> 


2.While selecting the item “Pod A & Pod B”, we compared the list items and disabled by adding the class ‘e-disabled’ and ‘e-overlay’. 

public onSelect(args) { 
    if (args.itemData.Code == '5') { 
      var liCollections = document.querySelectorAll('.e-popup.custom .e-list-item'); 
      for (var i = 0; i < liCollections.length; i++) { 
        if ((liCollections[i] as any).innerText == 'Pod A') { 
          liCollections[i].classList.add('e-disabled'); 
          liCollections[i].classList.add('e-overlay'); 
        } 
      } 
    } 
  } 

3. Also when filtering, you need to disable the licollections as like below code snippet to meet your requirement. 

public onFilter(args) { 
    if (this.mulObj.value && this.mulObj.value.includes('5' as never)) { 
        setTimeout(() => { 
        var liCollections = document.querySelectorAll('.e-popup.custom .e-list-item'); 
        for (var i = 0; i < liCollections.length; i++) { 
            if ((liCollections[i] as any).innerText == 'Pod A') { 
            liCollections[i].classList.add('e-disabled'); 
            liCollections[i].classList.add('e-overlay'); 
            } 
        } 
        }, 10); 
    } 
} 

Output: 

 


Regards, 
Ponmani M 
 


Marked as answer
VI vin May 25, 2021 01:25 AM UTC

Thanks for quick reply
Before disabling 'Pod A', how do i uncheck it if it is already checked?


PM Ponmani Murugaiyan Syncfusion Team May 25, 2021 06:56 AM UTC

Hi vin, 

Thanks for the update. 

Query: Before disabling 'Pod A', how do i uncheck it if it is already checked? 
 
As per our requirement, before disabling the item you can check whether the item is checked or not using the class ‘e-check’. If it is checked you can uncheck by removing this class as per the below highlighted code snippet. 

public onSelect(args) { 
    if (args.itemData.Code == '5') { 
      var liCollections = document.querySelectorAll('.e-popup.custom .e-list-item'); 
      for (var i = 0; i < liCollections.length; i++) { 
        if ((liCollections[i] as any).innerText == 'Pod A') { 
          if (liCollections[i].querySelector('.e-check')) { 
            liCollections[i].querySelector('.e-check').classList.remove('e-check'); 
          } 
          liCollections[i].classList.add('e-disabled'); 
          liCollections[i].classList.add('e-overlay'); 
        } 
      } 
    } 
  } 



Regards, 
Ponmani M 


VI vin May 26, 2021 02:48 AM UTC

Thanks

How do i receive the selected values on form submit?
I am using template for multiselect in a grid.


<e-column  headerText='Pod Assignment'
                                                                textAlign='Left' width=90>
                                                                <ng-template #template let-data>
                                                                    <div>
                                                                      
                                                                        <ejs-multiselect #multiselectCheckbox name="multiselectCheckbox"
                                                                        id="multiselectCheckbox" [dataSource]='aPods' [placeholder]='checkWaterMark'
                                                                        [fields]='podFields' [mode]='mode' [popupHeight]='popHeight'
                                                                        [showDropDownIcon]='true' showSelectAll='true'
                                                                        [(ngModel)]="data.podSelValue" [filterBarPlaceholder]='filterPlaceholder' cssClass="custom-{{data.itemId}}" 
                                                                        [value]="data.podSelValue">
                                                                    </ejs-multiselect>
                                                                    </div>
                                                                </ng-template>
                                                            </e-column>



VI vin May 26, 2021 09:29 PM UTC

Any help please?

PM Ponmani Murugaiyan Syncfusion Team May 27, 2021 10:40 AM UTC

Hi Vin,  
  
Query : How do i receive the selected values on form submit?  
  
We checked your query with provided screenshot and before proceeded your query, we need to confirm that you want to get all the row details or specific row of selected values by multiselect dropdown while click on submit button. Since kindly ensure to us it will help to validate further.  
  
Regards,  
Ponmani M 


VI vin May 27, 2021 09:36 PM UTC

All rows Thanks

PM Ponmani Murugaiyan Syncfusion Team May 28, 2021 02:55 PM UTC

Hi Vin,  
   
Query : How do i receive the selected values on form submit?    
   
To achieve your requirement, we suggest you use blur event of Multiselect Dropdown component. In this event, we get the change value when focus-out from Multiselect Dropdown and it will update to Grid dataSource using setRowData method of Grid.  
   
Now you can get the updated Grid row details using Grid’s dataSource property while click on submit button  
   
Note: You should define the column.isPrimaryKey property in unique Grid’s column.  
   
Please refer the below code example and sample for more information. 

[app.component.html]  
 <button (click)="saveAction($event)">Submit</button>  
  <ejs-grid  
    #grid  
    [dataSource]="data"  
    allowPaging="true"  
    [pageSettings]="pageSettings"  
    [allowSorting]="true"  
  >  
    <e-columns>  
      <e-column  
        field="Feature"  
        [isPrimaryKey]="true"  
        headerText="Feature"  
        width="120"  
        textAlign="Right"  
      ></e-column>  
      <e-column headerText="Pod Assignment" width="150">  
        <ng-template #template let-data>  
          <div>  
            <ejs-multiselect  
              #multiselectCheckbox  
              name="multiselectCheckbox"  
              id="multiselectCheckbox"  
              [dataSource]="aPods"  
              [placeholder]="checkWaterMark"  
              [fields]="podFields"  
              [mode]="mode"  
              [popupHeight]="popHeight"  
              [showDropDownIcon]="true"  
              showSelectAll="true"  
              [(ngModel)]="data.podAssign"  
              [value]="data.podAssign"  
              (blur)="multiSelectFocusout($event)"  
            >  
            </ejs-multiselect></div  
        ></ng-template>  
      </e-column>  
    </e-columns>  
  </ejs-grid> 

[app.component.ts]  
 saveAction(args) {  
    console.log(this.grid.dataSource);  
  }  
  multiSelectFocusout(args) {  
      
    if ((event as Event).target.classList.contains('e-dropdownbase')) {  
      var multiSelectDropdown = event.target.closest('.e-multiselect')  
        .parentElement.ej2_instances[0];  
      var rowObj = this.grid.getRowInfo(event.target);  
      rowObj.rowData['podAssign'] = multiSelectDropdown.value;  
      this.grid.setRowData(  
        this.grid.getPrimaryKeyFieldNames()[0],  
        rowObj.rowData  
      );  
    }  
  } 

   
                                          https://ej2.syncfusion.com/angular/documentation/api/grid/#setrowdata   
   
Please get back to us, if you need further assistance.  
   
Regards,  
Ponmani M 


VI vin June 1, 2021 03:39 AM UTC

I am getting compile error for the squiggle's from your example classList and closest
I am using Angular 9

z





From Package.json


"@angular/animations": "^9.1.13",
    "@angular/common": "^9.1.13",
    "@angular/compiler": "^9.1.13",
    "@angular/core": "^9.1.13",
    "@angular/forms": "^9.1.13",
    "@angular/platform-browser": "^9.1.13",
    "@angular/platform-browser-dynamic": "^9.1.13",
    "@angular/router": "^9.1.13",
    "@syncfusion/ej2-angular-base": "*",
    "@syncfusion/ej2-angular-buttons": "*",
    "@syncfusion/ej2-angular-calendars": "*",
    "@syncfusion/ej2-angular-charts": "*",
    "@syncfusion/ej2-angular-diagrams": "*",
    "@syncfusion/ej2-angular-dropdowns": "*",
    "@syncfusion/ej2-angular-gantt": "*",
    "@syncfusion/ej2-angular-grids": "*",
    "@syncfusion/ej2-angular-heatmap": "*",
    "@syncfusion/ej2-angular-inputs": "*",
    "@syncfusion/ej2-angular-kanban": "*",
    "@syncfusion/ej2-angular-navigations": "*",
    "@syncfusion/ej2-angular-notifications": "*",
    "@syncfusion/ej2-angular-popups": "*",
    "@syncfusion/ej2-angular-progressbar": "*",
    "@syncfusion/ej2-angular-richtexteditor": "*",
    "@syncfusion/ej2-angular-spreadsheet": "*",
    "@syncfusion/ej2-base": "*",
    "@syncfusion/ej2-buttons": "*",
    "@syncfusion/ej2-calendars": "*",
    "@syncfusion/ej2-charts": "*",
    "@syncfusion/ej2-diagrams": "*",
    "@syncfusion/ej2-dropdowns": "*",
    "@syncfusion/ej2-gantt": "*",
    "@syncfusion/ej2-grids": "*",
    "@syncfusion/ej2-heatmap": "*",
    "@syncfusion/ej2-inputs": "*",
    "@syncfusion/ej2-kanban": "*",
    "@syncfusion/ej2-navigations": "*",
    "@syncfusion/ej2-notifications": "*",
    "@syncfusion/ej2-popups": "*",
    "@syncfusion/ej2-progressbar": "*",
    "@syncfusion/ej2-richtexteditor": "*",
    "@syncfusion/ej2-spreadsheet": "*",
    "@syncfusion/ej2-layouts": "*",
    "@syncfusion/ej2-angular-layouts": "*",
    "bootstrap": "^4.5.2",
    "classlist.js": "^1.1.20150312",
    "install": "^0.13.0",
    "jquery": "^3.6.0",
    "moment": "^2.29.1",
    "ngx-moment": "^5.0.0",
    "popper.js": "^1.16.1",
    "rxjs": "6.5.5",
    "ts": "^0.2.2",
    "tslib": "^1.10.0",
    "xlsx": "^0.16.9",
    "zone.js": "~0.10.2"



ALso when there is a validation error, i need to show. when data.isError is true
The error is not reflecting
When i refresh the grid.refresh() to show the error, the new selections are getting reset in Multiselect

How do i show error and retain values in multiselect
<ejs-grid #gridCAssignments [dataSource]='aPodAssignments'
                                                        [allowPaging]='true' [allowSorting]='true'
                                                        [pageSettings]='pageOptions' [allowFiltering]='true'
                                                        [filterSettings]='filterOptions' [allowResizing]='true'>

                                                        <e-columns>
                                                            <e-column field='name' headerText='Feature' textAlign='Left'
                                                                width=90>e-column>

                                                            <e-column headerText='Pod Assignment' textAlign='Left'
                                                                width=90>
                                                                <ng-template #template let-data>
                                                                    <div>

                                                                        <ejs-multiselect #multiselectCheckbox
                                                                            name="multiselectCheckbox"
                                                                            id="multiselectCheckbox"
                                                                            [dataSource]='aPods'
                                                                            [placeholder]='checkWaterMark'
                                                                            [fields]='podFields' [mode]='mode'
                                                                            [popupHeight]='popHeight'
                                                                            [showDropDownIcon]='true'
                                                                            showSelectAll='true'
                                                                            [filterBarPlaceholder]='filterPlaceholder'
                                                                            cssClass="custom-{{data.itemId}}"
                                                                            [(ngModel)]="data.podSelValue"  [value]="data.podSelValue" 
                                                                            (change)="changevalue($event, data)" >
                                                                        ejs-multiselect>
                                                                        
                                                                        <div *ngIf=" data.isError"
                                                                            class="alert alert-danger">                                                                           
                                                                                Cannot select group items with individual items.                                                                            
                                                                        div>
                                                                    div>
                                                                ng-template>
                                                            e-column>
                                                          

                                                        e-columns>
                                                    ejs-grid>






VI vin replied to vin June 1, 2021 02:06 PM UTC

I am getting compile error for the squiggle's from your example classList and closest
I am using Angular 9

z





From Package.json


"@angular/animations": "^9.1.13",
    "@angular/common": "^9.1.13",
    "@angular/compiler": "^9.1.13",
    "@angular/core": "^9.1.13",
    "@angular/forms": "^9.1.13",
    "@angular/platform-browser": "^9.1.13",
    "@angular/platform-browser-dynamic": "^9.1.13",
    "@angular/router": "^9.1.13",
    "@syncfusion/ej2-angular-base": "*",
    "@syncfusion/ej2-angular-buttons": "*",
    "@syncfusion/ej2-angular-calendars": "*",
    "@syncfusion/ej2-angular-charts": "*",
    "@syncfusion/ej2-angular-diagrams": "*",
    "@syncfusion/ej2-angular-dropdowns": "*",
    "@syncfusion/ej2-angular-gantt": "*",
    "@syncfusion/ej2-angular-grids": "*",
    "@syncfusion/ej2-angular-heatmap": "*",
    "@syncfusion/ej2-angular-inputs": "*",
    "@syncfusion/ej2-angular-kanban": "*",
    "@syncfusion/ej2-angular-navigations": "*",
    "@syncfusion/ej2-angular-notifications": "*",
    "@syncfusion/ej2-angular-popups": "*",
    "@syncfusion/ej2-angular-progressbar": "*",
    "@syncfusion/ej2-angular-richtexteditor": "*",
    "@syncfusion/ej2-angular-spreadsheet": "*",
    "@syncfusion/ej2-base": "*",
    "@syncfusion/ej2-buttons": "*",
    "@syncfusion/ej2-calendars": "*",
    "@syncfusion/ej2-charts": "*",
    "@syncfusion/ej2-diagrams": "*",
    "@syncfusion/ej2-dropdowns": "*",
    "@syncfusion/ej2-gantt": "*",
    "@syncfusion/ej2-grids": "*",
    "@syncfusion/ej2-heatmap": "*",
    "@syncfusion/ej2-inputs": "*",
    "@syncfusion/ej2-kanban": "*",
    "@syncfusion/ej2-navigations": "*",
    "@syncfusion/ej2-notifications": "*",
    "@syncfusion/ej2-popups": "*",
    "@syncfusion/ej2-progressbar": "*",
    "@syncfusion/ej2-richtexteditor": "*",
    "@syncfusion/ej2-spreadsheet": "*",
    "@syncfusion/ej2-layouts": "*",
    "@syncfusion/ej2-angular-layouts": "*",
    "bootstrap": "^4.5.2",
    "classlist.js": "^1.1.20150312",
    "install": "^0.13.0",
    "jquery": "^3.6.0",
    "moment": "^2.29.1",
    "ngx-moment": "^5.0.0",
    "popper.js": "^1.16.1",
    "rxjs": "6.5.5",
    "ts": "^0.2.2",
    "tslib": "^1.10.0",
    "xlsx": "^0.16.9",
    "zone.js": "~0.10.2"



ALso when there is a validation error, i need to show. when data.isError is true
The error is not reflecting
When i refresh the grid.refresh() to show the error, the new selections are getting reset in Multiselect

How do i show error and retain values in multiselect
<ejs-grid #gridCAssignments [dataSource]='aPodAssignments'
                                                        [allowPaging]='true' [allowSorting]='true'
                                                        [pageSettings]='pageOptions' [allowFiltering]='true'
                                                        [filterSettings]='filterOptions' [allowResizing]='true'>

                                                        <e-columns>
                                                            <e-column field='name' headerText='Feature' textAlign='Left'
                                                                width=90>e-column>

                                                            <e-column headerText='Pod Assignment' textAlign='Left'
                                                                width=90>
                                                                <ng-template #template let-data>
                                                                    <div>

                                                                        <ejs-multiselect #multiselectCheckbox
                                                                            name="multiselectCheckbox"
                                                                            id="multiselectCheckbox"
                                                                            [dataSource]='aPods'
                                                                            [placeholder]='checkWaterMark'
                                                                            [fields]='podFields' [mode]='mode'
                                                                            [popupHeight]='popHeight'
                                                                            [showDropDownIcon]='true'
                                                                            showSelectAll='true'
                                                                            [filterBarPlaceholder]='filterPlaceholder'
                                                                            cssClass="custom-{{data.itemId}}"
                                                                            [(ngModel)]="data.podSelValue"  [value]="data.podSelValue" 
                                                                            (change)="changevalue($event, data)" >
                                                                        ejs-multiselect>
                                                                        
                                                                        <div *ngIf=" data.isError"
                                                                            class="alert alert-danger">                                                                           
                                                                                Cannot select group items with individual items.                                                                            
                                                                        div>
                                                                    div>
                                                                ng-template>
                                                            e-column>
                                                          

                                                        e-columns>
                                                    ejs-grid>






Need help please

PM Ponmani Murugaiyan Syncfusion Team June 1, 2021 02:29 PM UTC

Hi Team,  
   
Please find the notes below.  
   
Query: I am getting compile error for the squiggle's from your example classList and closest  
   
We have checked your screenshot and able to reproduce the reported type cast issue at our end. So, we have taken our previous sample and changed the type of the event to FocusEvent instead of Event in the blur event to resolve the issue.   

App.component.ts  
   
  multiSelectFocusout(args) {  
    var target = (event as FocusEvent).target as Element;  
    if (target.classList.contains('e-dropdownbase')) {  
      var multiSelectDropdown = (parentsUntil(target, 'e-multiselect', false)  
        .parentElement as EJ2Intance).ej2_instances[0];  
      var rowObj = this.grid.getRowInfo(target);  
      rowObj.rowData['podAssign'] = multiSelectDropdown.value;  
      this.changedData.push(rowObj.rowData);  
      this.grid.setRowData(  
        this.grid.getPrimaryKeyFieldNames()[0],  
        rowObj.rowData  
      );  
    }  
  } 

Query: When i refresh the grid.refresh() to show the error, the new selections are getting reset in Multiselect How do i show error and retain values in multiselect 

Based on your query we suspect that you want to maintain the multiselect component data when you call the refresh method of the Grid component. By default, in your Grid application you have rendered the multiselect dropdown component as column template, so the selected values of the multiselect component will be reset based on the dataSource values.  
   
So, to avoid this we have used the setRowData method to update the changed values of the multiselect component to our dataSource with blur event. You can use the same way to update the data before refreshing the Grid component in your application. We have also stored the changed values using the blur event and you can access the changed rows in the button click event of the submit button. For your convenience we have attached the sample please refer them for your reference. 

App.component.ts  
   
  saveAction(args) {  
    console.log(this.changedData); // Get the Grid rows based on selected multiselect dropdown items  
    this.changedData = []; // we have reset the changed data here  
  }  
  
  multiSelectFocusout(args) {   
    var target = (event as FocusEvent).target as Element;  
    if (target.classList.contains('e-dropdownbase')) {  
      var multiSelectDropdown = (parentsUntil(target, 'e-multiselect', false)  
        .parentElement as EJ2Intance).ej2_instances[0];  
      var rowObj = this.grid.getRowInfo(target);  
      rowObj.rowData['podAssign'] = multiSelectDropdown.value;  
      this.changedData.push(rowObj.rowData);  
      this.grid.setRowData(  
        this.grid.getPrimaryKeyFieldNames()[0],  
        rowObj.rowData  
      );  
    }  
  } 

   
Regards,  
Ponmani M 


VI vin June 5, 2021 11:39 PM UTC

I am not seeing e-dropdownbase in classList



target.classList.contains('e-dropdownbase')



BS Balaji Sekar Syncfusion Team June 7, 2021 01:40 PM UTC

Hi Vin, 

We have created a new incident under your Direct trac account to follow up with this query. We suggest you follow up with the incident for further updates. 

Please log in using the below link.   
  
  
Regards,  
Balaji Sekar. 


Loader.
Up arrow icon