Good morning,

I am using treeview to display a list and it's children underneath. I want to implement the drag and drop functionality, soI can reorder the list.

I have 2 questions regarding the drag and drop functionality

1. How do I keep track of the order, to initially save, but to reinstate it, after i revisit the list ?

Right now I keep track of parent Id's per item. But if I want to reorder the children under it's parent .. it always reorders them by Id.

2.  I was wondering how do I expand a parent when hovering over a parent in the list

When starting to drag a list item ... I want to insert it into a parent .. the parent just stays closed. Is there  a way to expand the parent on hover?

Thank you for the help up front

Hi,

I am trying to open a KendoUI WIndow in the maximized state, or to set the state on the window programmatically, but nothing worked - the state on the Kendo window object is still "default".

Here is that I have tried until now:

window.state = "maximized";

window.stateChange.next("maximized");

window.titleBarView.service.maximizeAction();

import { WindowService } from '@progress/kendo-angular-dialog';

export class MyWindowComponent {
   constructor(private windowService: WindowService){}

   public openWindow() {
      this.windowService.open({
         content: MyModalComponent,
	 title: 'Modal Form View',
	 resizable: true,
	 height: 500,
	 width: 600,
	 top: 100,
	 left: 200,
	 state: 'maximized'
      });
   }
}

Am I setting the state the correct way?

Or is there any other way I could achieve this?

Best regards,

Mike Fechner

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