Questions on Kendo UI for Angular Forum

1 answer

303 views

Can you programmatically group a kendo-grid on load?

I would like to open a grid like this (without manually dragging the header):

In other words, using this example, I would like to group by Name whenever the grid loads.

II have the grid configured like this in the html file:

kendoGridExpandGroupBy = "groups"
[(expandedGroupKeys)] = "groups"

And I have tried this in the component.ts file:
groupBy(this.groups, this.groups);But I think the GroupBy works on the data query and not on the grid.

Is there a way to do what I am trying to accomplish?

Thanks for any help or pointers.

Grid

answered on 11 Jan 2024

2 answers

181 views

Angular Grid Filter Menu dropdownlist-filter

Hi!

i want replace a input text with a dropdownlist-filter inside this default filter, i need to keep this filter: CONTAINS ... - AND / OR - CONTAINS ...

Can someone help me?

Thanks!!

DropDownList

Filter

Grid

answered on 10 Jan 2024

0 answers

134 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

170 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

124 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

119 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

155 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

138 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

313 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

151 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