Questions on Kendo UI for Angular Forum

0 answers

95 views

Kendo Map marker tooltip stays under map

Hi all,

I have a map on in my window and when i open window i'm showing this map. I have also some markers with tooltip but these tooltips cannot shown on map when i inspect it i see they are under page and there is one item <kendo-popup> as i highlighted on attached image if i change element style i can see tooltip but i cannot reach that element with id or class .

How can i fix this ? Please help...

And also

{{ dataItem.name }}

returns empty too...

Here my code

html

<div #mapContainer>   
<kendo-map  [center]="center" [zoom]="6">
    <kendo-map-layers>
      <kendo-map-tile-layer
        [subdomains]="tileSubdomains"
        [urlTemplate]="tileUrl"
        attribution="&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>"
      >
      </kendo-map-tile-layer>
      <kendo-map-marker-layer [data]="markers" locationField="latlng" titleField="title">
        <kendo-map-marker-layer-tooltip>
            <ng-template kendoMapMarkerTooltipTemplate let-location="location" let-dataItem="dataItem">
                {{ dataItem.name }} ({{ location }})
            </ng-template>
        </kendo-map-marker-layer-tooltip>
      </kendo-map-marker-layer>
    </kendo-map-layers>
  </kendo-map>
</div>

ts side

import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
import { TileUrlTemplateArgs } from '@progress/kendo-angular-map';

@Component({
  selector: 'app-map-station',
  templateUrl: './map-station.component.html',
  styleUrls: ['./map-station.component.scss']
})
export class MapStationComponent {

  @ViewChild('mapContainer') mapContainer!: ElementRef;

  constructor(private renderer: Renderer2) { }

//Here i tried to add zindex via ciode but cannot achieve too...
  ngAfterViewChecked() {
    if (this.mapContainer && this.mapContainer.nativeElement) {
      const popupElement = this.mapContainer.nativeElement.querySelector('.k-popup');
      if (popupElement) {
        this.renderer.setStyle(popupElement, 'z-index', '99999 !important');
      }
    }
  }

  tileSubdomains = ["a", "b", "c"];
  tileUrl = (e: TileUrlTemplateArgs): string => `https://${e.subdomain}.tile.openstreetmap.org/${e.zoom}/${e.x}/${e.y}.png`;
  center = [39.8712, 32.7562];

  markers = [
    { latlng: [41.0851, 28.9768], title: "Test1" },
    { latlng: [41.0880, 27.9768], title: "Test2" },
    { latlng: [40.0851, 28.9768], title: "Test3" },
    { latlng: [40.0851, 27.9768], title: "Test4" },
  ];
}

Map

asked on 09 Jan 2024

1 answer

133 views

Angular spreadsheet SpreadsheetExcelImportEvent => event.sender.toJSON()

Hello,

I'm using kendo-angular-spreadsheet v14.3.0. When the spreadsheet component receives a file.

this.spreadsheet.spreadsheetWidget.fromFile(target.files[0]);

Then a `SpreadsheetExcelImportEvent` is triggered.

<kendo-spreadsheet (excelImport)="onExcelImport($event)"> </kendo-spreadsheet>

When doing `event.sender.toJSON()` I get the `DocumentDescriptor` that's currently on the spreadsheet component and not the descriptor of the file which was loaded.

  onExcelImport(event: SpreadsheetExcelImportEvent): void {
    // not the documentDescriptor of the file that was just loaded
    const documentDescriptor = event.sender.toJSON();
  }

Is this intended behavior? There's no event to get the DocumentDescriptor of the 'new' spreadsheet?

Spreadsheet

answered on 09 Jan 2024

0 answers

95 views

Angular grid column with multiples values and filter

hi, I have a column with multiple object values and I need to bind each id to default filter menu but kendo only allows me to bind an unique id via input (fieldName).
Is there a way to send multiple ids? or i have to create a custom component and add my logic there

asked on 09 Jan 2024

1 answer

85 views

