I am trying to see if i can use tree view control in angular to allow my users to enable and move menu items.
Visually this seems to be not an issue but i am trying to figure out a way to sync the treeview data with my
backend end API. I use the NodeDrop event like this (nodeDrop)="handleDrop($event)" which gets me the start / orin position and where i droped it. But the problem is when i take a Node with some children and move it lets say all the way to top, the index of every Node will change but the only new index avail in the event is the destination index of where i dropped the node. In which case i would have to go and calculate all nodes new index but i hope there is a way to call a function which will provide a node module witch exposes all parents and child nodes and the current index.

I would like my comboboxes to open or close the way a DropDownList works by clicking anywhere on the control, not just the arrow button.

I have tried handling the click event and calling .toggle(), but if I do this then clicking on the arrow button does not work.

Hello,

I want to override existing functionality of kendo grid.

When we press ctrl+down arrow it scroll down to 5 row but instead of that I want whenever I press ctrl+down arrow it goes to last row and whenever I press ctrl+up arrow it goes to top row in kendo grid for angular.

I m using kendo-upload file control as below.

<kendo-upload formcontrolname="cfile" [saveurl] = "fileurl" [upload] ="uploadhandler" >

I could not use interceptor as my existing saveurl request is done by http not through httpclient.Also how i can calculate the file upload percentage

I have tried different ways to format, but couldn't get what I want. In my angualr App, I have data from database, like this

PacificTime TimeZoneCode    TimeZone
2022-02-16 14:00:00.000 US/Eastern  ET

With Kendo format, I was able to convert the time to local time based on the time zone, the result is: Wed Feb 16 2022 17:00:00 GMT-0500 (EST), but when I applied date pipe, it always convert back to old time. I tried is dateformat: 'dd/MM/yyyy hh:mm a' since I need it to be '02/16/2022, 05:00 PM'. I tried other format as well, but none was working. Please tell me which part went wrong, time format, or time zone convert? Below is the code to convert with Kendo. In ts:

    convertTest(dateTime: string, zone: string) {
    const from = new Date(dateTime);
    const to = ZonedDate.fromLocalDate(from, zone)    
    return to
  }
in html:
{{convertTest(dataItem.pacificTime, dataItem.imeZoneCode    ) | date: 'dd/MM/yyyy hh:mm a' }}
 
also tried 
{{dataItem.pacificTime | date: 'dd/MM/yyyy hh:mm a' : dataItem.imeZoneCode }} but still no working.
 
Thanks in advance.

I'm trying to update a project to Angular 13 and after running the tests I end up with this error, has anyone faced this error? and know how to solve it?

I'm using Jest as test runner and jest-preset-angular updated to the last version

