Kendo Grid with Angular 6 - Setting page number in Angular Component or Component Html - TagMerge
3Kendo Grid with Angular 6 - Setting page number in Angular Component or Component HtmlKendo Grid with Angular 6 - Setting page number in Angular Component or Component Html

Kendo Grid with Angular 6 - Setting page number in Angular Component or Component Html

Asked 1 years ago
0
3 answers

<kendo-grid
    [pageSize]="pageSize"
    [skip]="skip"
    [pageable]="true"
    (pageChange)="onPageChange($event)"
    >
</kendo-grid>

public onPageChange(state: any): void {
    this.pageSize = state.take;
    this.skip = state.skip;
}

Source: link

0

I'm basing on latest docs: https://www.telerik.com/kendo-angular-ui/components/grid/columns/auto-generated/
<kendo-grid [kendoGridBinding]="elements" ...some props>
           <kendo-grid-column *ngFor="let column of elementsMeta"
               field="{{column.name}}"
               title="{{column.name}}">
               <ng-template kendoGridCellTemplate let-dataItem>
                   <div>
                       {{ column.name }}
                       {{ dataItem[column.name] }}
                   </div>
               </ng-template>
           </kendo-grid-column>
</kendo-grid>
BTW I also tried following approach:
<ng-container *ngFor="let column of elementsMeta">
            <kendo-grid-column  field="{{column.field}}"
                                title="{{column.title}}">
                <ng-template kendoGridCellTemplate let-dataItem>
                {{ dataItem | json }} <br>
                {{ dataItem[column.field] }} <br>
                {{ column.field }}    
                </ng-template>
            </kendo-grid-column>
        </ng-container>
HTML Template :
<kendo-grid [data]="elements">
        <kendo-grid-column 
        *ngFor="let item of elementsMeta" 
        field="{{item.columnField}}" 
        title="{{item.columnTitle}}">
            <ng-template kendoGridCellTemplate let-dataItem>
                {{dataItem[item.columnField]}}
            </ng-template>
        </kendo-grid-column>
    </kendo-grid>
JSON :
this.elements = [{
    "ProductID": 1,
    "ProductName": "Chai",
    "UnitPrice": 18.0000
}, {
    "ProductID": 2,
    "ProductName": "Chang",
    "UnitPrice": 19.0000
}, {
    "ProductID": 3,
    "ProductName": "Aniseed Syrup",
    "UnitPrice": 10.0000
}, {
    "ProductID": 4,
    "ProductName": "Chef Anton's Cajun Seasoning",
    "UnitPrice": 22.0000
}, {
    "ProductID": 5,
    "ProductName": "Chef Anton's Gumbo Mix",
    "UnitPrice": 21.3500
}];

this.elementsMeta = [{
    "columnField": "ProductID",
    "columnTitle": "ID",
},{
    "columnField": "ProductName",
    "columnTitle": "Name",
},{
    "columnField": "UnitPrice",
    "columnTitle": "Price",
}]
Try with below code :
<kendo-grid>
<kendo-grid-column *ngFor="let column of columns" [field]="column.field" [title]="column.title" [format]="column.format" [width]="column.width" [filter]="column.filter" [editable]="column.editable" [filterable]="column.filterable" [groupable]="column.groupable" [hidden]="column.hidden" 
[reorderable]="column.reorderable" [locked]="column.locked" >
    <div *ngIf="column.template && column.template !== ''">
        <ng-template kendoGridCellTemplate let-dataItem let-column="column">
            {{dataItem[column.field]}}
        </ng-template>
    </div>
</kendo-grid-column>
</kendo-grid>

Source: link

0

I am trying to implement Server Side Pagination and I am getting fresh 20 records everytime when I call the Web Api method. Here everytime, the skip is resetting to 20 only. It is not incrementing. So, I could not proceed further. Below is the sample code, I am implementing.
public dataStateChange(state: DataStateChangeEvent): void {
    this.state = state;
    this.service.startIndex = state.skip;
    this.service.endIndex = state.skip + this.messagesPerPage;
    this.loadItems();
}

public pageChange(event: PageChangeEvent): void {
    this.state.skip = event.skip;
    this.state.take = event.take;
    this.loadItems();
}
How I can use same functionality of choosing language by mat-card ?
//earlier -  drop down
<div>
        <select class="form-input col-md-2" #langSelect (change)="i18nConf.setSelectedLanguage(langSelect.value)">
          <option *ngFor="let lang of i18nConf.getLanguages()" [value]="lang"
            [selected]="lang === this.i18nConf.currentLang">
            {{ lang }}</option>
        </select>
</div>

//now- card options
<div class="content">
    <div fxLayout="row wrap" fxLayoutGap="16px grid">
      <div [fxFlex]="(50/gridColumns) + '%'" fxFlex.xs="50%" fxFlex.sm="33%"
        *ngFor="let language of languages; index as i; ; first as isFirst">
        <mat-card class="mat-elevation-z4" style="height: 60px;  border-radius: 8px;" (click)="setActiveCard(i)">
          <div #i style="float: right; margin-bottom: 1px" *ngIf="currentActive === i">
            <img src="../../assets/Images/Check.svg">
          </div>
          <mat-card-content style="text-align: center; margin-top: 23px;">
            <span class="clsfont24" style="color: #05523D;
                        letter-spacing: 0.2px;">
              {{language.content}}
            </span>
          </mat-card-content>
        </mat-card>
      </div>
    </div>
  </div>
In TS:-
i18nConf: I18nConfigService | any;
currentActive = 0;

languages: {
    title: string,
    subtitle: string,
    content: string,
    url: string,
    active: any
    }[] = [
    {title: 'English', subtitle: 'Subtitle', content: 'English', url: 'https://material.angular.io/assets/img/examples/shiba2.jpg', active: this.currentActive},
    {title: 'Hindi', subtitle: 'Subtitle', content: 'हिन्दी', url: 'https://material.angular.io/assets/img/examples/shiba2.jpg', active: this.currentActive},
    {title: 'Telugu', subtitle: 'Subtitle', content: 'తెలుగు', url: 'https://material.angular.io/assets/img/examples/shiba2.jpg', active: this.currentActive},
    {title: 'Kannada', subtitle: 'Subtitle', content: 'ಕನ್ನಡ', url: 'https://material.angular.io/assets/img/examples/shiba2.jpg', active: this.currentActive}
  ];

constructor(i18nConf: I18nConfigService) {

    this.i18nConf = i18nConf;
    this.i18nConf.setUpConf();
   }

 setActiveCard(index: number){
    this.currentActive = index;
  }
user.ts:
export interface IResponse<T> {
  message: string;
  code: number;
  results: T;
}

export interface IUser {
  token?: string;
  roles?: string[];
}
AuthService:
export class AuthService {
  baseUrl = environment.apiUrl;
  constructor(private http: HttpClient, private router: Router) { }

  login(model: any){
    return this.http.post<IResponse<IUser>>(this.baseUrl+'auth/login', model).pipe(
      tap((response)=>{
        const user = response.results;
    return user;
      })
    )
  }

  getToken(): string | null {
    return localStorage.getItem('token');
  } 

  isLoggedIn() string | null {
    return this.getToken();
  } 
}

Source: link

Recent Questions on angular

    Programming Languages