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"}]
            }
        },
     ]
 },
 

.

Hello,

I'm trying to implement a case when the user picks in pager pageSize. When page size will be more than 10 I want to show a confirmation dialog to user, and when the user cancels his choice, set the page size to the previous value.

But have a strange situation, pageSize set back not every time.

Prepared code example: https://stackblitz.com/edit/angular-czu2cd-zfshel?file=app%2Fapp.component.ts

Steps to reproduce:

- select page size 5, page size is set to 5

-select page size 20, page size set to 10

-select page size 20again, this time page size set to 20

Want to ask a proper way to set page size from code.

Thanks

Hi,

When an angular application with kendo dropdown list and date range control is being deployed through CICD pipeline, it does not apply the style and hence the UI for kendo controls is not shown as shown on local machine.

Pl. help.

Trying to open examples from Kendo Angular docs in StackBlitz to no avail.  Something broken with that integration?

Example, just go here:

https://www.telerik.com/kendo-angular-ui/components/listview/

Click on "Edit in StackBlitz" button.

Note console errors 

I am using Kendo Angular UI drawing to generate signature using method "exportSVG()" and is generating url is 64base svg (data:image/svg+xml;base64, ..............) and saving to DB, thing are working fine till I save the data, but while I bind this generated base64 to my display signature component it seems like "cropped". 

I have tried to resize this image but no luck as its 64based image. 

Is it possible to get the cursor to the start of the editor once it is focused? 

I looked at the API and could not find a reliable manner of doing so.

My current use case is that I need to prefill the editor with (possibly) a lot of content. Once filled, I would need to bring the cursor back to the very start of the editor. 

Thanks in advance!