Issue with Grid custom filterCell

[Adarsha]

Hello all,

Facing some issue with rendering filterCell with a custom component.  This was working fine with Vue 2, and seems broken after we upgraded our application to Vue 3 and latest Kendo UI.

https://stackblitz.com/edit/dwpfqucx?file=src%2Fmain.vue%3AL18

Requesting for help, as we are stuck upgrading to latest Kendo UI

[Adarsha]

@Vessy, @Filip Requesting for help

[Vessy]

Hello, Adarsha,

You can see a sample demonstrating how to implement a custom filter cell in the Grid in the following section of our documentation:

• https://www.telerik.com/kendo-vue-ui/components/grid/filtering/filter-row#customizing-the-filter-row 

Basically, moving the defined custom filterCell to a slot template inside the Grid allowed me to run the provided by you setup successfully. You can access the runnable version below:

• https://stackblitz.com/edit/dwpfqucx-wzkhjkrj?file=src%2Fmain.vue 

Regards,
Vessy
Progress Telerik

[Adarsha]

Hello Vessy,

Thank you very much for your suggestion. However, since in our application we wrap Grid with one more component and reuse the wrapper across our application. So your suggested solution was not working. I explored the option of Render Function to render the filter cell and it is working fine now.

Solution below, if anyone else facing same issue

Replace below

checkBoxAllCell = {
    .....
    data() {},
    template: ``,
    .....
}
export default {
    ...
    data() {
        return {
            ...
            columns = [
                {
                    field: 'isActive',
                    filterCell: checkBoxAllcell,
                    ...
                }
            ],
            ...
        }
    }
}
 

with

import { markRaw, h } from 'vue';

export default {
    ...,
    setup() {
        function renderCheckBoxAllCell() {
            return h('div', h(markRaw(checkBoxAllCell)));
        }
    },
    data() {
        return {
            columns = [
                {
                    field: 'isActive',
                    filterCell: this.renderCheckBoxAllCell,
                    ...
                }
            ],
        }
    }
}

[Vessy]

Thanks a lot for the update, Adarsha, I am glad you have found a solution which is applicable to your scenario!