Single selection without checkboxes

[harishlyadav]

Hello Buddy,

I have requirement from my client, that while single selection please hide the checkboxes. so can you please help me to that. Thanks, Harish

[NileshPatel17]

How about having radio button for single selection?? that will make more sense.

[tinuverma]

was this ever done? I am using this control and would to have radio button instead of chkbox when the mode is single select. Also for idField, how can I bind the whole object instead of just the id value?

[garthmountain]

Great control, thanks very much. I have the same request from my users, either radio buttons or nothing at all. Any news on this?

[NileshPatel17]

@garthmountain @tinuverma I agree radio button makes more sense in case of single selection. soon it will be done.

[NileshPatel17]

was this ever done? I am using this control and would to have radio button instead of chkbox when the mode is single select. Also for idField, how can I bind the whole object instead of just the id value?

Please refer example code.

[boginaathan]

Solution

HTML

<ng-multiselect-dropdown name="country" [placeholder]="'Select City'" [data]="countries" [(ngModel)]="selCountries" [settings]="dropdownSettings" class="singleselect"

ts

this.dropdownSettings = { singleSelection: true, idField: "item_id", textField: "item_text", allowSearchFilter: true };

style.css (src/style.css)

.singleselect .multiselect-item-checkbox { padding: 0px !important; } .singleselect input[type=checkbox]+div:before { display: none; }

.singleselect input[type=checkbox]+div:after { display: none; }

.singleselect input[type=checkbox]+div { padding: 6px 10px !important; }

.singleselect input[type=checkbox]:checked+div { background-color: #337ab7 !important; color: #fff !important; }

[aarti-gaikwad]

Not working this code

[ShivamTiwari0010]

::ng-deep .dropdown-list ul li.multiselect-item-checkbox div:before { display: none; } ::ng-deep .dropdown-list ul li.multiselect-item-checkbox div:after { display: none; } ::ng-deep .dropdown-list ul li.multiselect-item-checkbox div { padding-left: 0 !important; }