Questions on Kendo UI for Angular Forum

1 answer

145 views

Time Picker - Default to AM or PM programmatically

Hi,

I was wondering if it is possible to default the AM/PM designator programmatically, without having to set an actual time value to the time picker?

The min property does work, however it does not seem to synchronise with the AM/PM designator on the actual input field.

For example, if I've set the min to be 1:00PM, then the list actually does not have the AM available - which is correct. However, the input field still has "hh:mm am" displaying.

I suppose one other way could be to change the dayPeriod placeholder text from AM to PM, if that is at all possible using the currently existing API.

DateTimePicker

TimePicker

answered on 23 Nov 2021

1 answer

154 views

Kendo and Angular 13 with RxJs7 and Typescript 4.4

Hi,

Could i use Kendo component with RxJs7 and Typescript 4.4 in Angular13 ?

Regards

General Discussions

answered on 23 Nov 2021

1 answer

860 views

autoFocusedElement + Floating Label = Error

I am using autoFocusedElement to set focus to the first input on a dialog as described at https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/initial-focus/. When that input is wrapped in a floating label, it appears to work, but it produces the following error in the console:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'k-state-focused: false'. Current value: 'k-state-focused: true'.

Am I doing something wrong, or is there anything I can do to work around this? Here is the modified template that I used to reproduce the error:

        <div class="example-wrapper">
            <button kendoButton *ngIf="!opened" (click)="open()">Open dialog</button>
            <kendo-dialog *ngIf="opened"
                autoFocusedElement="#username"
                title="Please confirm"
                (close)="close('cancel')"
                [minWidth]="250"
                [width]="450"
            >
                <div style="margin: 30px; text-align: center;">
                    <p>Enter your username below</p>

                    <kendo-floatinglabel text="User Name">
                      <input kendoTextBox id="username" placeholder="Your username" style="width: 200px"/>
                    </kendo-floatinglabel>
                </div>
                <kendo-dialog-actions>
                    <button kendoButton (click)="close('no')">No</button>
                    <button kendoButton (click)="close('yes')" primary="true">Yes</button>
                </kendo-dialog-actions>
            </kendo-dialog>
        </div>

Dialog

FloatingLabel

answered on 22 Nov 2021

1 answer

257 views

Shared tooltip not working in stock chart

Hi Team,

I am trying to use shared tooltip in stock chart but it is not working as expected. However it is working fine with line chart. Can anyone help me on this?

Thanks in advance.

Charts

answered on 22 Nov 2021

1 answer

126 views

Angular Component has become slow when multiple kendo-grid's are there

I'm having six tabs and in all six tabs, I'm having a kendo-grid table. when I load the component it's becoming too slow(40 seconds) when working with 500 records. and I'm loading data from API(Backend) and data comes from the backend very quickly(1 second) and pagination is enabled.

I have even implemented virtual scrolling but didn't help me.

<kendo-grid [data]="gridDataOpen" [loading]="loaderVisible" [filterable]="true" [filter]="state.filter" 
                 scrollable="virtual" [rowHeight]="35" [sortable]="true" [sort]="state.sort" [pageSize]="state.take"    
[skip]="state.skip"[height]="700"(dataStateChange)="dataStateChange($event)"(pageChange)="pageChange($event)">
pageChange(e) {
    this.loaderVisible = true;
    this.state.skip = e.skip;
    this.loadItems(e);
}
public pageSize = 100;
  loadItems(state): void {
    this.gridDataOpen = {
      data: this.tableDataOpen.slice(this.state.skip, this.state.skip + this.pageSize),
      total: this.tableDataOpen.length,
    };
    this.gridDataAccepted = {
      data: this.tableDataAccepted.slice(this.state.skip, this.state.skip + this.pageSize),
      total: this.tableDataAccepted.length,
    };
    this.gridDataSubmitted = {
      data: this.tableDataSubmitted.slice(this.state.skip, this.state.skip + this.pageSize),
      total: this.tableDataSubmitted.length,
    };
    this.gridDataSubmissionAccepted = {
      data: this.tableDataSubmissionAccepted.slice(this.state.skip, this.state.skip + this.pageSize),
      total: this.tableDataSubmissionAccepted.length,
    };
    this.gridDataRejected = {
      data: this.tableDataRejected.slice(this.state.skip, this.state.skip + this.pageSize),
      total: this.tableDataRejected.length,
    };
    this.gridDataCancelled = {
      data: this.tableDataCancelled.slice(this.state.skip, this.state.skip + this.pageSize),
      total: this.tableDataCancelled.length,
    };
    this.loaderVisible = false;
  }
 