Grid does not work with selectable and virtual together

When I select the "selectAll" checkbox, only the quantity number from the "pageSize" property is selected. When I scroll through the grid, the new visible rows are not selected and the previous rows are no longer selected.

Here is an example of a stackblitz:

https://stackblitz.com/edit/angular-tybn6w?file=src%2Fapp%2Fapp.component.ts

Grid

ScrollView

answered on 08 Jan 2024

1 answer

129 views

kendoGridInCellEditing - disable editing cell on click

Hi,

you have the kendoGridInCellEditing, which is very handy. I use it in my project. But I have one issue with it. As per declaration if I click on a simple grid cell, the directive sets the clicked cell in edit mode. How can I prevent this?

Grid

answered on 05 Jan 2024

0 answers

75 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

237 views

css variables will not work with .k-list-item

I'm working with my first instantiation of a light / dark theme and to do this I'm using css variables.

An example of what I mean:

input::placeholder {
color: var(--input-placeholder);
}

What I'm noticing however for the items in a dropdown list is that if I use css variables I'll only see the initial set color (I just tested this with kelly green as the default) but if the variable switches the dropdown background and text colors will not update. An example of the css that I have in my all.css file:
.k-list-item {
color: var(--input_color);
background-color: var(--k_input_background2);
}

I just tried setting the program to dark mode and then creating the component and dropdowns after that's already selected - I still get the initial / default value not the actual. To clarify I'm setting other kendo css with this such as the grids, input backgrounds and text color, all of it's working fine - this is the only place it seems to be failing.

Let me know if this sounds familiar and if so what recommendations you have to work around this issue.

asked on 04 Jan 2024

0 answers

117 views

Treelist Rowreorder - After rowreorder, can we get Treelist state with changed positions and parent-ids

<kendo-treelist
  class="kendo-treelist"
  [kendoTreeListFlatBinding]="data"
  #directive="kendoTreeListFlatBinding"
  [rowClass]="dynamicClass"
  [parentIdField]="parentIdField"
  [idField]="idField"
  kendoTreeListExpandable
  kendoTreeListSelectable
  [rowReorderable]="true"
  (cellClick)="onCellClick($event)"
  [itemKey]="idField"
  [(selectedItems)]="selected"
  [(expandedKeys)]="expandedIds"
  [isExpanded]="isExpanded"
  (expand)="onExpand($event)"
  (collapse)="onCollapse($event)"
  (rowReorder)="onRowReorder($event)"
  [loading]="data.length == 0"
  >
  <kendo-treelist-rowreorder-column [width]="25"></kendo-treelist-rowreorder-column>    
  <kendo-treelist-column
    *ngFor="let column of treeListOptions.columns" 
    [field]="column.field" 
    [expandable]="column.expandable" 
    [title]="column.title"  
    [width]="column.width">
    <ng-template *ngIf="column.ngTemplate" kendoTreeListCellTemplate let-dataItem let-rowIndex="rowIndex">
      <!-- Context values will be accessible for column customization on the parent component. -->
      <ng-container *ngTemplateOutlet="template; context: { dataItem, rowIndex, column }"></ng-container>
    </ng-template>
  </kendo-treelist-column>
</kendo-treelist>

Hi,

I am using Kendo Treelist Angular with 'kendoTreeListFlatBinding'. Mock data is also attached. There could be multiple folders and each folder can have multiple templates in it. I want to use row-reorder on my tree-list component.

After enabling rowreorder. I have following scenarios to deal with:

Template is reordered within the same Folder - Positions of all templates will be changed in this case.
Template is reordered into some other Folder - Parent id of dragged template and Positions of all templates in target folder will be changed.
Folder is reordered into some other Folder - parent id of dragged template and its child templates will change and Positions of all templates in target folder will be changed.

Now this can be handled through some custom logic. And templates can be saved to DB with new positions and parent-ids.
But I want to know, if Kendo Treelist provides any build-in event or mechanism through which these changed positions can be handled/accessed and can be sent to backend to save changes in DB afterwords.

