0

Good afternoon community, does anyone by chance know how I can add a select type filter to an adminhtml table grid and that additional internally include a search to filter options? As you can see in the image that I put as an example, until now I have only managed to create the select filter, but without the search, I leave an image of the code that I use.

Example

enter image description here

Code

enter image description here

Thanks fot your attention

1 Answer 1

1

You can try to clone the Asset dropdown. It is defined in vendor/magento/module-media-gallery-ui/view/adminhtml/ui_component/product_listing.xml

and it looks like this

<listingToolbar name="listing_top">
    <filters name="listing_filters">
          <filterSelect
            name="asset_id"
            provider="${ $.parentName }"
            sortOrder="10"
            class="Magento\MediaGalleryUi\Ui\Component\Listing\Filters\Asset"
            component="Magento_Ui/js/grid/filters/elements/ui-select"
            template="Magento_MediaGalleryUi/grid/filters/elements/ui-select">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="entityType" xsi:type="string">catalog_product</item>
                    <item name="identityColumn" xsi:type="string">entity_id</item>
                    <item name="filterOptions" xsi:type="boolean">true</item>
                    <item name="searchOptions" xsi:type="boolean">true</item>
                    <item name="filterPlaceholder" xsi:type="string" translate="true">Asset Title</item>
                    <item name="emptyOptionsHtml" xsi:type="string" translate="true">Start typing to find assets</item>
                    <item name="filterRateLimit" xsi:type="string" translate="true">1000</item>
                    <item name="filterRateLimitMethod" xsi:type="string" translate="true">notifyWhenChangesStop</item>
                    <item name="searchUrl" xsi:type="url" path="media_gallery/asset/search" />
                    <item name="validationUrl" xsi:type="url" path="media_gallery/asset/getSelected"/>
                    <item name="levelsVisibility" xsi:type="number">1</item>
                </item>
            </argument>
            <settings>
                <caption translate="true">– Please Select assets –</caption>
                <label translate="true">Asset</label>
                <dataScope>asset_id</dataScope>
                </settings>
        </filterSelect>
    </filters>
</listingToolbar>
3
  • Thanks it's just what I needed
    – GStiven
    Nov 22, 2022 at 14:28
  • Do you happen to know how I can load default options? The select always starts empty
    – GStiven
    Nov 22, 2022 at 14:29
  • 1
    I have no idea. I think that's the point of it. to start empty so to lazy load the options
    – Marius
    Nov 29, 2022 at 14:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.