Dropdownlist with an active footer.

[Krzysztof Wolski]

Hello,

I would like to achieve something like that. The user searches for a shipper from the list, if he does not find it, there is a footer at the bottom of the list that allows you to add a shipper. He types it, presses enter, and the new value appears in the list. At this point I can't do something like that because the footer is inactive. The input is there, but you can't step into it. Can anything be done about it? Some code below.

<e-column headerText="{{ 'Shipper' | translate }}">

<ng-template #template let-data>

<div>

<ejs-dropdownlist

[value]="data.ShipperId"

[dataSource]="shippersData"

[fields]="fields"

[footerTemplate]="footerTemplate"

>

ejs-dropdownlist>

div>

ng-template>

e-column>

e-columns>

ejs-grid>

<ng-template #footerTemplate="" let-data="">

<input

id="newShipper"

class="e-input"

type="text"

placeholder="{{ 'AddNewShipper' | translate }}"

/>

ng-template>

[UdhayaKumar Duraisamy]

Hi Krzysztof,

We suggest you try the ComboBox component which is similar to the DropdownList component. Both have similar functionalities and the ComboBox component will support Custom Values by making the AllowCustomvalue property true. Currently DropdownList component doesn’t support custom values. We have shared the documentation and online demo for your reference.

Kindly try the above suggestion and let us know if this meets your requirement.

Regards,  

Udhaya Kumar D.

[Krzysztof Wolski]

Thank you, that solved my case.

[Prince Oliver]

Most welcome. we are glad to assist you.