CODEWITHSUNDEEP
htmlangularkendo-gridkendo-ui-angular2
Muthu
Muthu

Reputation: 431

How to show/open dropdown list from upwards in Kendo Multiselect component for angular

I have used kendo Multiselect dropdown list on my page. When I click on it, it is opening the list from top to bottom(downwards). For my requirement, I need to show it from bottom to top(upwards).

I have checked with kendo UI angular documentation for multiselect component. There are no options are available for this change.

Please help me with this requirement thanks in advance.

<kendo-multiselect kendoMultiSelectSummaryTag [data]="data" (valueChange)="onChange($event)" [filterable]="true"
  [(ngModel)]="subValues" [textField]="textField" [valueField]="valueField" [clearButton]="false" [autoClose]="false"
  [value]="selectedValue" [popupSettings]="{popupClass: 'popupStyle'}" (keypress)="disableText($event)"
  (open)="onOpen($event)" (close)="onClose($event)">

  <ng-template kendoMultiSelectItemTemplate let-dataItem>
    <input type="checkbox" class="k-checkbox" [disabled]="selectedValue.length===1 && isItemSelected(dataItem.text)"
      [checked]="isItemSelected(dataItem.text)">
    <label class="k-checkbox-label">{{ dataItem.text }}</label>
  </ng-template>
  <ng-template kendoMultiSelectGroupTagTemplate let-dataItems>
    <span class="k-icon k-i-arrow-s"></span>
    {{ dataItems.length }} selected
  </ng-template>
</kendo-multiselect>

enter image description hereScreenshot is attached

Upvotes: 2

Views: 2350

Answers (1)

dev_in_progress
dev_in_progress

Reputation: 2494

Example: pop up position

$("#optional").kendoMultiSelect({
    autoClose: false,
    popup: {
        origin: "top left",
        position: "bottom left"
    },
    animation: {
        open: {
            effects: "slideIn:up"
        }
    }
}).data("kendoMultiSelect");

Explanation taken from: Telerik forum

...however, you should add some space above the widget. Otherwise, the screen boundary detection will not allow the desired behavior.

Upvotes: 1

Related Questions