NG0204: Can't resolve all parameters for FilterService: (?).

      at getUndecoratedInjectableFactory (node_modules/@angular/core/fesm2015/core.mjs:11501:15)
      at injectableDefOrInjectorDefFactory (node_modules/@angular/core/fesm2015/core.mjs:11491:16)
      at providerToFactory (node_modules/@angular/core/fesm2015/core.mjs:11534:52)
      at providerToRecord (node_modules/@angular/core/fesm2015/core.mjs:11521:25)
      at R3Injector.processProvider (node_modules/@angular/core/fesm2015/core.mjs:11424:24)
      at node_modules/@angular/core/fesm2015/core.mjs:11410:56
      at node_modules/@angular/core/fesm2015/core.mjs:4162:76
          at Array.forEach (<anonymous>)
      at deepForEach (node_modules/@angular/core/fesm2015/core.mjs:4162:11)
      at R3Injector.processInjectorType (node_modules/@angular/core/fesm2015/core.mjs:11410:13)
      at node_modules/@angular/core/fesm2015/core.mjs:11213:48
      at node_modules/@angular/core/fesm2015/core.mjs:4162:76
          at Array.forEach (<anonymous>)
      at deepForEach (node_modules/@angular/core/fesm2015/core.mjs:4162:11)
      at new R3Injector (node_modules/@angular/core/fesm2015/core.mjs:11213:9)
      at createInjectorWithoutInjectorInstances (node_modules/@angular/core/fesm2015/core.mjs:11187:12)
      at new NgModuleRef (node_modules/@angular/core/fesm2015/core.mjs:21812:28)
      at R3TestBedCompiler.finalize (node_modules/@angular/core/fesm2015/testing.mjs:930:30)
      at TestBedRender3.get testModuleRef [as testModuleRef] (node_modules/@angular/core/fesm2015/testing.mjs:1795:49)
      at TestBedRender3.inject (node_modules/@angular/core/fesm2015/testing.mjs:1718:29)
      at inject (node_modules/@angular/core/fesm2015/testing.mjs:1609:37)
      at node_modules/@testing-library/angular/fesm2015/testing-library-angular.mjs:157:15
      at node_modules/tslib/tslib.js:117:75
      at new ZoneAwarePromise (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:1347:33)
      at __awaiter (node_modules/tslib/tslib.js:113:16)
      at createComponent (node_modules/@testing-library/angular/fesm2015/testing-library-angular.mjs:155:12)
      at node_modules/@testing-library/angular/fesm2015/testing-library-angular.mjs:126:33
      at node_modules/tslib/tslib.js:117:75
      at new ZoneAwarePromise (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:1347:33)
      at __awaiter (node_modules/tslib/tslib.js:113:16)
      at renderFixture (node_modules/@testing-library/angular/fesm2015/testing-library-angular.mjs:122:20)
      at node_modules/@testing-library/angular/fesm2015/testing-library-angular.mjs:64:15
      at fulfilled (node_modules/tslib/tslib.js:114:62)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:407:30)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3765:43)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:406:56)
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:167:47)
      at node_modules/zone.js/bundles/zone-testing-bundle.umd.js:1325:38
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:441:35)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvokeTask (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3796:43)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:440:64)
      at Zone.Object.<anonymous>.Zone.runTask (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:212:51)
      at drainMicroTaskQueue (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:627:39)

I want to create drill down option for Kendo single bar chart in angular with a single data source. The parent class contain all data. for the parent chart as well as descendant (child, grand child charts). How I can do it?

component.html file

<kendo-chart [transitions]="false">
  <kendo-chart-title [text]="singleBaChartData.singleBaChartData?.Title"></kendo-chart-title>
  <kendo-chart-series>
    <kendo-chart-series-item type="column"
                             [data]="singleBaChartData.singleBaChartData?.singleBaChartData"
                             categoryField="label"
                             field="value"
                             *ngIf="singleBaChartData"
                             (initialized)="initialized($event)">
      <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>
Component.ts file
import { Component, OnInit } from '@angular/core';
import { Input } from '@angular/core';
@Component({
  selector: 'app-single-bar-chart',
  templateUrl: './single-bar-chart.component.html',
  styleUrls: ['./single-bar-chart.component.css']
})
export class SingleBarChartComponent implements OnInit {
  @Input() singleBaChartData: any = [];
  ngOnInit() { }
}
I am getting data using service file. This is the data set.
"singleBaChartData": {
 "name": "singleBaChartData-TOTAL REVENUE",
 "Title": "TOTAL REVENUE",
 "singleBaChartData": [
  {"label": "Apple","value": "810000","link": "newchart-xml-apple"},        
  "linkeddata":[{
            "id": "apple",
            "linkedchart": {
                "chart": {
                    "caption": "Apple Juice - Quarterly Sales",
                    "subcaption": "Last year",
                    "numberprefix": "$",
                    "theme": "fusion",
                    "rotateValues": "0",
                    "plottooltext": "$label, $dataValue,  $percentValue"
                },
                "data": [{"label": "Q1","value": "157000"},
                    {"label": "Q2","value": "172000"},
                    {"label": "Q3","value": "206000"},
                    {"label": "Q4","value": "275000"}]
            }
        },
     ]
 },
 

.