feat: update column width and enable drag selection (#4394)

Author: georgi-sla

examples-standalone/grid-charts-integration/src/app/components/stock-list/stock-list.component.html

@@ -10,7 +10,7 @@
 
 <kendo-grid #grid [data]="gridData" [selectable]="selectableSettings" [height]="500" [kendoGridSelectBy]="selectBy"
     [selectedKeys]="mySelection" (cellClick)="onCellClick($event)" (selectionChange)="onSelectionChange()">
-    <kendo-grid-checkbox-column [showSelectAll]="true" [width]="30"></kendo-grid-checkbox-column>
+    <kendo-grid-checkbox-column [showSelectAll]="true" [width]="35"></kendo-grid-checkbox-column>
 
     <kendo-grid-column class="grid-symbol-col" field="symbol" title="Symbol" [width]="80"></kendo-grid-column>
     <kendo-grid-column field="name" title="Name" [width]="140"></kendo-grid-column>

examples-standalone/grid-charts-integration/src/app/components/stock-list/stock-list.component.ts

@@ -1,6 +1,16 @@
 import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
-import { ContextMenuComponent, ContextMenuSelectEvent, MenusModule } from "@progress/kendo-angular-menu";
-import { CellClickEvent, ExcelModule, GridComponent, GridModule, SelectableSettings } from "@progress/kendo-angular-grid";
+import {
+  ContextMenuComponent,
+  ContextMenuSelectEvent,
+  MenusModule,
+} from '@progress/kendo-angular-menu';
+import {
+  CellClickEvent,
+  ExcelModule,
+  GridComponent,
+  GridModule,
+  SelectableSettings,
+} from '@progress/kendo-angular-grid';
 import { IconsModule } from '@progress/kendo-angular-icons';
 import { SVGIcon, infoCircleIcon } from '@progress/kendo-svg-icons';
 import { ChartConfig, Stock } from '../../model';
@@ -18,82 +28,96 @@ import { CommonModule } from '@angular/common';
 @Component({
   selector: 'app-stock-list',
   standalone: true,
-  imports: [MenusModule, GridModule, IconsModule, NumberFormatPipe, DialogsModule, ExcelModule, WindowComponent, DayChartComponent, WindowComponent, CommonModule],
+  imports: [
+    MenusModule,
+    GridModule,
+    IconsModule,
+    NumberFormatPipe,
+    DialogsModule,
+    ExcelModule,
+    WindowComponent,
+    DayChartComponent,
+    WindowComponent,
+    CommonModule,
+  ],
   templateUrl: './stock-list.component.html',
   styleUrl: './stock-list.component.scss',
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
 })
 export class StockListComponent {
-    @ViewChild('gridmenu') public gridContextMenu: ContextMenuComponent | undefined;
-    @ViewChild('grid') public grid: GridComponent | undefined;
+  @ViewChild('gridmenu') public gridContextMenu:
+    | ContextMenuComponent
+    | undefined;
+  @ViewChild('grid') public grid: GridComponent | undefined;
 
-    public infoIcon: SVGIcon = infoCircleIcon;
+  public infoIcon: SVGIcon = infoCircleIcon;
 
-    public items: object[] = menuItems;
-    public opened = false;
-    public chartConfiguration: ChartConfig = { seriesType: 'line', stack: false };
-    public gridData: Stock[] = stocksInPortfolio;
-    public selectableSettings: SelectableSettings = {
-        checkboxOnly: false,
-        mode: 'multiple'
-    };
-    public mySelection: Stock[] = stocksInPortfolio.slice(0, 4);
+  public items: object[] = menuItems;
+  public opened = false;
+  public chartConfiguration: ChartConfig = { seriesType: 'line', stack: false };
+  public gridData: Stock[] = stocksInPortfolio;
+  public selectableSettings: SelectableSettings = {
+    checkboxOnly: false,
+    mode: 'multiple',
+    drag: true,
+  };
+  public mySelection: Stock[] = stocksInPortfolio.slice(0, 4);
 
-    constructor() {
-        this.allData = this.allData.bind(this);
-    }
+  constructor() {
+    this.allData = this.allData.bind(this);
+  }
 
-    public onCellClick(e: CellClickEvent): void {
-        if (e.type === 'contextmenu') {
-            const originalEvent = e.originalEvent;
-            originalEvent.preventDefault();
-            this.gridContextMenu?.show({
-                left: originalEvent.pageX,
-                top: originalEvent.pageY
-            });
-        }
+  public onCellClick(e: CellClickEvent): void {
+    if (e.type === 'contextmenu') {
+      const originalEvent = e.originalEvent;
+      originalEvent.preventDefault();
+      this.gridContextMenu?.show({
+        left: originalEvent.pageX,
+        top: originalEvent.pageY,
+      });
     }
+  }
 
-    public selectBy(e: any) {
-        return e.dataItem;
-    }
+  public selectBy(e: any) {
+    return e.dataItem;
+  }
 
-    public onSelectionChange() {
-        if (this.opened) {
-            setTimeout(() => {
-                this.mySelection = [...this.mySelection];
-            });
-        }
+  public onSelectionChange() {
+    if (this.opened) {
+      setTimeout(() => {
+        this.mySelection = [...this.mySelection];
+      });
     }
+  }
 
-    public onSelect(e: ContextMenuSelectEvent): void {
-        if (e.item.text === 'Charts' || e.item.items !== undefined) {
-            return;
-        }
-
-        if (e.item.text === 'Export Excel') {
-            this.grid?.saveAsExcel();
-        } else {
-            this.chartConfiguration = {
-                chartName: e.item.text,
-                seriesType: getChartType(e.item.text) as SeriesType,
-                stack: getChartStack(e.item.text)
-            };
-            if (!this.opened) {
-                this.opened = true;
-            }
-            this.gridContextMenu?.hide();
-        }
+  public onSelect(e: ContextMenuSelectEvent): void {
+    if (e.item.text === 'Charts' || e.item.items !== undefined) {
+      return;
     }
 
-    public allData() {
-        const result = {
-            data: this.mySelection,
-        };
-        return result;
+    if (e.item.text === 'Export Excel') {
+      this.grid?.saveAsExcel();
+    } else {
+      this.chartConfiguration = {
+        chartName: e.item.text,
+        seriesType: getChartType(e.item.text) as SeriesType,
+        stack: getChartStack(e.item.text),
+      };
+      if (!this.opened) {
+        this.opened = true;
+      }
+      this.gridContextMenu?.hide();
     }
+  }
 
-    public close() {
-        this.opened = false;
-    }
+  public allData() {
+    const result = {
+      data: this.mySelection,
+    };
+    return result;
+  }
+
+  public close() {
+    this.opened = false;
+  }
 }