Server side multiselect checkbox native component

[Kenji]

hai i want to ask about multiselect checkbox in native component. is there any reference about using it for server side process? i have a problem with columnsMenu filter to get data from another API. my case is that in grid table i using columnMenu filter multiselect checkbox and that data list in checkbox i got it from another API(master data city for example) but i still fail to implement it. really appreciate your help.
you can ask if my question is hard to understand because bad english

[Petar]

Hello, Kenji.

Just to be sure that we are on the same page, can you please confirm if the scenario you are talking about is the one demonstrated in this documentation demo or if it is something else?

Can you please share more details about your implementation?

I can see that you have a support license active for your account. If you don't want to share your code publicly, you can submit a support ticket with the details about your code and we will be happy to help you further with the resolution of the issue. 

[Kenji]

Hello Petar,
yes im using the scenario you ask about. i already successful implement grid table and columnMenu filter multiselect checkbox data from API but is there any way if my API have array of object like this [{id:1, name:USA},{id:2, name:spain},{id:3, name:japan}] and i want to send id as value when checked data? because what i found is that checkbox list data get from value that set in columns array like in this scenario demo
so for now when i checked data it will send city name not city id
if i want to share code, what you need to investigate my question?
i have this setup in array columns

columns: [

        { field: "selected", filterable: false, columnMenu: false, width: "50px", headerSelectionValue: this.areAllSelected },

        { field: 'no', title: 'No', filterable: false, columnMenu: false, hidden: false },

        { field: 'mem_id', title: 'ID', hidden: false },

        { field: 'mem_name', title: 'Name', cell: 'htmlTemplate', hidden: false },

        { field: 'mem_email', title: 'Email', hidden: false },

        { field: 'mem_mobile', title: 'Mobile', hidden: false },

        { field: 'mem_dob', title: 'Date of Birth', filter: 'date', hidden: false },

        { field: 'mem_nationality_name', title: 'Nationality', columnMenu: "filterCheckbox", hidden: false },

        { field: 'mem_country_name', title: 'Country', columnMenu: "filterCheckbox", hidden: false },

        { field: 'mem_last_employer', title: 'Last Employer', hidden: false },

        { field: 'mem_join_date', title: 'Register Date', filter: 'date', hidden: false },

        { field: 'blacklist', title: 'Blacklist', filter: 'boolean', hidden: false },

        { field: 'is_drafting', title: 'Draft', filter: 'boolean', hidden: false },

        { field: 'action', cell: "myTemplate", title: 'Action', filterable: false, columnMenu: false, hidden: false }

      ],

 

and this is my setup for multiselect checkbox element

<template v-slot:filterCheckbox="{ props }">

                      <custom

                        :column="props.column"

                        :filterable="props.filterable"

                        :filter="props.filter"

                        :unique-data="false"

                        :nationality="nationality"

                        @filterchange="handleFilterChange"

                        @closemenu="

                            () => {

                            props.onClosemenu();

                            }

                        "

                      />

                    </template>

<template>

    <div>

        <GridColumnMenuCheckboxFilter

          :column="column"

          :filter="filter"

          :filterable="filterable"

          :unique-data="uniqueData"

          :search-box="false"

          :data-items="nationality"

          :expanded="true"

          @filterchange="filterChange"

          @expandchange="expandChange"

          @closemenu="closeMenu"/>

    </div>

</template>

<script>

    import { GridColumnMenuCheckboxFilter } from '@progress/kendo-vue-grid';

   

    export default {

        props: {

            column: Object,

            nationality: Array,

            filter: Object,

            filterable: Boolean,

            uniqueData: {

                type: Boolean,

                default: true

            }

        },

        data () {

            return {

                items: []

            };

        },

        components: {

            'GridColumnMenuCheckboxFilter': GridColumnMenuCheckboxFilter

        },

        methods: {

            expandChange () {

                this.$emit('expandchange');

            },

            closeMenu () {

                this.$emit('closemenu');

            },

            filterChange (newDescriptor, e) {

                this.$emit('filterchange', newDescriptor, e);

            }

        }

    }

</script>

 nationality is array of object from API with property id and name

[Petar]

Hello, Kenji.

Thank you for the additional details. Based on them and if I am correctly understanding your scenario,  I can suggest you to do something like this in the filterChange method: 

filterChange(newDescriptor, e) {
    console.log(
    newDescriptor.filters[0].filters.map(
        (filter) =>
        (filter.value = products.find(
            (el) => el.ProductName === filter.value
        ).ProductID)
    )
    );
    this.$emit('filterchange', newDescriptor, e);
}

With the code in yellow, you will be able to pass the ProductID(the id in your scenario) field to the handleFilterChange method in the main.vue file of the example you sent us:

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

Additionally, the value(in green above) of the filter definition can be edited in a way that fits the requirements of your scenario. 

Have in mind that the above suggestion may introduce additional issues in the filtering definition that should be handled separately.

Check the suggested approach and let me know if it seems like a possible solution for your scenario.

Looking forward to your reply.

[Kenji]

Hi Petar,

 

it works and thanks for your help