Is it possible to lock a Command Column?

[Ray]

App contains the following definition:

<kendo-grid-command-column *ngIf="guru" title="Edit" [width]="150">
  <ng-template kendoGridCellTemplate let-isNew="isNew">
    <button kendoGridEditCommand [primary]="true" *ngIf="!noUpdate">
      Edit
    </button>
    <button kendoGridRemoveCommand>Remove</button>
    <button kendoGridSaveCommand [disabled]="formGroup?.invalid">
      {{ isNew ? "Add" : "Update" }}
    </button>
    <button kendoGridCancelCommand>
      {{ isNew ? "Discard changes" : "Cancel" }}
    </button>
  </ng-template>
</kendo-grid-command-column>

Adding [locked]="true" results in: core.js:6142 ERROR Error: There should be at least one non-locked column.

Is it possible to lock the command column so the user doesn't have to scroll to it on wide tables to make something happen? Or does the limitation on locking and templates apply?

[Dimiter Topalov]

Hello Ray,

Having at least one non-locked column is a part of the requirements and limitations of the Grid locked columns functionality:

https://www.telerik.com/kendo-angular-ui/components/grid/columns/locked/#toc-known-limitations

https://www.telerik.com/kendo-angular-ui/components/grid/columns/locked/#toc-prerequisites

The reason behind these requirements is that when there are locked columns, the Grid content is rendered in two separate tables - one for the "locked" non-scrollable content, and one for the scrollable content.

The Grid Command column can be locked like any other Grid column when all prerequisites are met, for example:

https://stackblitz.com/edit/angular-ms6vr7?file=app/app.component.ts

It is also worth mentioning that currently columns can be locked on the left-hand side of the Grid only (right-hand side in RTL mode).

We are currently working on an enhancement, planned for our next official release in May that will introduce "sticky" columns functionality which will enable locking columns to both the start and end of the Grid, as well as on both sides.

Currently such behavior can also be achieved via a custom implementation, relying on setting custom CSS and styling to the Command column, for example:

https://stackblitz.com/edit/angular-ms6vr7-9ypk3x?file=app/app.component.ts

This custom implementation relies on the CSS position: sticky behavior which is not supported in IE.

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Ray]

My command column is on the left, and all of the remaining columns are unlocked. However, they are generated like so:

<kendo-grid-column
  *ngFor="let col of columns"
  [class]="{ myClass: true }"
  [width]="getWidth(col)"
  [filter]="getFilter(col.type)"
  [editor]="getEditor(col.type)"
  [field]="col.field"
  [title]="headerSplitter(col.displayName) + (col.isNullable ? '' : '*')"
>
</kendo-grid-column>

I can get it to work by adding another empty column, but it is ugly. I've also tried adding a column and hiding it but that doesn't work.

[Martin]

Hi Ray,

Thank you for the additional details provided on this case.

I updated Dimiter's example, and generate the Grid columns from a columns configuration array, but the Grid seems to work as expected::

      <kendo-grid-command-column title="command" width="220" [locked]="true">
        <ng-template kendoGridCellTemplate let-isNew="isNew">
          <button kendoGridEditCommand [primary]="true">Edit</button>
          <button kendoGridRemoveCommand>Remove</button>
          <button kendoGridSaveCommand [disabled]="formGroup?.invalid">
            {{ isNew ? "Add" : "Update" }}
          </button>
          <button kendoGridCancelCommand>
            {{ isNew ? "Discard changes" : "Cancel" }}
          </button>
        </ng-template>
      </kendo-grid-command-column>

      <kendo-grid-column
        *ngFor="let col of colsConfig"
        [field]="col.field"
        [title]="col.title"
        [width]="col.width"
      ></kendo-grid-column>

Please refer to the updated example and let me know what I am missing.

https://stackblitz.com/edit/angular-ms6vr7-eb7qkr

Thank you for your cooperation.

Regards,
Martin
Progress Telerik

[Ray]

Ahhh. So the problem is that our getWidth method doesn't always return a value. I can recreate the error by removing the width attribute from one of your columns. I'm assuming the original dev intended for the grid to fill up the entire width of the screen. I will play around with it now that I know what's going on.

Thanks Dimiter & Martin.