answered on 19 Nov 2021

1 answer

125 views

Slowness at selecting rows when page size is large

Hi,

We use editable grids with multiple selection that sometimes have a page size of 500 or larger. In this case, when selecting another row when one or more rows are already selected, it takes few seconds to execute the operation. Is there anything that can be done to make this work faster?

Thanks,

Iuliana

Grid

updated answer on 19 Nov 2021

1 answer

104 views

Changing only 1 label on an axis

hello,

I have been searching myself silly on how to change just 1 label in an axis.I have searched for hours on how to do this, but can not find it.

For instance : I have a x-axis that has every month of the year. But I want to change the color of the current month.

As far as i can tell, I have to do something with the axisLabelVisualArgs, but for the life of me, I can't figure out how I can change a text's color dependant on a condition.

This is the result I want to get :

Charts

answered on 18 Nov 2021

1 answer

142 views

Highlight grid cell when clicked

Hi,

When a user clicks a cell in the grid, is there any way to get the <td> of clicked cell in order to modify the styling (for example, add a solid border) as a way of highlighting the clicked cell? I would like the cell to remain highlighted until I programmatically clear the highlighting, so that I can highlight more than one cell. Please note this has nothing to do with editing.

I'd appreciate any pointers. Thanks in advance.

Alvin

Grid

answered on 17 Nov 2021

1 answer

164 views

Kendo Tile layout drag is not working properly inside Kendo Tabstrip

Hi

I am trying to populate Kendo Tile Layout inside Kendo Tabstrip but seems there is a bug when I drag the item. The position of selected tile is broken initially

When I click the red circle area to drag, the tile is moving to some strange place(position where you see 'Page Views' tile). This does not happen when I populate tile layout without trabstrip.

Any idea how to resolve this? I upgraded Kendo Angular lib to the latest.

* Code is attached.

Kind regards

David

TabStrip

TileLayout

answered on 17 Nov 2021

1 answer

1.1K+ views

Storybook for Angular not displaying elements created by Kendo UI

I am trying to use Storybook for an Angular project. The Angular project is utilizing Kendo UI's kendo grid elements throughout component templates.

The issue is any piece of a component template using a kendo element does not show in the Storybook interface when I am running it. If I change to standard html elements, the data does display as expected.

What do I have setup incorrectly that is preventing these custom elements from displaying in Storybook?

Any help or ideas would be appreciated and am happy to provide more context to anything. Some code samples below.

Versions
@angular/core - ^12.1.0<br/>
@progress/kendo-angular-grid - ^5.4.0<br/>
@storybook/angular - ^6.3.4

.storybook/main.js file

module.exports = {
  "stories": [
    "../src/**/*.story.mdx",
    "../src/**/*.story.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
  ],
  "core": {
    "builder": "webpack5"
  }
}

component story

import { HttpClientModule } from '@angular/common/http';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterTestingModule } from '@angular/router/testing';
import { moduleMetadata } from '@storybook/angular';
import { Story, Meta } from '@storybook/angular/types-6-0';
import DocumentsComponent from './documents.component';

export default {
  title: 'Components/Pages/Documents',
  component: DocumentsComponent,
  argTypes: {},
  decorators: [
    moduleMetadata({
      imports: [HttpClientModule, RouterTestingModule],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    }),
  ],
} as Meta;

const Template: Story<DocumentsComponent> = (args: DocumentsComponent) => ({
  props: args,
});

export const DocumentsList = Template.bind({});

component template file

<div class="documents">
  <button kendoButton (click)="addNew()" class="add-new" icon="plus" look="flat">Add New</button>
  <h1>Documents</h1>


  <!-- start block added to confirm data was available when rendering -->
  <div *ngFor="let data of gridData">
    <h2>{{data.id}}</h2>
  </div>
  <!-- end block added to confirm data was available when rendering -->


  <kendo-grid
    [data]="gridData"
    [sort]="sort"
    [sortable]="{ allowUnsort: true, mode: 'multiple' }"
    (sortChange)="sortChange($event)"
  >
    <kendo-grid-column field="id" title="ID" [width]="100"> </kendo-grid-column>
    <kendo-grid-column field="assignee.username" title="Assignee" [width]="100"> </kendo-grid-column>
    <kendo-grid-column field="status" title="Status" [width]="120">
...

General Discussions

Grid

answered on 17 Nov 2021