I need to make a MultiSelect containing CheckboxGroup

[Jonathan]

Hello community, how are you?

I need to replicate a filter like the one in this image. This is inside a kendoGrid filter, but I can't replicate something similar with MultiSelect and CheckboxGroup. 

Supposedly this function is what makes this filter look like that:

function categoryDropdownEditor(container, options) {
        $('<input required data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                dataSource: fk_categoriesDatasource,
                dataTextField: "category",
                dataValueField: "id",
                filter: "contains",
                minLength: 1
            });
    }

My kendoGrid is configured like this:

$("#grid").kendoGrid({
        dataSource: dataSourceGrid,
       
        autoBind: true,
        scrollable: true,
        sortable: true,
        filterable: true,
        groupable: true,
        resizable: false,
        loaderType: "skeleton",
        pageable: {
            refresh: true,
            numeric: false,
            input: true,
            previousNext: true,
            alwaysVisible: true
        },
        noRecords: {
            template: function (e) {
                return "No hay datos disponibles.";
            }
        },
        columns: [
            {
                title: "Categoría",
                field: "category_id",
                dataTextField: "category",
                dataValueField: "id",
                editor: categoryDropdownEditor,
                filterable: {multi: true},
                dataSource: {
                    transport: {
                        read: {
                            url: apibaseurl + endpoint + "/categories",
                            type: "GET",
                            dataType: "json",
                            beforeSend: addToken,
                        },
                    },
                    schema: {
                        data: "data",
                        total: "total",
                        model: {
                            id: "id",
                            fields: {
                                category: {type: 'string'},
                            }
                        }
                    },
                },
            },
            
            {
                command: [
                    "edit",
                    {
                        name: " ",
                        iconClass: "k-icon k-i-more-vertical",
                    }
                ],
                title: " ",
                width: 210
            }],
        editable: "popup",
    });

I apologize if it is not understood or if I forgot to put something, it is my first post here.

Thank you very much for your attention.

Jonathan.

[Zornitsa]

Hi Jonathan,

Based on the provided information, I am not quite sure about the exact requirements regarding your desired scenario. Thus, It would be great if you could present some more specific details, explaining the functionality that you want to achieve.

I noticed from your code snippets that you have already set the filterable multi option to true, which should produce similar results as in the screenshot you had provided. For more information, I am linking our Demo about filtering the Grid data with the help of multi checkboxes: 

• https://demos.telerik.com/kendo-ui/grid/filter-multi-checkboxes 

Could you please elaborate if the mentioned approach matches your intention or if your desire is to replicate a specific custom filter, which uses the MultiSelect and CheckBoxGroup components?

In addition, I would like to inform you that the first code snippet with the categoryDropdownEditor function is responsible for setting a custom type of editor for a certain field and does not have a relation to the filter scenario that you want to achieve. You can take a look at the custom editor demo linked here where this si demonstrated: - https://demos.telerik.com/kendo-ui/grid/editing-custom

I am looking forward to your reply.

Regards,
Zornitsa
Progress Telerik