Open Filter dropdown of Kendo Grid to the Left side using JQuery.

1 Answer 7 Views
Filter General Discussions Grid Styling
Rohan
Top achievements
Rank 1
Rohan asked on 26 Mar 2024, 10:54 AM

I have a kendoGrid with filterable columns using jQuery. Let's say I have a column named Title. When I click on filter icon besides the column name a dropdown occurs that has "Filter" ption and on hovering over "Filter" option a new dropdown containing all the values from the columns is opened. I want this newly opened dropdown to the left always. How can I do so ?

 

$('#grid').data("kendoGrid");
            if (grid != undefined || grid != null)
                $('#grid').empty();

            var grid = $("#grid").kendoGrid({
                dataSource: DataSource,
                    schema: {
                        data: function (response) {
                            return response;
                        }
                    },
                },
                sortable: true,
                filterable: true,
                columnMenu: true,
                reorderable: true,
                resizable: true,
                multi: true,
                selectable: true,
                dataBinding: function () {
                    record = (this.dataSource.page() - 1) * this.dataSource.pageSize();
                },
                noRecords: true,
                messages: {
                    noRecords: "No records found"
                },
                pageable: {
                    pageSize: 5,
                    input: true
                },
                columns: [
                    {
                        title: "Sr. No.",
                        template: "#= ++record #",
                        width: 70
                    },
                    {
                        field: "Title", title: 'Title',
                        width: "25%",
                        attributes: {
                            style: 'white-space: nowrap;'
                        },
                        filterable: {
                            multi: true,
                            extra: false,
                            search: true,
                            operators: {
                                string: {
                                    eq: "Is equal to",
                                    neq: "Is not equal to",
                                    contains: "Contains"
                                }
                            }
                        }
                    },

                    {
                        command: [
                            { name: "edit1", text: "", iconClass: "k-icon k-i-eye", className: "ob-view" }],
                        title: "Action", lock: true, width: 80, headerAttributes: {
                            style: "text-align: center;"
                        }
                    }
                ]
            });

}

 

 

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 29 Mar 2024, 06:26 AM

Hi Rohan,

You can handle the columnMenuOpen event of the Grid. In the event handler you can get a reference to the Kendo Menu and set its direction configuratioon option:

columnMenuInit: function(e){
            
            $('.k-column-menu .k-menu').data('kendoMenu').setOptions({
             direction: "left"
            })
},

The above is demonstrated in the Dojo linked here - https://dojo.telerik.com/@NeliK/aYatICox

Regards,
Neli
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
Filter General Discussions Grid Styling
Asked by
Rohan
Top achievements
Rank 1
Answers by
Neli
Telerik team
Share this question
or