Calling Developers!
We are reenergizing our code contribution process! Learn More

What are the Slack Archives?

It’s a history of our time together in the Slack Community! There’s a ton of knowledge in here, so feel free to search through the archives for a possible answer to your question.

Because this space is not active, you won’t be able to create a new post or comment here. If you have a question or want to start a discussion about something, head over to our categories and pick one to post in! You can always refer back to a post from Slack Archives if needed; just copy the link to use it as a reference..

Hey everyone, I am looking for a dropdown filter above the listing of the category module. same as

Options
U040LMJF6TY
U040LMJF6TY Posts: 30 🧑🏻‍🚀 - Cadet

Hey everyone,

I am looking for a dropdown filter above the listing of the category module. same as the image attached. can anyone tell me how can I add drop-downs there and how can I pass data to the backend on the change event to filter out records??

Comments

  • Alberto Reyer
    Alberto Reyer Lead Spryker Solution Architect / Technical Director Posts: 690 🪐 - Explorer
    Options

    You could fetch the table data again once a filter has changed and pass the filter value into the request as a query parameter.
    An example on how to use query parameters to set filters on a table can be found in \Spryker\Zed\ProductManagement\Communication\Controller\EditController::variantTableAction.

    For the GUI part there is no example to my knowledge, so this might be something you will need to implement on your own.

  • U040LMJF6TY
    U040LMJF6TY Posts: 30 🧑🏻‍🚀 - Cadet
    Options

    @UL6DGRULR

    How can I trigger the event ajax.reload of the listing table?? Do I need to add any custom js or is there any inbuilt function there??

  • Alberto Reyer
    Alberto Reyer Lead Spryker Solution Architect / Technical Director Posts: 690 🪐 - Explorer
    Options

    I think you can call $('<your table selector>').dataTable.api().ajax.reload()

    https://datatables.net/reference/api/ajax.reload()

  • U040LMJF6TY
    U040LMJF6TY Posts: 30 🧑🏻‍🚀 - Cadet
    Options

    Yes I know that, But from where can I override the JS code of datatable??

  • Alberto Reyer
    Alberto Reyer Lead Spryker Solution Architect / Technical Director Posts: 690 🪐 - Explorer
    Options

    You don't want to overwrite JS code of the data table at all. You need to add additional JS code that is executed.
    https://sprykercommunity.slack.com/archives/CKJRJM5FG/p1667463355018449?thread_ts=1667460311.167379&cid=CKJRJM5FG gives an example on how to add your own CSS, but same applies for JS as well.