Telerik Forums
Kendo UI for Angular Forum
2 answers
223 views

Hi Team,

As far as I can see, the ability to use custom templates in headers is applicable to Day, Week, WorkWeek, and Timeline view: https://www.telerik.com/kendo-angular-ui/components/scheduler/api/DateHeaderTemplateDirective/

Is there a similar possibility for a Month view?

Thanks,

Rita

Georgi
Telerik team
 answered on 12 Nov 2021
2 answers
284 views

I tried to use the datepicker component and are having issues/errors

at first it asked me to add the angular localize package, which I did and solved the first issue.

But the it started throwing another error being'

core.js:6486 ERROR NullInjectorError: R3InjectorError(AppModule)[PopupService -> PopupService -> PopupService]: 
  NullInjectorError: No provider for PopupService!
    at NullInjector.get (core.js:11108)
    at R3Injector.get (core.js:11275)
    at R3Injector.get (core.js:11275)
    at R3Injector.get (core.js:11275)
    at NgModuleRef$1.get (core.js:25340)
    at Object.get (core.js:25054)
    at lookupTokenUsingModuleInjector (core.js:3342)
    at getOrCreateInjectable (core.js:3454)
    at Module.ɵɵdirectiveInject (core.js:14744)
    at NodeInjectorFactory.DatePickerComponent_Factory [as factory] (index.js:6790)

Do I need to make my own popupservice ? I was under the assumption that the kendo installs added all dependencies.

Martin Bechev
Telerik team
 answered on 12 Nov 2021
1 answer
263 views

Hi

I have problem with your sample in Angular12

 error NG8002: Can't bind to 'allowCustom' since it isn't a known property of 'kendo-combobox'

https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/custom-values/

 

Could you help me

Thanks

 

Hetali
Telerik team
 updated answer on 11 Nov 2021
1 answer
92 views

Hi,

I am trying to make legend in chart look the same as in series (dotted). It's said I should use custom visuals. But example is missing at the link below https://www.telerik.com/kendo-angular-ui/components/charts/elements/legend/ :

Can you please update this?

Hetali
Telerik team
 answered on 11 Nov 2021
0 answers
128 views

Hello, 

I am facing one challenges, my requirement is to make datetimepicker as same as http://dojo.telerik.com/OrIrINir UI. I am using angular 9. I am unable to make datetimepicker UI as same as given in the link using angular 9. I gone through the documentation of Kendo UI with Angular but I found the different UI for datetimepicker. Kindly guide me. Thanks in advance.

 
Amit
Top achievements
Rank 1
 updated question on 11 Nov 2021
1 answer
186 views

Hello,

I'll ask about two things regards to Scheduler.

1. Possibility to have group resources with property parentValueId, which allows assigning items to the group. I found that feature for jQuery scheduler (jQuery page), but it still not available for Angular. Are you planing add same feature for Angular version?

2. It's doable to make integration between kendo Grid and Scheduler, that means dragging an item from grid and drop on scheduler (jQuery soultion)

Martin Bechev
Telerik team
 answered on 11 Nov 2021
1 answer
2.4K+ views

Hello everyone, as the title says I'm trying to load my data asynchronously but I'm not sure I'm proceeding the right way, here's my code

TS:

gridData$!: Observable<I.Block[]>;

//this is a function that is called when the user submits a form
search(): void {
    this.gridData$ = this.httpService.getBlockList(variousParameters);
}

//the getBlockList function simply does a http post call
getBlockList(variousParameters): Observable<I.Block[]> {
    return this.http
      .post<I.Block[]>(someUrl, variousParameters)
}


HTML, version 1 who gave me error: Type 'Block[] | null' is not assignable to type 'any[]'

<kendo-grid
      *ngIf="searchBtnClicked"
      gdArea="results"
      [kendoGridBinding]="gridData$ | async"

      [pageable]="true"
      [pageSize]="100"

      [selectable]="{checkboxOnly: true}"

      (selectionChange)="kgOnSelectionChange($event)"
      (dataStateChange)="kgOnDataStateChange($event)"

      >
      <!-- HEADERS -->
      <kendo-grid-checkbox-column [width]="25" [showSelectAll]="true"></kendo-grid-checkbox-column>
      <!-- CHECKBOX -->

      <kendo-grid-column *ngFor="let col of columns" [field]="col.fieldname" [title]="col.displayedname" [width]="col.width" [hidden]="col.hidden">

      </kendo-grid-column>
    </kendo-grid>

