Telerik Forums
Kendo UI for Angular Forum
0 answers
15 views

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?

 

Vsevolod
Top achievements
Rank 1
Iron
 asked on 13 Mar 2024
0 answers
15 views

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)

"

Daniel
Top achievements
Rank 1
 asked on 11 Mar 2024
2 answers
30 views

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:

Doug
Top achievements
Rank 1
Iron
Iron
Veteran
 answered on 29 Feb 2024
1 answer
13 views
How to disabled dates before today in kendo date range with date input?
0 answers
21 views

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/ **


Nitesh
Top achievements
Rank 1
 asked on 15 Feb 2024
0 answers
13 views

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.

 

soe
Top achievements
Rank 1
 asked on 28 Jan 2024
0 answers
19 views

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)">
Kyrylo
Top achievements
Rank 1
 asked on 05 Jan 2024
0 answers
116 views

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>

<div [innerHTML]="message.text | sanitizeHtml"></div>

</ng-template>

</kendo-chat>

Eros
Top achievements
Rank 1
 asked on 13 Dec 2023
0 answers
28 views
hi,

how to use drag and drop with keyboard? i can focus the dragable item with the tab-key - and then?
is it possible anyway?
eugene
Top achievements
Rank 1
 asked on 28 Nov 2023
1 answer
148 views

Hi All

I have old licence expired on Jul 24, 2021 . I will start new project with Angular 16 but my old licence is not matching with Angular CLI version. When i added my new project my licence its always showing invalid licence ... 

On my old project and version i can compatible with these version but not appropriate with Angular cli 16.1.8 

 "@progress/kendo-angular-barcodes": "^1.0.0",
    "@progress/kendo-angular-buttons": "^6.0.0",
    "@progress/kendo-angular-charts": "^5.4.0",
    "@progress/kendo-angular-common": "^2.0.0",
    "@progress/kendo-angular-conversational-ui": "^4.0.0",
    "@progress/kendo-angular-dateinputs": "^6.0.3",
    "@progress/kendo-angular-dialog": "^5.2.3",
    "@progress/kendo-angular-dropdowns": "^6.0.2",
    "@progress/kendo-angular-excel-export": "^4.0.4",
    "@progress/kendo-angular-filter": "^0.1.6",
    "@progress/kendo-angular-gauges": "^4.1.3",
    "@progress/kendo-angular-grid": "^6.1.3",
    "@progress/kendo-angular-icons": "^11.2.0",
    "@progress/kendo-angular-indicators": "^1.1.3",
    "@progress/kendo-angular-inputs": "^8.0.9",
    "@progress/kendo-angular-intl": "^3.1.3",
    "@progress/kendo-angular-l10n": "^3.0.4",
    "@progress/kendo-angular-label": "^3.1.3",
    "@progress/kendo-angular-layout": "^6.6.0",
    "@progress/kendo-angular-listview": "^2.0.3",
    "@progress/kendo-angular-messages": "^1.49.0",
    "@progress/kendo-angular-notification": "^3.0.5",
    "@progress/kendo-angular-pdf-export": "^3.0.4",
    "@progress/kendo-angular-popup": "^4.0.6",
    "@progress/kendo-angular-progressbar": "^2.0.4",
    "@progress/kendo-angular-treeview": "^6.0.2",
    "@progress/kendo-angular-upload": "^8.0.2",
    "@progress/kendo-data-query": "^1.5.6",
    "@progress/kendo-drawing": "^1.1.2",
    "@progress/kendo-file-saver": "^1.1.1",
    "@progress/kendo-licensing": "^1.0.0",
    "@progress/kendo-svg-icons": "^1.4.0",
    "@progress/kendo-theme-default": "^4.44.0",
    "@progress/kendo-theme-material": "^5.3.1",

 

Can you please suggest which version is compatible with my licence and angular cli 16.1.8

Thanks

 

Martin
Telerik team
 answered on 17 Nov 2023
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?