I need to make a MultiSelect containing CheckboxGroup

1 Answer 43 Views
DropDownList Grid MultiSelect
Jonathan
Top achievements
Rank 1
Jonathan asked on 11 Aug 2023, 05:24 PM

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: "&nbsp;",
                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.

1 Answer, 1 is accepted

Sort by
0
Zornitsa
Telerik team
answered on 16 Aug 2023, 01:33 PM

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: 

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

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Tags
DropDownList Grid MultiSelect
Asked by
Jonathan
Top achievements
Rank 1
Answers by
Zornitsa
Telerik team
Share this question
or