So I tried this, which doesn't give me errors and seems to work, but I'm not sure it's the right way to proceed.
I don't think it's correct because, even with pageSize set to 100 and 16 columns (5 of which hidden), it takes up to 8 seconds to load a single page (on a total of only 800 results, with the total response size being only 31kb)
I read https://www.telerik.com/blogs/how-to-get-the-best-grid-performance but I can't really neither lower the number or columns or the results displayed per page.

HTML version 2, works but really slow

<ng-container *ngIf="gridData$ | async as gridData">
   <kendo-grid
      *ngIf="searchBtnClicked"
      gdArea="results"
      [kendoGridBinding]="gridData"

      [pageable]="true"
      [pageSize]="100"

      [selectable]="{checkboxOnly: true}"

      (selectionChange)="kgOnSelectionChange($event)"
      (dataStateChange)="kgOnDataStateChange($event)"

      >
      <!-- HEADERS -->
      <kendo-grid-checkbox-column [width]="25" [showSelectAll]="true"></kendo-grid-checkbox-column>
      <!-- CHECKBOX -->

      <kendo-grid-column *ngFor="let col of columns" [field]="col.fieldname" [title]="col.displayedname" [width]="col.width" [hidden]="col.hidden">

      </kendo-grid-column>
    </kendo-grid>
 </ng-container>

I also read https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/ but I couldn't understand the async example (the second example, since the first one doesn't use async pipe but subscribes to the observable). On this point, I think that adding "dummy comments" would help first time Kendo users like me.

Thanks in advance
Martin Bechev
Telerik team
 answered on 11 Nov 2021
1 answer
198 views

I have a Kendo date range setup as follows:

<kendo-daterange>
    <kendo-dateinput 
       formControlName="trDateTime"
       kendoDateRangeStartInput 
       autoCorrectOn="blur"
       (valueChange)='updateFormTime()'>
    </kendo-dateinput>
    <kendo-dateinput 
       formControlName="trTillDateTime"
       kendoDateRangeEndInput
       autoCorrectOn="blur"
       (valueChange)='updateFormTime()'>
    </kendo-dateinput>
  <kendo-daterange-popup (close)="onDateRangePopUpClosed()" #dateRangeModal></kendo-daterange-popup>
</kendo-daterange>

And we're trying to handle the date input using the following function


export function updateFormTime(formGroup: FormGroup) {
  const formControls = formGroup.controls;

  const trDate = new Date(formControls['trDateTime'].value);
  const trTillDate = new Date(formControls['trTillDateTime'].value);
  
  let startTime: Date;
  let endTime: Date;

  startTime = DateHelper.timeToDate(formControls['fcfsFrom'].value, trDate);
  endTime = DateHelper.timeToDate(formControls['fcfsTo'].value, trDate);

  if (startTime == null) {
    startTime = new Date(0, 0, 0, 0, 0, 0, 0);
  }

  if (endTime == null) {
    endTime = new Date(0, 0, 0, 0, 0, 0, 0);
  }

  const trDateTime = new Date(trDate.getFullYear(), trDate.getMonth(), trDate.getDate(), startTime.getHours(), startTime.getMinutes(), startTime.getSeconds());
  const trTillDateTime = new Date(trTillDate.getFullYear(), trTillDate.getMonth(), trTillDate.getDate(), endTime.getHours(), endTime.getMinutes(), endTime.getSeconds());

  formGroup.patchValue({
    trDateTime: trDateTime,
    trTillDateTime: trTillDateTime,
  });
}

 

The problem is that when the user goes to select a start date that's later than the end date, it only updates the end date when it should update the start date. The autoCorrectOn directive handles that, and it does if I disable the updateFormTime function but we need that function and it doesn't work if I leave it in there. Not having much luck finding the precedence between the blur that the autoCorrectOn directive follows and valueChange.  

