Questions on Kendo UI for Angular Forum

1 answer

452 views

Hi

I'd like to fix an issue we have about the columns using dates, we have a dashboard and when user export the dash to Excel.

seems like there's no problem or something, however when we proceed to open the Excel file.

if we take a look to those columns displaying dates, then we select any of these cells, right click, "format cell"

Catogory is displayed as "General", instead of date and any of the possible types-formats

so when user is trying to apply filter in excel, values for date columns are not recognized as dates.

I have been trying to modify the date format like these

//attempt3

//pcagatecurrentdate requestHeaderView.pcagatecurrentdate ? new SimpleDateFormat("dd MMM yyyy HH:mm:ss zzz").format(requestHeaderView.pcagatecurrentdate) : null
//attempt4
//pcagatecurrentdate requestHeaderView.pcagatecurrentdate ? new SimpleDateFormat("MM-dd-yy HH:mm:ss zzz").format(requestHeaderView.pcagatecurrentdate) : null
//attempt5
//pcagatecurrentdate requestHeaderView.pcagatecurrentdate ? new SimpleDateFormat("MM-dd-yy 07:00:00").format(requestHeaderView.pcagatecurrentdate) : null
//attempt6
//pcagatecurrentdate requestHeaderView.pcagatecurrentdate ? new SimpleDateFormat("MM-dd-yy 19:00:00").format(requestHeaderView.pcagatecurrentdate) : null
//attempt7
//pcagatecurrentdate requestHeaderView.pcagatecurrentdate ? new SimpleDateFormat("MM-dd-yy'T'HH:mm:ss.SSSZ").format(requestHeaderView.pcagatecurrentdate) : null
//attempt8
//pcagatecurrentdate requestHeaderView.pcagatecurrentdate ? new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSSZ").format(requestHeaderView.pcagatecurrentdate) : null
//attempt9
//pcagatecurrentdate requestHeaderView.pcagatecurrentdate ? new SimpleDateFormat("MM-dd-yyyy'T'HH:mm:ss.SSSZ").format(requestHeaderView.pcagatecurrentdate) : null

this is how it looks like in the front end,

<kendo-grid-column
    field="pcagatecurrentdate"
    [columnMenu]="true"
    title="{{ getTitle('pcagatecurrentdate') }}"
    tooltip=""
    [locked]="false"
    width="110"
>
    <ng-template
        kendoGridFilterMenuTemplate
        let-filter
        let-column="column"
        let-filterService="filterService"
    >
        <app-date-range-filter
            [field]="column.field"
            [filter]="filter"
            [filterService]="filterService"
        >
        </app-date-range-filter>
    </ng-template>
    <ng-template kendoGridCellTemplate let-dataItem>
                    <span
                        [ngClass]="{
                            okProjectStatus:
                                dataItem.projectConceptApprovedStatus ==
                                'ok',
                            warningProjectStatus:
                                dataItem.projectConceptApprovedStatus ==
                                'warning',
                            dangerProjectStatus:
                                dataItem.projectConceptApprovedStatus ==
                                'danger'
                        }"
                    >
                        {{
                        dataItem.pcagatecurrentdate != null
                            ? (dataItem.pcagatecurrentdate
                                | date : 'dd-MMM-yyyy')
                            : ''
                        }}
                    </span>
    </ng-template>
</kendo-grid-column>

but at the end all the dates still displayed as "General"

and this is the target I would like to reach

I appreciate any suggestions you may have

Thanks

Victor M.

Excel Export

Grid

answered on 15 Jan 2024

1 answer

127 views

Kendo UI grid with Odata

Hello,

I'm planning on migrating an old AngularJS 1.5.5 (working with KendoUI) to latest angular 17.X with Kendo UI and I have some questions about Odata integration.

Is filtering, paging and sorting working "built-in" with odata ? I couldn't find any documentation forfiltering, for ex, with odata.

Do you have any example ?

Kind regards,

Musab

Filter

Grid

answered on 12 Jan 2024

1 answer

83 views

Angular Kendo Grid Date column filter 'lte' work like 'lt'

Hello,
I'm using the kendo-grid for angular and in a colum I have date format.

<kendo-grid-column
        field="toDate"
        title="A"
        [width]=160
        [format]=displayDateFormat
        filter="date"
        [style]="{ 'border': '1px solid #888' }"
        >
        <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
          <kendo-grid-date-filter-cell
            [operator]="'lte'"
            [showOperators]="false"
            [column]="column"
            [filter]="filter"
            [formatPlaceholder]="{
              year: 'aaaa', month: 'MM', day: 'gg',
              hour: 'h', minute: 'm', second: 's', millisecond: ''
            }"
          ></kendo-grid-date-filter-cell>
        </ng-template>
            <ng-template kendoGridCellTemplate let-dataItem>
                {{dataItem.toDate | date: displayDateFormat}}
            </ng-template>
        </kendo-grid-column>

The only possible option for the filter is less than equal (<=) the problem is who the filter work like lt (<) and not consider equal value.

If i selecet the filter date 31/01/2024 (in italy whw use dd/MM/yyyy) the grid show only data to 30/01/2024.

The same configuration using 'gte' work fine.

Thanks

LSo

Grid

answered on 12 Jan 2024

1 answer

485 views

Add tooltip to dropdown items

Hi,

Can we apply tooltip to the dropdown items for kendo-dropdownlist?
Note: The same is implemented in the jquery Add tooltip to dropdown items in Kendo UI for jQuery | Telerik Forums. But here I need to implement without using jquery.

Thanks,

Karan Shah

Accessibility

DropDownList

Tooltip

answered on 11 Jan 2024

1 answer

267 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

161 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

96 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

139 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

96 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

87 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