columns filter multiselect checkbox search box grid table

[Kenji]

Hi i want to ask about search in columns filter grid table multiselect checkbox like in this demo Link

so i want to trigger function and hit API when search data in multiselect checkbox. is there any way to achieve it? i tried following some way from doc but still fail to implement
my code right now :

<GridColumnMenuCheckboxFilter :column="props.column"

           :filterable="props.filterable" :filter="props.filter"

          :unique-data="false" :search-box="true" :expanded="true"

           :data-items="cities" @filterchange="filterCityGrid"

           @expandchange="expandChange" @closemenu="

           () => {

              props.onClosemenu();

           }" />

filterCityGrid(newDescriptor, e) {

            newDescriptor.filters[0].filters.map(

                (filter) =>

                (filter.value = this.cities.find(

                    (el) => el.mem_city_placed_name === filter.value

                ).id)

            )

            this.handleFilterChange(newDescriptor, e);

        },

expandChange() {

            this.$emit('expandchange');

        },

[Petar]

Hi, Kenji. 

Thank you for the shared details. If I am correctly understanding your scenario, you want to get the checkbox values selected in the Grid's columns and make an API call by providing these filter values to the remote service that will return the result you need. Is this correct? 

If the above suggestion is correct, if we use the example you shared as a basis, I would suggest you apply modifications in the handleFilterChange method inside the main.vue file. In the example you sent us, the handleFilterChange method is defined like this:

handleFilterChange: function (filter) {
  this.dataState = {
    ...this.dataState,
    filter: filter,
  };
  this.result = process(products.slice(0), this.dataState);
}

What we can do instead of the above is to:

1. Get the filter object and extract the values that we need to send to the remote service
2. Create an API call with the values from point 1
3. Receive the result from the remote service and pass it to the result variable.
4. Keep the code in yellow to update the dataState.filter value that is needed to correctly display the Grid's column menus

I am using this post to share that you have a Priority support license associated with your account. Having such a license you can submit support tickets that will be handled in up to 24 hours period during the work days. Next time you need assistance with a specific scenario, I would suggest you submit a support ticket. 

I hope the above details help you achieve what you need in your application. 

[Kenji]

Hi Petar,

sorry if my question is confusing. im not asking about how to hit API when selecting value in dropdown checkbox but hit API when search value in dropdown checkbox. so when property filter is true there will be an input box and can search values in dropdown list right? so i wanted to hit API again when search value. i uploaded image for your reference

and where is submit a support ticket menu? thanks

[Petar]

Hi, Kenji. 

Thank you for the additional details about the targeted functionality. The filterChange event defined for the GridColumnMenuCheckboxFilter component is triggered when the "Filter" button part of the column menu is clicked. 

If you need to trigger an API call when the value of the filter input is changed, this can be achieved using a not-that-beautiful approach.

Here is a StackBlitz example in which we have the following definition in the main.vue file.

mounted() {
  const that = this;
  document
    .querySelectorAll('.k-grid-header-menu.k-grid-column-menu')
    .forEach((item, index) => {
      item.addEventListener('click', (el) => that.menuClicked(index));
    });
}

The above code adds a click listener to the column menus of each column. 

The menuClick method can be defined as follows and thus we will dynamically bind an input event to the filter input that is part of the column filter. 

menuClicked(el) {
  if (el === 1) {
    setTimeout(() => {
      document
        .querySelector('.k-list-filter')
        .removeEventListener('input', function () {});
      document
        .querySelector('.k-list-filter')
        .addEventListener('input', function (el) {
          console.log(el.target.value);
        });
    });
  }
}

If you change the code in green with a method that makes an API call, you can make a server filtering and thus achieve what you need in your application. In the above snippet, the input event is triggered only for the second column of the Grid but the same logic can be used for all columns.

I hope the above suggestion will help you achieve what you need in your application.

Talking about the support tickets' submission, here is what you should do:

1. Go to https://www.telerik.com/account/ (You should be logged)
2. Click on "Support Center"
3. Click on "Contact us"
4. Select "Technical support"
5. Select "Kendo UI for Vue"
6. Select the product for which you want to submit a new ticket
7. Follow the instructions on the screen

If you need additional assistance with the current thread, you can submit a support ticket using the above instructions and we will handle the ticket according to your support plan.

Regards.

[Kenji]

Hi Petar,

i tried your solution but still fail to implement. nothing show in console when search checkbox value. looks like menuClicked method is not triggered. i use code exactly like you share.

i forgot to tell you that i use nuxt 2 to implement every component from kendo ui

[Kenji]

Hi Petar,

i found a way to implement your solution and thanks for help

[Petar]

Hi, Kenji.

I am happy to hear that the shared details helped you achieve what you need in your application. 

Last but not least, a recommendation from our side is to submit support tickets for future questions. The support tickets are handled faster and with priority compared to the forum threads.