This is a migrated thread and some comments may be shown as answers.

Is it possible to lock a Command Column?

4 Answers 19 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ray
Top achievements
Rank 1
Ray asked on 26 Feb 2021, 10:22 PM

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?

4 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Topalov
Telerik team
answered on 02 Mar 2021, 12:06 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Ray
Top achievements
Rank 1
answered on 02 Mar 2021, 04:40 PM

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.

0
Accepted
Martin
Telerik team
answered on 04 Mar 2021, 08:42 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Ray
Top achievements
Rank 1
answered on 04 Mar 2021, 03:57 PM

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.

Tags
Grid
Asked by
Ray
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Ray
Top achievements
Rank 1
Martin
Telerik team
Share this question
or