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

user_3747958 0
Viewed 1417

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

kendo-ui-angular2 kendo-grid angular html
1 Answers

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.

user_33309470
Related