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 

Hi, 

Forgive me if this has been answered before, but I haven't been able to find it.

What would be the reasons to chose LESS over SASS or vice-versa when developing with Kendo UI for jQuery?

I am rather new at this, so the only obvious reason to chose LESS that I have found is that it has more existing themes (currently 16) than SASS (4). This should make it easier to find a LESS theme that matches your requirements and modify for final touches.

What other differences might there be? (In terms of using it with Kendo UI for jQuery, I am not talking about a comparison LESS vs SASS in general)

Thanks,

Fredrik

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
  

Hello,

I am using kendo-theme-default 4.38.1 and get a lot of deprecated warnings from Dart SASS.  I've put an example warning below. Is there a workaround to prevent kendo-theme-default from causing all of these warnings?

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($button-padding-x, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
20 │ $button-padding-x-sm: $button-padding-x / 2 !default;
   │                       ^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules\@progress\kendo-theme-default\scss\button\_variables.scss 20:23  @import
    src\styles\_common.scss 5:9                                                   @import
    stdin 1:9   

There is a --quiet-deps command line option. I've attempted to add this to vue.config.js (see below), which is what's used to configure sass-loader. Unfortunately, I can't tell if I have it configured the right way or whether --quiet-deps will actually do what I want.

module.exports = {
  // ...
  css: {
    loaderOptions: {
      sass: {
        prependData: '@import "~@/styles/common";',
        sassOptions: {
          quietDeps: true
        }
      }
    }
  }
}

I have a product named "a6763". It is a cloud based product. Customers use it by placing CDN-served assets into their HTML code. My product should work in an div only. It is just like Google Map actually. Google Map never affects rest of document. I plan to use Kendo UI jQuery for windows, dropdowns, tabs etc. But Kendo UI affects rest of document.

Here is how my customers add my assets:

1) Embed the a6763's code.

<head>
<script src="https:/a6763.com/embed/kendo.js"></script><link href="https:/a6763.com/embed/kendo.bootstrap.min.css" rel="stylesheet" />
</head>

2) Place my embed code:

<body>
   <!-- there is no kendo here -->
   <div id="a6763">
        <!-- my kendo UI components are here -->
        <div id="kendogrid"></div>
   </div>
   <!-- there is no kendo here -->
</body>

The problem is that; the Kendo's Javascript codes and CSS styles affect all the document. For example, if I choose Material theme in CDN assets, then all the page turns into Material. But I want to keep this theme in the above div. Same for Javascript codes: Kendo should not process outside of the above div.

UPDATE 1: To make it more clear: I need something like this for Kendo UI jQuery: https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes 

UPDATE 2: In other words, I need give Kendo a new name just like this: https://api.jquery.com/jquery.noconflict/ So that, even the document already added a different version of Kendo into document, everything is ok because my Kendo is different. No conflict.

Esref Atak

I am using the kendo- scheduler jquery component in my project. Recently I updated the version of the kendo library, I am currently using 

There were customization styles I have done on the component depending on the kendo styling class ex: "k-header", "k-scheduler-navigation", and many more... 

After the update many of my customization styles have lost, Are there any changes done to class names and element types or, element order or any other changes contained in the above update or any later update recently ????