Questions on Kendo UI for Angular Forum

1 answer

3 views

Why is there no nevigator for line charts?

Hi there,

I am new to Kendo UI Charts. Am I getting this right? The navigator is only for stock charts?
I don't get why, this would also be very helpfull for line charts. I could only find a very old question regarding this, with not a really good answer.

Is it still the case that there is no way to display a line chart with a navigator? Or is it possible to display a line in the stockchart kind of similar to a line chart instead of candlesticks?

Best Regards,

FirestormHell

Charts

General Discussions

ToolBar

answered on 11 Apr 2024

1 answer

15 views

Hi, How to retain the values selected in kendo multiselect in the first page of the two form pages upon going to second page

I had two page form in which in first page using kendo multiselect and after selecting the options in the first page and going to second page and then returning back to previous page i.e first page where I have selected options is getting blank how to retain the values??

General Discussions

MultiSelect

answered on 03 Apr 2024

0 answers

19 views

Filter kendo angular grid if columns is associated with a complex objects

Hello!

I have a grid filter is specified as "menu" ([filterable]="'menu'")

Some the grid columns are created dynamically like this:

<kendo-grid-column *ngFor="let c of myColumnsObjects"
        field="{{ c.name }}"
        title="{{ c.title }}"
    >
    <ng-template
          kendoGridFilterMenuTemplate
          let-column="column"
          let-filter="filter"
          let-filterService="filterService"
        >
          <app-mycolumn-filter
            [field]="column.field"
            [filterService]="filterService"
            [currentFilter]="filter"
            [distinctData1]="getDistinctData1(column.field)"
            [distinctData2]="getDistinctData2(column.field)"
            [distinctData3]="getDistinctData3(column.field)"
          ></app-mycolumn-filter>
        </ng-template>
    <ng-template 
      kendoGridCellTemplate 
      let-dataItem >
        <ng-container *ngIf="getObjectByColumnName(c.name, dataItem) as myItem">
          <div class="{{getClassByObject(myItem)}}">
            <div>{{myItem.dataOfField1}}</div>
            <div>{{myItem.dataOfField2}}</div>
            <div>{{myItem.dataOfField3}}</div>
          </div>
        </ng-container>
    </ng-template>
    </kendo-grid-column>

Where

myColumnsObjects is

interface IMyDynamicallyColumn {
  name: string;
  title: string;
}

dataItems is array of

interface IMyData {
  id: number;
  name: string;
  somecomlexobject: any;
  ....
  myItems: IMyItem[];
  otheItems: IOtherItem[];
}

myItem is:

interface IMyItem {
  id: number;
  dataOfField1: string;
  dataOfField2: number;
  dataOfField3: EMyItemState;
}

const enum EMyItemState {
  State1 = 'state1',
  State2 = 'state2',
  ...
  State<N> = 'state<n>'
}

Input data distinctData1, distinctData2 and distinctData3 used in angular's component of app-mycontrol-filter.

In this case, the standard filter does not work.

How can I organize a filter on an objects (type is IMyItem) associated with a column using all the properties of the object?

Filter

General Discussions

Grid

asked on 13 Mar 2024

0 answers

23 views

Kendo Splitbutton + Module Federation

Hi, we want to split our applications via Module Federation. Works so far except for the applications that use Kendo UI (simple split button is enough). We always get the following error message.

"

ERROR Error: Uncaught (in promise): Error: It looks like your application or one of its dependencies is using i18n.
Angular 9 introduced a global `$localize()` function that needs to be loaded.
Please run `ng add @angular/localize` from the Angular CLI.
(For non-CLI projects, add `import '@angular/localize/init';` to your `polyfills.ts` file.
For server-side rendering applications add the import to your `main.server.ts` file.)
Error: It looks like your application or one of its dependencies is using i18n.
Angular 9 introduced a global `$localize()` function that needs to be loaded.
Please run `ng add @angular/localize` from the Angular CLI.
(For non-CLI projects, add `import '@angular/localize/init';` to your `polyfills.ts` file.
For server-side rendering applications add the import to your `main.server.ts` file.)
at _global.$localize (core.mjs:31692:15)
at consts (progress-kendo-angular-buttons.mjs:2559:31)
at createTView (core.mjs:12070:60)
at getOrCreateComponentTView (core.mjs:12045:28)
at addComponentLogic (core.mjs:12780:19)
at instantiateAllDirectives (core.mjs:12583:9)
at createDirectivesInstances (core.mjs:12008:5)
at ɵɵelementStart (core.mjs:16299:9)
at MyComponent_Template (my-component.component.html:2:6)
at executeTemplate (core.mjs:11966:13)
at resolvePromise (zone.js:1193:31)
at resolvePromise (zone.js:1147:17)
at zone.js:1260:17
at _ZoneDelegate.invokeTask (zone.js:402:31)
at core.mjs:10715:55
at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:10715:36)
at _ZoneDelegate.invokeTask (zone.js:401:60)
at Object.onInvokeTask (core.mjs:11028:33)
at _ZoneDelegate.invokeTask (zone.js:401:60)
at Zone.runTask (zone.js:173:47)

