I tried to add this style but do not see any change. How to have the header for the grid in bold.

.k-grid-header {
    font-weight: bold!important;    
}

Hi,

Is there a way to have the editor insert at br tag when pressing the enter button instead of creating a new paragraph?

Thanks

Hi there,

  i have to implement a kendo angular scrollview in one of my project, which should display like multiple images in one page, instead of showing single image to slide, i want multiple images at a time in scrollview. I have attatched an image for reference

Am not able to change the style for kendo grid,  Even i written script in component.scss, still not working. Weird ! Why so?

Once i changed to  encapsulation: ViewEncapsulation.None, its started working , whats the logic behind that?

Thanks....

Hi

Is there any way to customize the "Clear" and "Search" button texts in the kendo UI angular Grid. The water mark appearing in the search text also i need to customize. Is it possible do this in the new kendo UI angular Grid. Is there any kendoGridFilterMenuTemplate avaliable for this ?

Thanks in Advance

Rajeev

Hi Team,

I am using kendo scatter chart with showing 4 quadrant ..is there any feature available where we can place the label on each quadrant .

Though, we are able to put label using CSS but curious to know if any inbuilt feature available.

Attaching the image with highlighted label 

Thanks,

Sam

I'm trying to get current page from the pager component as I need to pass the incremented value that into REST service backend. I can get hold of it in the template code: 

<ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
<kendo-pager-prev-buttons></kendo-pager-prev-buttons>
<kendo-pager-input></kendo-pager-input>
<kendo-pager-info></kendo-pager-info>
<kendo-pager-next-buttons></kendo-pager-next-buttons>
<kendo-pager-page-sizes ></kendo-pager-page-sizes>
<div>
current page {{currentPage}}
</div>

</ng-template>>

But I need to access it in the component code in pageChange event so that I can call the rest service with correct page number. How can I do that? The pageChange only has skip and take properties but I'm trying to figure out current page.

All data comes from external API.

I have a kendo grid with grouping.  I would like the grouping to be collapsed when the page and grid is loaded for the first time, is there a setting on the grid that sets whether the grouping is expanded or collapsed?

Here is the grid definition:

<div style="text-align:center;">
  <div *ngIf="!fileList" class="spinner-grow" role="status" style="display:inline-block;">
    <span class="sr-only">Loading...</span>
  </div>
</div>
<kendo-grid *ngIf="fileList"
            [data]="gridView"
            [sort]="gridState.sort"
            [skip]="gridState.skip"
            [sortable]="{ allowUnsort: true, mode: 'single'}"
            [pageable]="pagerSettings && gridView.data.length > 0"
            [pageSize]="gridState.take"
            [group]="gridState.group"
            [filter]="gridState.filter"
            [filterable]="true"
            [resizable]="true"
            (dataStateChange)="dataStateChange($event)">
  <kendo-grid-column field="facilityId" title="Facility ID" width="120">
    <ng-template kendoGridGroupHeaderTemplate
                 let-group="group"
                 let-field="facilityId"
                 let-value="value"
                 let-aggregates="group.aggregates">
      <div class="row" style="width: 100%">
        <div class="col-md-3"><a [href]="aggregates['facilityLoginListUrl'].max" target="_blank" class="grid-link">{{value}}</a></div>
        <div class="col-md-2 offset-md-5" style="text-align: right;">Total $ amount: {{aggregates["claimAmount"].sum | currency}}</div>
        <div class="col-md-2 offset-md-7" style="text-align: right;">Total # of files: {{aggregates["facilityId"].count}}</div>
      </div>
    </ng-template>
    <ng-template kendoGridCellTemplate let-dataItem>
      <a [href]="dataItem.facilityLoginListUrl" target="_blank" class="grid-link">{{dataItem.facilityId}}</a>
    </ng-template>
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
      <kendo-grid-string-filter-cell [column]="column" [filter]="filter" [showOperators]="false"></kendo-grid-string-filter-cell>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="organizationId" title="Organization ID">
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
      <kendo-grid-string-filter-cell [column]="column" [filter]="filter" [showOperators]="false"></kendo-grid-string-filter-cell>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="submitterId" title="Submitter ID">
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
      <kendo-grid-string-filter-cell [column]="column" [filter]="filter" [showOperators]="false"></kendo-grid-string-filter-cell>
    </ng-template>
    <ng-template kendoGridCellTemplate let-dataItem>
      <a [href]="dataItem.submitterLoginEditUrl" target="_blank" class="grid-link">{{dataItem.submitterId}}</a>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="description" title="Description">
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
      <kendo-grid-string-filter-cell [column]="column" [filter]="filter" [showOperators]="false"></kendo-grid-string-filter-cell>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="fileName" title="File Name">
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
      <kendo-grid-string-filter-cell [column]="column" [filter]="filter" [showOperators]="false"></kendo-grid-string-filter-cell>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="macName" title="MAC Name" width="150">
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
      <kendo-grid-string-filter-cell [column]="column" [filter]="filter" [showOperators]="false"></kendo-grid-string-filter-cell>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="loginId" title="Login ID">
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
      <kendo-grid-string-filter-cell [column]="column" [filter]="filter" [showOperators]="false"></kendo-grid-string-filter-cell>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="dateInvalidated" title="Date/Time Invalidated" filter="date" format="{0:d}">
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
      <kendo-grid-date-filter-cell [column]="column" [filter]="filter" operator="eq" [showOperators]="false"></kendo-grid-date-filter-cell>
    </ng-template>
  </kendo-grid-column>