The problem is that we need to modify the date values to include times from other controls.  It appears that the patchValue call is firing the valueChange on the date inputs when I do this and it messes up the autoCorrecOn function.

Thanks in advance.

 

Nate
Top achievements
Rank 1
Iron
 answered on 10 Nov 2021
0 answers
98 views

Hello

starting with

<ng-content>
</ng-content>
<ng-template #TodayTranslation>
    <kendo-datepicker-messages today="HOY"></kendo-datepicker-messages>

</ng-template>

 

I am having trouble dynamically loading kendo-datepicker-messages onto a projected kendo-datepicker. My current approach is to 

get a references to the ng-content and ng-template that will hold the kendo-datepicker like 

@ContentChild(DatePickerComponent, { static:true })  kendoDatePickerDatePickerComponent;

@ViewChild('TodayTranslation', { static: true })
  todayTranslationRefTemplateRef<DatePickerCustomMessagesComponent>;

then in AfterContentInit I can create the embeded view and insert it.

 const emb = this.kendoDatePicker.container.createEmbeddedView(this.todayTranslationRef);
 

this.kendoDatePicker.container.insert(emb);

However, the result is a

<kendo-datepicker _ngcontent-qsx-c74="" id="FromCreatedDate-input-to-date"
    class="k-widget k-datepicker ng-untouched ng-pristine ng-valid">
    <!--bindings={
  "ng-reflect-today": "Today",
  "ng-reflect-toggle": "Toggle calendar",
  "ng-reflect-prev-button-title": "Navigate to previous view",
  "ng-reflect-next-button-title": "Navigate to next view"
}--><span class="k-picker-wrap">
        <kendo-dateinput ng-reflect-focusable-id="k-c32845aa-a2d8-4f7c-a99f-96f6" ng-reflect-disabled="false"
            ng-reflect-readonly="false" ng-reflect-title="" ng-reflect-tabindex="0" ng-reflect-role="spinbutton"
            ng-reflect-aria-read-only="false" ng-reflect-format="MM-dd-yyyy" ng-reflect-placeholder=""
            ng-reflect-max="Thu Dec 31 2099 00:00:00 GMT-0" ng-reflect-min="Mon Jan 01 1900 00:00:00 GMT-0"
            ng-reflect-incomplete-date-validation="false" ng-reflect-two-digit-year-max="68"
            ng-reflect-is-popup-open="false" ng-reflect-has-popup="true" class="k-widget k-dateinput">
            <!--bindings={
  "ng-reflect-decrement": "Decrease value",
  "ng-reflect-increment": "Increase value"
}--><span class="k-dateinput-wrap"><input autocapitalize="off" autocomplete="off" autocorrect="off" class="k-input"
                    spellcheck="false" placeholder="" ng-reflect-events="[object Object]"
                    ng-reflect-scope="[object Object]" role="spinbutton" aria-readonly="false"
                    id="k-c32845aa-a2d8-4f7c-a99f-96f6afc7d229" title="" tabindex="0" aria-expanded="false"
                    aria-haspopup="true">
                <!--bindings={
  "ng-reflect-ng-if": "false"
}-->
            </span>
        </kendo-dateinput><span class="k-select" role="button" ng-reflect-events="[object Object]"
            ng-reflect-scope="[object Object]" title="Toggle calendar" aria-label="Toggle calendar"><span
                class="k-icon k-i-calendar"></span></span>
    </span>
    <!---->
    <kendo-datepicker-messages _ngcontent-qsx-c79="" ng-reflect-today="HOY" class="ng-star-inserted">
    </kendo-datepicker-messages>
    <!---->

</kendo-datepicker>

Although there is no errors the 'Today' word in the calendar of the kendo-datepicker does not translate to 'HOY'

Is there a better way to dynamically load kendo-datepicker-messages into a projected kendo-datepicker?

victor
Top achievements
Rank 1
 updated question on 10 Nov 2021
1 answer
195 views

Hello. In chart series item tooltip. I had create Scatter chart. When I hover on point I can show tooltip only with xField, yField with format property or from tooltip template with let-value. But I have big array with other fields. which I would like to show. Also I would like to have index or let-index in tooltip template. 

Thank you.

Yanmario
Telerik team
 answered on 10 Nov 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?