"

General Discussions

asked on 11 Mar 2024

2 answers

33 views

CSS in dev tools is empty for Kendo UI for Angular components

When I inspect a Kendo UI component, like kendo-grid, in dev tools, no CSS is displayed. I can see that there are css classes applied to the component, k-grid and k-grid-md, but there's nothing displayed in dev tools for those css classes. I verified that I can create my own component, put it on my home component (as I've done with Kendo UI components), apply css classes to it and that css shows up in dev tools as I expect when I inspect it. So it only appears that I can't see the css for Kendo UI components. What do I need to do to get the css to show up?

Here's the element in dev tools:

Here's what the css pane in dev tools looks like:

General Discussions

answered on 29 Feb 2024

1 answer

16 views

kendo date range disabled dates

How to disabled dates before today in kendo date range with date input?

answered on 27 Feb 2024

0 answers

49 views

Getting SassError: $color: null is not a color.

I am getting SassError while importing kendo-theme-bootstrap. I am trying with:

@import '../../../../../node_modules/@progress/kendo-theme-bootstrap/scss/grid/index';

Below is the error:

./projects/admin/src/app/shared/layout/wrapper/wrapper.component.scss?ngResource - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: null is not a color.
    ╷
185 │     "r": red($color),
    │          ^^^^^^^^^^^
    ╵
  node_modules/@progress/kendo-theme-bootstrap/modules/bootstrap/scss/_functions.scss 185:10                                  luminance()
  node_modules/@progress/kendo-theme-bootstrap/modules/@progress/kendo-theme-default/scss/core/functions/_colors.scss 416:12  contrast-wcag()
  node_modules/@progress/kendo-theme-bootstrap/modules/@progress/kendo-theme-default/scss/button/_theme.scss 75:24            @content
  node_modules/@progress/kendo-theme-bootstrap/modules/@progress/kendo-theme-default/scss/core/mixins/_import-once.scss 12:9  exports()
  node_modules/@progress/kendo-theme-bootstrap/modules/@progress/kendo-theme-default/scss/button/_theme.scss 1:1              @import
  node_modules/@progress/kendo-theme-bootstrap/scss/button/_theme.scss 1:9                                                    @import
  node_modules/@progress/kendo-theme-bootstrap/scss/button/_index.scss 15:9                                                   @import
  node_modules/@progress/kendo-theme-bootstrap/scss/toolbar/_index.scss 6:9                                                   @import
  node_modules/@progress/kendo-theme-bootstrap/scss/adaptive/_index.scss 9:9                                                  @import
  node_modules/@progress/kendo-theme-bootstrap/scss/grid/_index.scss 6:9                                                      @import
  projects/lib/src/lib/app-theme/kendo.scss 37:9                                                                              @import
  projects/admin/src/app/shared/layout/wrapper/wrapper.component.scss 6:9                                                     root stylesheet



** Angular Live Development Server is listening on localhost:4202, open your browser on http://localhost:4202/ **

General Discussions

Styling

asked on 15 Feb 2024

0 answers

15 views

c#program

my c# code which write the word "hello" on console and I want to print that word of result directly on paper by using EPSON L1800.How to code it.

General Discussions

asked on 28 Jan 2024

0 answers

25 views

TreeList selected row on expand/collapse event

Hi,

please help to set k-selected class on expand/collapse event in treeList (angular 16 app).

By default rows are highlighted on select event (k-selected class applied), but I need to highlight it on expand, collapse, select events.

I was trying to use rowCallback for setting/removing selected class and expand/collapse events for getting selected row id, but currently several rows are staying selected at the same time when should be selected only one (from the last action). Am I missing something, or is there a better approach?

rowCallback = (context) => {
return this.zone.run(() => {
if (context.dataItem.id === this.selectedNodeId) {
return {
'k-selected': true
      }
    }
else if (context.dataItem.id === this.previousSelectedNodeId) {
return {
'k-selected': false
      }
    }
  });
}
onAction(e) {
this.zone.run(() => {
const row = this.treeList.view.data.find(dataItem => dataItem.data.id === e.dataItem.id);
if (row) {
this.previousSelectedNodeId = this.selectedNodeId;
this.selectedNodeId = row.data.id;
    }
  });

}
 
<kendo-treelist #treeList kendoTreeListExpandable kendoTreeListSelectable
  [data]="(loadNodes$ | async)"
  [fetchChildren]="fetchChildren"
  [hasChildren]="hasChildren"
  (selectionChange)="onSelectionChange($event)"
  [rowClass]="rowCallback"
  (expand)="onAction($event)"
  (collapse)="onAction($event)">

asked on 05 Jan 2024

0 answers

152 views

overriding css styles without using ::ng-deep

I am trying to get rid of the current ng-deep use cases in our app.

The class that being override is as follows:

css:
::ng-deep .k-chat.k-selected {
margin-bottom: 0px !important;
};

html:
<kendo-chat class="chatbox" [messages]="messages" [user]="user">

<ng-template kendoChatMessageTemplate let-message>

</ng-template>

</kendo-chat>

General Discussions