Kendo-Drop-down with kendo-grid

[Kishore Kumar]

Hi 

I want to make use of kendo-grid with filterable in Kendo-Drop-down . I tried but open,close,focus,blur using is making difficulty.

if I am trying to do filter in grid drop-down is closing,am not able to filter the rows of grid which is in drop-down template

please suggest a method of using grid with filterable and drop-down functionalities.

[Martin]

Hi Kishore,

I am not sure that I understand correctly the issue that you are experiencing. What I am assuming is that a Kendo DropDownList needs to be used as a filter interface.

For more details on how to integrate the dropdown as a reusable gid filter, please check the following step by step article:

https://www.telerik.com/kendo-angular-ui/components/grid/filtering/reusable-filter/

If am wrong, please provide some more details about the use case, screenshots code snippet or any other information that might help us to understand better the scenario. Thank you in advance.

We are looking forward to your reply.

Regards,
Martin
Progress Telerik

[Kishore Kumar]

 <div class="example-wrapper">
      <kendo-dropdownlist
        [textField]="'text'"
        [valueField]="'value'"
        [value]="value"
        [popupSettings]="{
          width: 450
        }"
      >
        <ng-template kendoDropDownListHeaderTemplate>
          <kendo-grid
            [data]="listItems"
            [kendoGridSelectBy]="'value'"
            [selectedKeys]="gridSelection"
            [selectable]="true"
            [filterable]="true"
            (selectionChange)="onGridSelectionChange( $ event)"
          >
            <kendo-grid-column field="text" title="Text" width="40"></kendo-grid-column>
            <kendo-grid-column field="value" title="Value" width="40"></kendo-grid-column>
            <kendo-grid-column field="bart" title="Bart" width="40"></kendo-grid-column>
          </kendo-grid>
        </ng-template>
      </kendo-dropdownlist>
    </div>

 

 

Hi thank for ur support ,I attached the code snippet above . In that grid am not able to filter .

If I try to type in textbox the drop-down is closing.

[Martin]

Hi Kishore,

Thank you for additional details provided on this case.

In general, when the DropDownList is closed, the close event is emited. The event can be prevented, and the DropDownList will remain open. For more details check this article:

https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/open-state/#toc-preventing-opening-and-closing

When the dropdown should be close, the developer can use the toggle method, in order to close the popup programmatically. Here is an example demonstrating the suggestions:

https://stackblitz.com/edit/angular-zmsedq?file=app/app.component.ts

I hope this helps.

Regards,
Martin
Progress Telerik