Bug: Unnecessary console warning when sticky grid set with responsive column enabled

[Lucio]

I've got a kendo grid with a responsive column set up as described in the docs

I also made a column sticky on the part of the grid that renders when the screen is larger.

I get this console warning because my responsive column does not (and cannot have) an explicit width set:

"Sticky columns feature requires all columns to have set width."

[Zornitsa]

Hi Lucio,

Thank you for the additional clarifications and StackBlitz example provided.

The appearance of the sticky columns warning is expected in this scenario as well since the column with no width is a valid declared ColumnComponent for the Grid.

On that note, internally, we emit the warning when any of the declared columns in the Grid has no fixed width defined, so the DOM is not checked for whether the column is actually rendered or not (as this will affect the performance). In general, the purpose of this warning is to remind the developer that a certain requirement is not met and to clear up confusion in case some part of the application is not working as expected due to the missing requirement.

Furthermore, the warning is only thrown in dev mode due to the above-mentioned reason, which means that it will not appear in production, so it is safe to ignore it if it does not cause any unexpected behavior in your application. 

Still, if suitable to your scenario, the warning can be avoided by setting a minimum 1px width for the individual column, which will keep the same responsive behavior of the columns as if no width is set:

<kendo-grid-column media="(max-width: 680px)" [width]="1" title="Items">
  ...
</kendo-grid-column>

Here is also the StackBlitz example from your reply, modified with the above suggestion, in which the same expected responsive behavior can be observed:

• https://stackblitz.com/edit/angular-uhmdmq-ocbcfb

I hope this clears up the matter. 

Regards,
Zornitsa
Progress Telerik

[Lucio]

Oh awesome! That definitely solves the issue.

It'd be cool if instead of checking for any columns without a width, if it ignored columns that have a distinct media query. Although, this seems super low priority.

[Zornitsa]

Hi Lucio,

The mentioned warning about the sticky columns feature of the Grid is expected since one of the requirements for this functionality to work properly is indeed setting a fixed width for all of the Grid columns. This is also stated in the following documentation article about the setup of the sticky columns feature:

• https://www.telerik.com/kendo-angular-ui/components/grid/columns/sticky#setup 

In this line of thought, the experienced behavior is not a bug and the appearance of the warning is expected since setting a width for all of the Grid columns is required for the proper functioning of the sticky columns feature.

 I hope the provided information sheds some light on the matter.

Regards,
Zornitsa
Progress Telerik

[Lucio]

Hi Zornitsa, thanks for the reply. I think maybe I wasn't clear.

 

I'm aware of the requirement and the documentation stating that the width option of all columns should be set, but in the case I have presented, only some grid columns are visible when the sticky column is visible.

I have made a stack blitz demonstrating the issue here: https://stackblitz.com/edit/angular-uhmdmq?file=src%2Fapp%2Fapp.component.ts

 

In this example, the grid columns that are visible at wider screen sizes all have a width set. The responsive column that is only visible at narrow screen sizes does not (and cannot) have a width set. When the responsive column is visible, the sticky column is not visible.