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>

I am using Kendo scatter chart by default x and y axis data are coming decimal. i want integer only. i don't want to use Majorunit because it has to be calculated based on series.

<kendo-chart-series>
<kendo-chart-series-item type="scatter" [data]="graphData" xField="inc_margin_amt" yField="inc_sales_amt">
</kendo-chart-series-item>
</kendo-chart-series>
<kendo-chart-x-axis>
<kendo-chart-x-axis-item [min]="graph.xModel.min" [max]="graph.xModel.max">
</kendo-chart-x-axis-item>
</kendo-chart-x-axis>
<kendo-chart-y-axis>
<kendo-chart-y-axis-item [min]="graph.yModel.min" [max]="graph.yModel.max">
</kendo-chart-y-axis-item>
</kendo-chart-y-axis>

Attaching the image for your reference .

Hello,

What i see from documentation there is an interface AddEvent with "parent" property, but i don't see it on my local version.

I installed it from npm
"ng add @progress/kendo-angular-treelist"

Plase see attached pictures.

Thanks.

interface Item {
  text: string,
  value: string
}

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
        Selected Value: {{selectedValue}}
    </div>
    <kendo-dropdownlist
        [data]="listItems"
        textField="text"
        valueField="value"
        [valuePrimitive]="true"
        [(ngModel)]="selectedValue"
    >
    </kendo-dropdownlist>
  `
})
class AppComponent {
    public listItems: Array<Item> = [
        { text: 'Small', value: 's' },
        { text: 'Medium', value: 'm' },
        { text: 'Large', value: 'l' }
    ];

    public selectedValue: number = 'S';
}

Since this is an uppercase "S" the selected value does not pre-select.

Filtering works - case insensitive?

There must be some way of making this be case-insensitive without manipulating the data? The data comes from a backend db that is case-insensitive (MySql).

Hi,

I have implemented a Multiselect control with Filtering. It contains more then 10k items. My initial load is only 50 items as default items and all others need to be found over the filtering. 

When user filters and select various items and saves them everything works as expected. But when I load my edit page and patch values I see in tags only the values that are in the initial load (50 items). So if I have selected and saved one outside the first 50 it is not visible in edit mode. And this is also ok us I understand it per documentation: 

https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/MultiSelectComponent/#toc-value

All selected values which are not present in the source are ignored.

It works if I load all items in the multiselect but with 10k items its not very good for performance reasons. What would be a better approach.

Thanks

I'm creating an image that has an image that uses a variable to complete the src of the image, as shown below:

When I use this form, the image appears on the page, but in the creation of the PDF it is not shown.
When I switch to a still image, as shown below, it works.

Do you have any configuration, or how to resolve this?