I'm a beginner and i tried to create a pie chart using json data. but this code does not shows any error and it does not show the chart also.

component.ts file is here

 import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
  export class pieData {
  constructor(
    public kind: string,
    public share: number,
  ) {}
}

@Component({
  selector: 'app-pie-chart',
  templateUrl: './pie-chart.component.html',
  styleUrls: ['./pie-chart.component.css']
})
export class PieChartComponent implements OnInit {

  pieData: pieData[];
  constructor(private httpClient: HttpClient) {}
      ngOnInit() {
    this.getpieData();
  }
      getpieData() {
        this.httpClient.get<any>('../db.json').subscribe(
      Response => {
        console.log(Response);
        this.pieData = Response;
      }
    );

    console.log(this.pieData);
  }
}

component.html file is here

<kendo-chart [transitions]="false" [style.height]="'100%'" [style.width]="'100%'">
  <kendo-chart-tooltip format='{0}%'></kendo-chart-tooltip>
  <kendo-chart-series>
    <kendo-chart-series-item type="pie"
                             [data]="pieData?.pieData"
                             categoryField="kind"
                             field="share"
                             *ngIf="pieData">
      <kendo-chart-series-item-labels [align]="labelAlign"
                                      color="#000"
                                      [content]="labelContent">
      </kendo-chart-series-item-labels>
    </kendo-chart-series-item>
  </kendo-chart-series>
  <kendo-chart-legend [visible]="false"></kendo-chart-legend>
</kendo-chart>

db.json file is here

 "pieData": [
    {
      "id": 1,
      "kind": "Solar",
      "share": 5
    },
    {
      "id": 2,
      "kind": "Wind",
      "share": 2
    },
   ]  
 

Hi

Could i select or disable an "kendo-tabstrip-tab" by name or not with index number ?

Regards

Hi,

We are using kendo grid with editable inputs. Once all the columns in the row is selected and the user tabs out of the last field, we need an event so we  the fields can be validated. Right now, I do not see any evens that I can use.  We have to either add a new row or save to do the validations.

This is cumbersome. It would be great if we somehow have an even to know that the particular row lost focus.

Regards,

Jyothi

I use many grids throughout our application each have sorting and paging turned on and therefore instead of binding to the pageChange and sortChange events I bind to the dataStateChangeEvent. My grids are pretty much all set up the same whereby I bind the skip and sort to a kendo grid state object...example:

<kendo-grid
    #nameSearchResults
    [data]="gridDataResult"
    [loading]="isSearching"
    [pageSize]="state.take"
    [pageable]="{
      buttonCount: 5,
      info: true,
      type: pageableType,
      pageSizes: pageSizes,
      previousNext: true,
      position: 'both'
    }"
    [skip]="state.skip"
    [sort]="state.sort"
    [sortable]="true"
    [filter]="state.filter"
    filterable="menu"
    [resizable]="true"
    [reorderable]="true"
    [columnMenu]="true"
    [filterable]="showFilterMenu"
    (dataStateChange)="dataStateChange($event)"
    (columnResize)="onColumnResized($event)"
    (columnReorder)="onColumnReorder($event)"
    (columnVisibilityChange)="onColumnVisibilityChange($event)"
    [selectable]="selectableSettings"
    (selectionChange)="onNameSelectionChange($event)"
    (cellClick)="onGridCellClick($event)"
    kendoGridSelectBy="nameId"
    [(selectedKeys)]="selectedKeys"
  >

public gridDataResult: GridDataResult;
public pageableType: 'input' | 'input' = 'input';
public selectableSettings = this.isDialog  ? 'single' : 'multiple';
public state: State = {
    skip: 0,
    take: 100,
    sort: [ {field: 'scientificName', dir: 'asc'  } ]
  };

Inside the datastateChange event I first set the state to the state object passed to me and then perform a search which calls out to the server to get data.

dataStateChange(state: DataStateChangeEvent): void {
    this.state = state;
    if (this.gridDataResult && this.gridDataResult.total > 0) {
      this.searchRequest.sortColumns = this.getGridSortColumns(this.state.sort);
      this.searchRequest.currentPage = (this.state.skip / this.state.take);
      this.searchRequest.pageSize = this.state.take;
      this._search();
    }
    
  }

My app is currently using snapshot testing via Jest for a large amount of tests. We are running into issues when testing our components with form inputs where kendo inputs (especially the numeric textbox) are being compiled with dynamic ids that are unique every build.

As an example ): 

As you can see I've added my own id (#hours-input) to the kendo-numerictextbox element but the input element that is nested within the numeric-textbox has a generated id I cannot define (#k-eb1c258b-69a0-7f82-72b5-77634a5c7263). Since the id is generated each time the component is compiled it's different each time the test is run and fails because that id doesn't match the existing snapshot.

I've tried not importing the InputsModule in my test and included a NO_ERRORS_SCHEMA in my test setup but then I get errors because the inputs that the form needs for logic testing aren't created due to the lack of the InputsModule. 

This makes snapshot testing of what's being rendered in our app very difficult. Is there anyway to define what the interior input ids generated or another way we can test inputs in forms without importing the Kendo InputsModule?

Hi

I have an tabstrip with many childs components, how could i easly disable all other tabsstrip ?

Regards

Hi

Currently i have an grid with an async service, i search hoiw selected first row ?

Regards

Hi,

there is this link how to do the above mentioned task:

https://www.telerik.com/kendo-angular-ui/components/uploads/upload/model-binding/#toc-rendering-of-initial-files

In my special case the file isn't rendered.

I have a multistep form with a stepper, where I pass the form variable as input variable to the appr. step screen. The workflow is the following: the user fills in some data on the first screen, then selects a file on the second screen, reviews it on the 3rd screen and if everything is ok, uploads it on the last screen.

This is the code detail of the form:

<form class="k-form" [formGroup]="form" style="margin-top: 2rem">
    <entity
      *ngIf="currentStep === 0"
      [entity]="currentGroup"
      [formPassed]="entityFormPassed"
    >
    </entity>
    <file *ngIf="currentStep === 1" [file]="currentGroup"> </file>
    <overview *ngIf="currentStep === 2" [form]="form"></overview>
    <upload-file *ngIf="currentStep === 3" [form]="form"></upload-file>
  </form>

The form variable contains the file, which I would like to upload as a last step.

My upload-file component looks like this:

<kendo-upload [ngModel]="fileArray"> </kendo-upload>

TS:

import { Component, Input, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FileInfo } from '@progress/kendo-angular-upload';

@Component({
  selector: 'upload-file',
  templateUrl: './upload-file.component.html',
})
export class UploadFileComponent implements OnInit {
  @Input() form!: FormGroup;

  fileArray!: FileInfo[];

  ngOnInit() {
    this.fileArray = <FileInfo[]>this.form.get('file.fileName')?.value;
  }
}

I get the file correctly, it has the appr. value. But the file isn't rendered in the file list of the upload component. If I directly declare the fileArray variable with some test files, it works. The question is, how to get rendered the file, which was provided via input property?

I have another question too.

In your examples to the upload component you use a mock service to simulate the upload process and this changes the progressbar value too.

In my case - as described above - the user will start the upload. Do I need to care about changing the progress bar value somehow via the uploadprogress event or the component cares itself about it? If no, how can I do this?

Thanks for your help.