</kendo-grid>

Here is the typescript:

import { Component, OnDestroy, OnInit } from '@angular/core';
import { GridDataResult, PagerSettings } from '@progress/kendo-angular-grid';
import { Subject, Observable } from 'rxjs';
import { State, process, GroupDescriptor } from '@progress/kendo-data-query';
import { FileInfo } from '../../../models/file-info-item';
import { Configuration } from '../../../app.constants';
import { FileMonitorFilter } from '../../../models/file-monitor-filter';
import { MonitorService } from '../../../core/services/monitor-service';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-invalid-file-grid',
  templateUrl: './invalid-file-grid.component.html'
})
export class InvalidFileGridComponent implements OnInit, OnDestroy {
  public fileList: FileInfo[];
  public gridView: GridDataResult;
  public pagerSettings: PagerSettings;
  public fileMonitorFilter: Observable<FileMonitorFilter>;
  public skip = 0;
  public pageSize = 10;
  public aggregates: any[] = [
    { field: 'claimAmount', aggregate: 'sum' },
    { field: 'facilityId', aggregate: 'count' },
    { field: 'facilityLoginListUrl', aggregate: 'max'} // egregious hack to get value into group header
  ];

  public groups: GroupDescriptor[] = [{ field: 'facilityId', aggregates: this.aggregates }];
  public gridState: State = {
    skip: 0,
    take: 10,
    sort: [{
      field: 'facilityId',
      dir: 'desc'
    }],
    group: this.groups
  };

  private componentDestroyed: Subject<any> = new Subject();

  constructor(private configuration: Configuration,
    private monitorService: MonitorService) {
  }

  ngOnInit(): void {
    this.pagerSettings = this.configuration.DefaultPagerSettings;
    this.loadFileList();
  }

  ngOnDestroy(): void {
    this.componentDestroyed.next();
    this.componentDestroyed.unsubscribe();
  }

  public dataStateChange(state: State): void {
    this.gridState = state;
    this.loadGrid();
  }

  private loadFileList(): void {
    this.fileList = null;
    const filter = new FileMonitorFilter();
    this.monitorService.getInvalidFiles(filter)
      .pipe(takeUntil(this.componentDestroyed))
      .subscribe(data => {
        if (data) {
          this.fileList = data;
          this.gridState.skip = 0;
          this.loadGrid();
        }
      });
  }

  loadGrid(): void {
    this.gridView = process(this.fileList, this.gridState);
  }

}

I am trying to add a switch to allow a user to dictate whether a column filter is applied as an AND or OR to the server side query generated, as follows. The problem is that no labels are generated for the switch. Can you help with why this is happening? 

<ng-template
      kendoGridFilterMenuTemplate
      let-filter
      let-column="column"
      let-filterService="filterService">
      <kendo-grid-string-filter-menu
        [column]="column"
        [extra]="false"
        [filter]="filter"
        [filterService]="filterService">
        <kendo-filter-contains-operator>
        </kendo-filter-contains-operator>
        <kendo-filter-eq-operator>
        </kendo-filter-eq-operator>
        <kendo-filter-neq-operator>
        </kendo-filter-neq-operator>
      </kendo-grid-string-filter-menu>
        <kendo-switch
          [checked]="filter.logic == 'or'"
          (valueChange)="switchChange($event, filter)">
        </kendo-switch>
    </ng-template>