Attaching few screenshots and mock data to help you understand the issue.

TreeList

asked on 03 Jan 2024

0 answers

80 views

kendo-dropdownlist - having issue when component has both dropdownlist and multiselect

I have a component with kendo-dropdownlist and kendo-multiselect. When I expand the multi-select and then try to expand the dropdown, the multiselect popup item list is not closed automatically. Clicking outside however, closes both popups.

I think this is because of the stop propagation on kendo-dropdownlist onBlur and onFocus methods. Please advise.

DropDownList

MultiSelect

asked on 02 Jan 2024

1 answer

129 views

Custom filter menu issues updating currentFilter

Hi, there, so atm I'm trying to implement a custom filter menu, with kendo multiselect component, but I'm having some issues. So, what's happening it's that the filtering it's not working properly and I think the issue comes beacuse it's not getting the right currentFilter state. When I open the filter button it seems to do the filtering ok, but when I reopen the button, the filters selected previosly don't appear in the ui, despite the filtering persisting and I'm not able to unselect any filter at all, and if i try to filter again selecting new values it will just add the values to the currentFilter and perfoms the filtering adding the new values, plus the ones before.

custom-component.ts

export class CustomMultiSelectFilterComponent implements AfterViewInit {

  @Output() public handleFilterChange = new EventEmitter<CompositeFilterDescriptor>()

  @Input() public data: string[] = []
  @Input() public textField: string = ""
  @Input() public valueField: string = ""
  @Input() public filter: CompositeFilterDescriptor = { logic: "or", filters: [] }
  @Input() public preFilterValue: string | null = null
  @Input() public filterService: FilterService
  @Input() public currentFilter: CompositeFilterDescriptor = { logic: "or", filters: [] }

  public constructor(
    filterService: FilterService
  ) {
    this.filterService = filterService
  }

  public filterChange(filter: CompositeFilterDescriptor): void {
    this.filter = filter
    this.data = filterBy(this.data , filter)
    this.handleFilterChange.emit(filter)
  }

  public onChange(values: string[], filterService: FilterService): void {
    filterService.filter({
      filters: values.map((value) => ({
        field: this.valueField,
        operator: "contains",
        value,
      })),
      logic: "or",
    })
  }

  public ngAfterViewInit(): void {
    if (this.filterService) {
      this.filterService.changes.subscribe((filter: CompositeFilterDescriptor) => {
        this.currentFilter = filter
        console.log("Current Filters:", this.currentFilter)
      })
    }
  }

}

custom-filter.html

<kendo-multiselect
  [data]="data"  
  [valuePrimitive]="true"
  [textField]="textField"
  [valueField]="valueField"
  [value]="filter | filterValues"
  (valueChange)="onChange($event, filterService)"
  >
</kendo-multiselect>

table.html

<kendo-grid
  kendoGridSelectBy="id"
  [kendoGridBinding]="users"
  filterable="menu"
  [sortable]="true"
  [resizable]="true"
  (selectionChange)="selectionChange($event)"
  [selectable]="selectableSettings"
  [selectedKeys]="[selectedKeyArray]"
  (filterChange)="handleFilterChange($event)"
  [filter]="filter"
>
  <kendo-grid-column-group title="{{ 'literal:Users | Total:' | translate }} {{ users.length }}" [columnMenu]="true">
    <kendo-grid-column field="roles" title="{{ 'literal:Roles' | translate }}" [width]="220" [headerStyle]="{ 'font-weight': 'bold' }">
      <ng-template kendoGridFilterMenuTemplate let-filter="filter" let-filterService="filterService">
        <app-custom-multiselect-filter
          [data]="rolesToFilter"
          textField="rolesToFilter"
          valueField="filterRoles"
          [preFilterValue]="preFilter"
          [filterService]="filterService"
          [currentFilter]="filter"
          >
        </app-custom

answered on 02 Jan 2024