Recent

Custom Controls Using Angular Material

Git Repo:  https://github.com/yawahang/ohcontrols Features DatePicker (Date Picker, Time Picker, Date Time Picker, and many more) RatingPicker (Vertical, Horizontal, Custom Icons) Select (Single Select, MultiSelect, Single Column, MultiColumn) Recursive Treeview
Post a Comment

Kendo Grid AutoFit Columns

https://stackblitz.com/edit/angular-prf8kx-nlbjax?embed=1&file=app/app.component.ts

import { Component } from "@angular/core";
import { sampleProducts } from "./products";
import { GridComponent } from "@progress/kendo-angular-grid";

@Component({
  selector: "my-app",

  template: `
    <kendo-grid
      #grid
      [data]="gridData"
      [resizable]="true"
      style="height: 300px"
    >
      <kendo-grid-column
        *ngFor="let column of columns; trackBy: dynamicColumns(grid)"
        field="{{ column.Name }}"
        title="{{ column.Display }}"
      >
        // {{ dynamicColumns(grid, column) }}
      </kendo-grid-column>
    </kendo-grid>
  `
})
export class AppComponent {
  public gridData: any[] = sampleProducts;

  public columns: any = [
    {
      Name: "ProductName",
      Display: "Product Name",
      Type: "text",
      Sort: true,
      ColumnWidth: 100
    },
    {
      Name: "QuantityPerUnit",
      Display: "Quantity PerUnit",
      Type: "text",
      Sort: true,
      ColumnWidth: 110
    },
    {
      Name: "UnitPrice",
      Display: "Unit Price",
      Type: "text",
      Sort: true,
      ColumnWidth: 120
    },
    {
      Name: "UnitsInStock",
      Display: "Units InStock",
      Type: "text",
      Sort: true,
      ColumnWidth: 130
    },
    {
      Name: "FirstOrderedOn",
      Display: "First OrderedOn",
      Type: "text",
      Sort: true,
      ColumnWidth: 140
    },
    {
      Name: "UnitPrice",
      Display: "Unit Price",
      Type: "text",
      Sort: true,
      ColumnWidth: 150
    }
  ];

  dynamicColumns(grid: GridComponent) {
    if (grid) {
      grid.autoFitColumns();
    }
  }
}

Comments

Post a Comment

Top Posts

SQL Server Symmetric Key & Certificate based Encryption With AES_256 Algorithm

--  Create SYMMETRIC KEY  &  CERTIFICATE CREATE MASTER KEY ENCRYPTION BY PASSWORD  =   ' newPasswordForEncryption ' ; CREATE CERTIFICATE MyCertificate     WITH SUBJECT  =   ' MyCryptographyCertificate ' ; CREATE SYMMETRIC KEY MySymetricKey     WITH IDENTITY_VALUE  =   ' MyCryptoIdentityValue '   ,          ALGORITHM  =  AES_256  ,          KEY_SOURCE  =   ' $dggfg@9e& '     ENCRYPTION BY CERTIFICATE OHCertificate ; SELECT  *  FROM   sys . symmetric_keys ;   --  returns created key --  Create SYMMETRIC KEY  &  CERTIFICATE --  Create Sp to Open CLose SYMMETRIC KEY Or You can create  &  use Scalar  Function SET QUOTED_IDENTIFIER ON ; SET ANSI_NULLS ON ; GO --   ============================================= --   Author :   Yawahang Rai --  Create  date :   12 / 20 / 2016 --   Description :   Function  To Open Close Symetric Key --   ============================================= CREATE PROCEDURE dbo . SfOpenCloseKeys (     @Task  CHAR  ( 5 ))
read more »

Kendo Grid Angular Column Width, minResizableWidth dynamic

https://stackblitz.com/edit/ng-kendo-grid-col-width-kk-12?embed=1&file=app/app.component.ts&view=preview import   {   Component   }   from   '@angular/core' ; import   {  sampleProducts  }   from   './products' ; @ Component ({     selector :   'my-app' ,     template :   `         <kendo-grid                 [data]="gridData"                 [reorderable]="true"                 [resizable]="true"                 [scrollable]="true"                 [groupable]="true"                 style="height: 300px">                               <kendo-grid-column                  *ngFor="let column of columns;"                     width="{{column.ColumnWidth}}"                    minResizableWidth="{{column.ColumnWidth >= 10 ? (column.ColumnWidth - 10) : column.ColumnWidth }}"                     field="{{column.Name}}"                     title="
read more »