keep table width during column resiza

[Levon]

Good day. Is it possible to keep the table original width during column resize? At https://www.telerik.com/kendo-angular-ui/components/grid/columns/resizing/ we can see that during draging the column the table width also changed and horizontal scroll appears (or extra white space). It would be great if column resize will affect on sibling column and not on Table.

[Svet]

Hi Levon,

The reported behavior is expected and is the default behavior of a resizable Grid. Basically whenever the total width of all Grid columns is less than the Grid width, then the remaining space is filled with white space. That is documented in the blue caret of the referenced article:

https://www.telerik.com/kendo-angular-ui/components/grid/columns/resizing/

What could be done in order to avoid the additionally added white space to the end of the Grid, is to control the width of the last column manually. The actual width of the Grid and the total sum of all column widths can be calculated. Then the difference can be added to the last column. That will make sure to stretch the last column so that there is no white space. Please check the following example demonstrating such approach:

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

Indeed, the demonstrated implementation is just a workaround that is based on some custom logic that isn't entirely tested and should be used at your own discretion.

Please let me know in case any further assistance or additional details are required for this case. Thank you.

Regards,
Svetlin
Progress Telerik

[Levon]

Thank you for your response.
The given example was based on (columnResize) bindibg. But this Fires when the user completes the resizing of the column. Doing any change to width after user finished the resize brings to bad UX, Let me explain. First user resize, during this process user will se a "white area". after he release the mouse button, new width for last (or sibling) column was determined and setted, And grids columns resized one more time

Cant find any methods, subsribtion which will "inform" about coumns width change during change, instead of after. Can you suggest any thing to achieve more friendly resize?

[Martin]

Hi Levon,

This might be disappointing for you, but I am afraid that there is no built-in event that is emitted when the Grid column is resized manually. What can be done further is to capture the column resizer element with some custom JavaScript code and invoke the setLastColumnWidth function every time when the mouse is moved or a mouse click is held.

Here is an example of how to listen for click events on all resizer elements:

  public ngAfterViewInit() {
   this.setLastColumnWidth();

      window.addEventListener('resize', (e)=>{
        if(e.target.innerWidth > 500){
          this.setLastColumnWidth();
        }
      })

    document.querySelectorAll(".k-column-resizer").forEach(resizer => {
      resizer.addEventListener("mouseup", (e) => {
        console.log(e);
      });
    });
  }

Unfortunately, there is no DOM event that is fired when the mouse click is hold (or an event like dragstart used when dragging elements), the developer needs to implement custom logic to determine when to invoke the function which resizes the last column, e. g.:

https://stackoverflow.com/questions/36011249/detect-hold-mouse-click-in-javascript

However, the suggestion isn't a built-in feature of Kendo UI for Angular and thus it isn't supported. Basically, we try to provide guidelines or workarounds that help to achieve custom use-case scenarios, but sometimes such effort falls out of the scope of the support service.

Let me know if any further assistance is required for Kendo UI for Angular.

Regards,
Martin
Progress Telerik