Declined
Last Updated: 01 Sep 2023 12:30 by ADMIN

Here is a simple example:

HTML:

<kendo-listview
  [height]="400"
  [data]="notes$ | async"
  class="k-d-flex-overflow-auto"
  (scrollBottom)="loadMore()">
  <ng-template kendoListViewHeaderTemplate>
    <span title>Reminders</span>
  </ng-template>
  <ng-template kendoListViewItemTemplate let-dataItem="dataItem">
    <app-message-note [note]="dataItem"></app-message-note>
  </ng-template>
</kendo-listview>

TS: 

@Component({
  selector: 'app-message-list',
  templateUrl: `./message-list.component.html`,
  styles: [
    `
      .k-d-flex-overflow-auto {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        overflow: auto;
      }
    `,
  ],
})
export class MessageListComponent implements OnInit {
  notes$: Observable<NoteDto[]>;

  constructor(private replyService: ReplyNoteService) {}

  ngOnInit(): void {
    this.notes$ = this.replyService.getUserNotesList();
  }

  loadMore() {
    console.log('loading...');
  }
}

Without these styles scroll is not visible.

Current behavior: scroll to the bottom, nothing happens.

Expected behavior: scroll to the bottom "loading..." will be logged to the browser console.


Declined
Last Updated: 23 Feb 2023 11:09 by ADMIN

Ts Code:

import { Component, Input, OnInit, EventEmitter, Output } from '@angular/core';
import { ZonesService } from '../../services/zones.service';
import {PagerSettings,
PagerPosition,
PagerType,PageChangeEvent} from "@progress/kendo-angular-listview";
import { historyExtraParams } from '../../constants/entities.constant';
@Component({
selector: 'app-list-view',
templateUrl: './list-view.component.html',
styleUrls: ['./list-view.component.scss']
})
export class ListViewComponent implements OnInit {
@Input() dataId;
@Output() closeDialog: EventEmitter<boolean> = new EventEmitter();
public data: any[] = [];
public historyExtraParams = historyExtraParams;
public updatedData;
public page = 0;
constructor(private _zonesService: ZonesService) { }
public ngOnInit() {
this.loadMore();
}
public getData(): any {
this._zonesService.getZonesd(this.dataId, this.page).subscribe(
response => {
this.data = response['version_histories'];
// this.formatData(response['version_histories']);
},
error => {
if (error && error.status === 401) {
}
});
}
public getFormattedField(title) {
return title ? title.replace(/_/g, ' ') : '';
}
public loadMore() {
this.page = this.page + 1;
this.getData();
}
public closeConfirmDialog() {
this.closeDialog.emit();
}
}

 

Html code: 

<div style=" overflow-y: auto;
margin-top: 60px;
">
<kendo-listview
[height]="400"
[data]="data"
containerClass="k-d-flex k-flex-col k-flex-nowrap"
(scrollBottom)="loadMore()"
>
<ng-template kendoListViewHeaderTemplate>
<!-- <div class="header">TRENDING ARTICLES THIS WEEK</div> -->
</ng-template>
<ng-template
kendoListViewItemTemplate
let-dataItem="dataItem"
let-isLast="isLast"
>
<div *ngFor="let item of dataItem?.changes | keyvalue">
<div *ngIf="!historyExtraParams.includes(item.key)">
{{isLast}} An event called {{dataItem?.event}} happened and {{getFormattedField(item.key)}} changed from {{item.value[0] || 0}} to {{item.value[1]}},
</div>
</div>
</ng-template>
</kendo-listview>
</div>
Declined
Last Updated: 18 Jul 2023 15:24 by ADMIN
Created by: Ian
Comments: 1
Category: ListView
Type: Feature Request
1
Please add drag and drop between ListView components functionality.