Questions on Kendo UI for Angular Forum

0 answers

22 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

33 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

0 answers

75 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

19 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

28 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

204 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

asked on 13 Dec 2023

0 answers

44 views

use drag and drop component with keyboard

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?

Accessibility

General Discussions

asked on 28 Nov 2023

0 answers

33 views

Scheduler Mulitweek Resource Group Header width

Hello,

I have a multi-week view scheduler, in which i use the kendo kendoSchedulerGroupHeaderTemplate directive to style my groups according to some resources.

I want to impose a max-width on this, in order to make sure that the names of the groups are within proportion. (See example: Too-long.png)

I have my html code:

<ng-template kendoSchedulerGroupHeaderTemplate let-resource="resource">
  <div class="group-header-wrapper">
    <div class="group-header-main">{{ resource.text }}</div>
    <div class="group-header-alt">{{ resource.line }}</div>
  </div>      
</ng-template>

and my css:

.group-header-wrapper {
  //code
}

.group-header-main {
  width: 100%;
  text-align: left;
  background-color: $secondary-color;
  padding: 2px 4px;
}

.group-header-alt {
  width: 100%;
  text-align: left;
  color: white;
  padding: 2px 4px;
}

adding max-width to group-header-wrapper. doesn't fix this. Because the event become unaligned. (see example: unaligned.png)

How can I style this so the events are aligned with their respective slots and days?

Thanks,

Govert Jaap

asked on 17 Oct 2023

0 answers

53 views

Detached FontIcons from Themes

As of R3 2023 release, the font icons are detached from the themes css files. If you are still using font icons, make sure to include a reference to the font icons in your applications. You can read more information about the change in the following blog post: https://www.telerik.com/blogs/future-icons-telerik-kendo-ui-themes. It contains essential information about the change for all products and migration articles to svg icons.

General Discussions

asked on 06 Oct 2023

0 answers

46 views

Standard component based on Kendo Treelist

Hi,
I am making a standard treelist component based on kendo treelist, and im having some problem which i dont know how to fix it.
2. I want to allow user can add kendo treelist column and use ng-template KendoTreelistCell as `Usage code` below but it keep throw this error:
Uncaught (in promise): NullInjectorError: R3InjectorError(PMarketingModule)[OptionChangesService -> OptionChangesService -> OptionChangesService -> OptionChangesService]:
NullInjectorError: No provider for OptionChangesService!
NullInjectorError: R3InjectorError(PMarketingModule)[OptionChangesService -> OptionChangesService -> OptionChangesService -> OptionChangesService]:
NullInjectorError: No provider for OptionChangesService!
https://stackblitz.com/edit/angular-keazja?file=src%2Fapp%2Fapp.component.ts
My component treelist:

export class PKendoTreelistComponent<T> implements OnInit, AfterViewInit {
  //Retrive input with many type of input array
  @Input() rootData: Subject<T[]> = new Subject<T[]>();
  @Input() hasChildrenFn: (item: T) => boolean;
  @Input() fetchChildrenFn: (item: T) => T[];
  @ViewChild('customTreeList') public customTreelist: TreeListComponent;
  @ViewChild('treelistContent', { static: true }) treelistContent!: TemplateRef<any>;
  @ContentChildren(PKendoTreeListColumnComponent) columns;
  @ContentChildren(ColumnGroupComponent) columnGroups;
  constructor() {}
  ngOnInit(): void {
    console.log(this.treelistContent);
  }
  ngAfterViewInit(): void {
      this.customTreelist.columns.reset([
        this.customTreelist.columns.toArray()[0],
        this.columnGroups.toArray(),
        this.customTreelist.columns.toArray().slice(1)
      ])
  }
}

<kendo-treelist
    #customTreeList
    kendoTreeListExpandable
    [data]="rootData | async"
    [fetchChildren]="fetchChildrenFn"
    [hasChildren]="hasChildrenFn"
    [height]="400"
    >
    <ng-content></ng-content>
</kendo-treelist>

@Component({
  selector: 'app-p-kendo-treelist-column',
  template: `<kendo-treelist-column
  #CustomTreelistColumn
  [field]="field"
  [title]="title"
  [width]="width"
  [expandable]="expandable"
  >
</kendo-treelist-column>`
})
export class PKendoTreeListColumnComponent {
  @ViewChild(ColumnComponent) public realColumn: ColumnComponent;
  @Input() field: string = '';
  @Input() title: string = '';
  @Input() width: number = 0;
  @Input() expandable: boolean = false;
  constructor() { }
  ngAfterViewInit() {
    console.log(this.realColumn)
  }
}

Usage:

      <app-p-kendo-treelist 
      [rootData]="listGroupWebTreeList" 
      [hasChildrenFn]="hasChildren" 
      [fetchChildrenFn]="fetchChildren"
    >
      <kendo-treelist-column [expandable]="true" class="d-flex">
        <ng-template kendoTreeListCellTemplate let-dataItem>
          {{dataItem.VNGroupName}}
        </ng-template>
      </kendo-treelist-column>
      </app-p-kendo-treelist>