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;"
                        }
                    }
                ]
            });

}

Hi,

I have a grid with row selection enabled, scrolling enabled and 2 sticky rows on the right side - many other options besides but these are not relevant here.
Using the Sass themes with the latest patch, 2023.1.314, and selecting a master row, then scrolling the row horizontally so the row data slips under the sticky row cell, the data shows through the sicky row content.  It seems to be OK on the Alt rows though.
This does not happen on ALL themes and swatches, just some - the default-main theme is an example.

I have tried it on the version released prior - 2023.1.117 and this problem is not there.

My actual project allows the operator to change themes/swatches so this would be an issue and limit the themes I could make available.

Is this by design?

I do not really want to start modifying themes if I can help it, is there a simply work around so all themes could be used without this 'feature'?

Dojo example lifted directly from your demos here: https://dojo.telerik.com/upeVIwil and I have included an example in text form and screen shots.

Many Thanks

https://runner.telerik.io/fullscreen/@shashi.kumar/IdeKUHam

You can see for column titled 'Phone' there is no right border.

Please reply how can we configure right borders?

Hi

I have implemented Kendo Grid with requirement as below.

Overflow-y should always be set to auto despite of number of rows. This is causing the grid row & header misalignment

Can you suggest how to avoid this misalignment with overflow-y: auto style is retained, is there any way to achieve it?

Dojo here : https://dojo.telerik.com/UqAqAGOw

Screenshot below: Page size is 5 with overflow-y set to auto which distorts the alignment 

The autoFitColum method sizes the chosen column to the correct size, but it also reduces all other columns to their width property as shown below. 

I created some examples to show what I'm talking about by editing autoFitColumn - API Reference - Kendo UI Grid | Kendo UI for jQuery (telerik.com)

This behavior works out in cases where the auto fit column exceeds the grid width (see figure 1), but not in cases where the the data is Smaller than the grid (see figure 2). 

The desired behavior, for me, would be for the autoFitColumn method to act like setting the width manually (see figure 3 or dojo example). I need scrollable to be true and grid width to be auto to work on any screen width. Allowing the rows to text-wrap doesn't work for scrolling large data tables.

Is figure 2 the intended behavior, and is there a way to achieve my desired behavior?

<div id="grid"></div><script>
$("#grid").kendoGrid({
  columns: [
    { field: "name", width: 100 },
    { field: "age", width : 50 },
    { field: "quote" }
  ],
  dataSource: [
      { name: "Jane Doe", age: 30, quote: "I like Pi." },
      { name: "John Doe", age: 33, quote: "The FitnessGram™ Pacer Test ... ding" }
  ],
  scrollable: true,
  width: 'auto'
});
var grid = $("#grid").data("kendoGrid");
grid.autoFitColumn("quote");
</script>
figure 1: behavior of autoFitColumn if data is longer than grid is wide.

<div id="grid"></div><script>
$("#grid").kendoGrid({
  columns: [
    { field: "name", width: 100 },
    { field: "age", width : 50 },
    { field: "quote", }
  ],
  dataSource: [
      { name: "Jane Doe", age: 30, quote: "I like Pi." },
      { name: "John Doe", age: 33, quote: "I like Pi too." }
  ],
  scrollable: true,
  width: 'auto'
});
var grid = $("#grid").data("kendoGrid");
grid.autoFitColumn("quote");
</script>
firuge 2: behavior of autoFitColumn if data is shorter than grid is wide

<div id="grid"></div><hr/><div id="grid2"></div><script>
  
$("#grid").kendoGrid({
  columns: [
    { field: "name", width: 100 },
    { field: "age", width : 50 },
    { field: "quote", width : 3272 } //this width should be set by autoFitColumn instead of manually
  ],
  dataSource: [
      { name: "Jane Doe", age: 30, quote: "I like Pi." },
      { name: "John Doe", age: 33, quote: "The FitnessGram™ Pacer Test ... ding" }
  ],
  scrollable: true,
  width: 'auto'
});
  
  
$("#grid2").kendoGrid({
  columns: [
    { field: "name", width: 100 },
    { field: "age", width : 50 },
    { field: "quote", width: 93 }//this width should be set by autoFitColumn instead of manually
  ],
  dataSource: [
      { name: "Jane Doe", age: 30, quote: "I like Pi." },
      { name: "John Doe", age: 33, quote: "I like Pi too" }
  ],
  scrollable: true,
  width: 'auto'
});
  //I left this code in a comment to make switching back and forth between my desired and actual behavior easier
/*var grid = $("#grid").data("kendoGrid");
var grid2 = $("#grid2").data("kendoGrid");
grid.autoFitColumn("quote");
grid2.autoFitColumn("quote");*/
  
</script>
figure 3: desired visual result, but the width should be set using autoFitColumn, not manualy