Questions on Kendo UI for Angular Forum

1 answer

420 views

Place pager controls above and beneath grid

Our user experience expert requires that our grids have page controls above and beneath the grid table.

How can I implement this in Kendo UI for angular?

Grid

answered on 28 Aug 2019

1 answer

519 views

Specify custom sorting function for each column in kendo-grid-column

Hi,

Is there a way to specify sorting for each column say as an option to kendo-grid-column? Data is populated dynamically from the database.

We are using Angular 6

Example:

<kendo-grid #someRef [data]="gridData" [scrollable]="gridSettings.scrollable" [resizable]="gridSettings.resizable"
[pageable]="gridSettings.pageable || false" [filterable]="gridSettings.filterable" [selectable]="gridSettings.selectable"
[sortable]="gridSettings.sortable" [pageSize]="gridState.take" [skip]="gridState.skip" [filter]="gridState.filter" [sort]="gridState.sort"
[style.maxHeight]="gridSettings.maxHeight" (dataStateChange)="onChangeDataState($event)" (selectionChange)="emitSelection($event)">
<ng-template ngFor [ngForOf]="gridSettings.columns" let-i let-column>

<kendo-grid-column-group *ngIf="column.columns" [title]="column.title" [headerClass]="'col-title ' + column.headerClass">
<ng-template ngFor [ngForOf]="column.columns" let-i let-column>

<kendo-grid-column *ngIf="ColumnType.Text === column.type" [field]="column.field" [title]="column.title"
<ng-template kendoGridHeaderTemplate let-dataItem>
<span class="k-link" [title]="dataItem.title" (click)="$event.target.parentElement.click()">
{{ (column.titleAccessor != null) ? column.titleAccessor(dataItem, dataItem.title) : dataItem.title }}
</span>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
<div cell [title]="dataItem[column.tooltipField || column.field] | facetsData">
{{ (column.fieldAccessor != null) ? column.fieldFormat(dataItem, dataItem[column.field]) : dataItem[column.field] | facetsData
}}
</div>
</ng-template>
</kendo-grid-column>

The problem is for one of the fields, the data has some string and date embedded in it. example: "12345678|08/23/2019" for example.

The data is correctly displayed as 08/23/2019 as defined by the fieldFormat function. But the sorting doesn't work. The data passed into the default kendo sort function still has ""12345678|08/23/2019" (we cannot change the data coming back from server. Not an option.)

Is there a way we can pass a sort function for the columns that require custom sorting. Like if that function is present use it kind of.

I did look at the example at https://www.telerik.com/kendo-angular-ui/components/grid/sorting/ . But this is for all the columns.

Regards,

Grid

answered on 27 Aug 2019

1 answer

168 views

How to dynamically update linear gauge value

I have a linear gauge

<div style="width:100%;">

<kendo-lineargauge #myGauge="kendoLinearGauge" style="width:100%" [scale]="{ vertical: false,max: 100 }" [pointer]="{ value: progressValue }">

</kendo-lineargauge>

</div>

I update it from signal r.

this._connection.on('taskProgressChanged', data => {

console.log(data);

this.progressValue = Number(data);

this.myGauge.resize();

var myPointer : any = this.myGauge.pointer;

myPointer.value = data;

this.messages.push(data);

});

In a component that has these configurations

public progressValue = 0;

@ViewChild(LinearGaugeComponent, { static: false })

public myGauge: LinearGaugeComponent;

However,
1. the gauge does not update with the value dynamically unless, I click on the gauge. How do I update the gauge dynamically?
2. the gauge does not resize to 100% of the width until the resize method is called. How do I default the width of the gauge to 100%?

Gauges

answered on 27 Aug 2019

5 answers

785 views

responsive images

How does one make the image responsive using the scroll-view component? Here is my current code:

<kendo-scrollview
*ngIf="hasMedia"
[data]="items"
[width]="width"
[height]="height"
[arrows]="true"
[pageable]="true">
<ng-template let-item="item">
<h2 class="demo-title">{{item.title}}</h2>
<img src='{{item.url}}' alt='{{item.title}}' draggable="false" />
</ng-template>
</kendo-scrollview>

ScrollView

answered on 26 Aug 2019

2 answers

112 views

Required Validator with AutoUpload = False

I have autoupload = false, multiple=false and my own custom upload button that calls the uploadfiles method.

I am trying to use kendo reactive forms validation. However, the validator appears to consider the kendo upload empty/not set if the file has not been uploaded to the server.

How do I check that a file has been selected prior to calling uploadfiles?

Upload

answered on 26 Aug 2019

8 answers

572 views

Upload file dimension

Hello,

I have implemented the upload control in my angular application. I am restricting to only allow image and video file. my question is how do I check the image's dimension (width and height) before I move it to the server. is it possible to check the video (mp4)'s dimension as well?

--Ben

Upload

answered on 23 Aug 2019

1 answer

434 views

How to get Server Response

Hi,

our upload impl:

<kendo-upload #kendoUpload

[saveUrl]="uploadImageUrl"

[removeUrl]="'uploadRemoveUrl'"

[autoUpload]="false"

(select)="onSelectFileToUpload($event)"

(complete)="onUploadCompleted($event)"

(uploadProgress)="uploadProgressEventHandler($event)">

</kendo-upload>

as you can see, i have no idea for what removeUrl is good for. But this is not my question atm.

If upload fails and Server returns 500, the selected file gets a red color in the ui, thats fine.

But we need to extract the server response and display it for user information.

How can we get Serverresponse and HttpStatusCode ?

Kind regards
David

Upload

answered on 21 Aug 2019

1 answer

2.0K+ views

Sample of uploading to S3 with progress indicator

I am unclear how the kendo upload communicates with the server to get the progress indicator. In my application the progress indicator always goes from directly from 0% to complete regardless of file size. I have the S3Helper on the server logging status but I don't know how to make that status known to the client.

Upload Service

using Microsoft.AspNetCore.Cors;

using Microsoft.AspNetCore.Identity;

using Microsoft.AspNetCore.Mvc;

using Microsoft.AspNetCore.Mvc.Rendering;

using Microsoft.Extensions.Configuration;

using Microsoft.Extensions.Logging;

using Microsoft.Extensions.Options;

using Newtonsoft.Json;

using Newtonsoft.Json.Linq;

using System.Threading;

using System.Threading.Tasks;

using ARLNService.Helpers;

using ARLNService.Models;

using ARLNService.Services;

using System;

using Microsoft.AspNetCore.Authentication;

using Microsoft.AspNetCore.Authorization;

using System.Collections.Generic;

using Microsoft.AspNetCore.Http;

using System.IO;

using OfficeOpenXml;

using System.Linq;

using System.Data.SqlClient;

namespace ARLNService.Controllers

{

[EnableCors("MyPolicy")]

[ApiController]

[ApiVersionNeutral]

[Route("api/[controller]/[action]")]

public class UploadFilesController : Controller

{

private readonly IConfiguration _configuration;

private readonly ARLNServiceContext _db;

public UploadFilesController(

IConfiguration configuration,

ARLNServiceContext db)

{

_configuration = configuration;

_db = db;

}

[HttpPost]

public async Task<IActionResult> UploadFile(IList<IFormFile> files)

{

String bucket = _configuration["AWS:bucket"];

String accessKey = _configuration["AWS:AWS_ACCESS_KEY_ID"];

System.DateTime thisDay = System.DateTime.Now;

// I'm getting file inside Request object

var file = this.Request.Form.Files[0];

// create unique file name for prevent the mess

var fileName = Guid.NewGuid() + file.FileName;

string userName = this.Request.Form["userName"].ToString();

Upload upload = new Upload();

upload.fileName = fileName;

upload.uploadDate = thisDay;

upload.userName = userName;

upload.originalFileName = file.FileName;

_db.Set<Upload>().Add(upload);

_db.SaveChanges();

var fileResponse = await S3Service.UploadObject(file, fileName, bucket, fileName, userName);

Upload uploadUpdate = _db.Uploads.FirstOrDefault(c => c.fileName == fileName);

if (fileResponse.success == true)

{

uploadUpdate.uploadStatus = "Uploaded";

_db.SaveChanges();

return Ok();

}

else

{

uploadUpdate.uploadStatus = "Upload Failed";

_db.SaveChanges();

return BadRequest("Failed to upload file");

}

Helper function for S3

using System;

using System.IO;

using System.Threading.Tasks;

using Amazon.S3;

using Amazon.S3.Model;

using ARLNService.Models;

using Microsoft.AspNetCore.Http;

using System.Collections.Generic;

using System.Security.Cryptography;

using Microsoft.AspNetCore.Mvc;

using Amazon.S3.Transfer;

namespace ARLNService.Helpers

{

public class S3Service

{

public async static Task<UploadFile> UploadObject(IFormFile file, String fileName, String bucket, String accessKey, String userName)

{

// connecting to the client

var client = new AmazonS3Client();

// get the file and convert it to the byte[]

byte[] fileBytes = new Byte[file.Length];

file.OpenReadStream().Read(fileBytes, 0, Int32.Parse(file.Length.ToString()));

try

{

using (System.IO.MemoryStream filestream = new System.IO.MemoryStream(fileBytes))

{

using (Amazon.S3.Transfer.TransferUtility tranUtility =

new Amazon.S3.Transfer.TransferUtility(client))

{

var request = new TransferUtilityUploadRequest

{

BucketName = bucket,

Key = accessKey,

InputStream = filestream

};

request.Metadata.Add("userName", userName);

request.UploadProgressEvent += new EventHandler<UploadProgressArgs> (uploadRequest_UploadPartProgressEvent);

await tranUtility.UploadAsync(request);

}

return new UploadFile

{

success = true,

fileName = fileName

};

}

catch (Exception e)

{

return new UploadFile

{

success = false,

fileName = fileName

};

}

static void uploadRequest_UploadPartProgressEvent(object sender, UploadProgressArgs e)

{

// Process event.

Console.WriteLine("{0}/{1}", e.TransferredBytes, e.TotalBytes);

}

Angular Component

<div class="filters " (click)="activate()">

<div class="confirmMessage">

<p>Choose select file to upload a .csv file.</p>

</div>

<div class="dropdownSection">

<kendo-upload #myUpload="kendoUpload" [saveUrl]="uploadSaveUrl"

(upload)="uploadEventHandler($event)"

(success)="loadItems($event)"

[removeUrl]="uploadRemoveUrl"

[restrictions]="myRestrictions"

[multiple]="false"

[accept]="acceptString">

<kendo-upload-messages select="Select file...">

</kendo-upload-messages>

</kendo-upload>

<br />

</div>

<div class="clearfix"></div>

Angular code

import { Component, OnDestroy, OnInit, Output, EventEmitter, ChangeDetectorRef, Injector, ViewEncapsulation } from '@angular/core';

import { FormControl } from "@angular/forms";

import { Subscription } from 'rxjs/Subscription';

import { IPageInfo, IMetadata, IEntry, IRootObject } from '../../models/eipMessage';

import { DataService } from '../../shared/data.services';

import { UtilService } from '../../shared/util.service';

import { UtilityService } from '../../shared/utility.service';

import { ErrorMessageService } from '../../shared/error-message.service';

import { GlobalService } from '../../shared/global.service';

import { MatDatepicker, MatDatepickerInput, MatDatepickerToggle } from '@angular/material';

import * as _ from 'lodash';

import { FileRestrictions, UploadEvent, FileState } from '@progress/kendo-angular-upload';

import { environment } from '../../../environments/environment';

import { Observable, of, concat } from 'rxjs';

import { delay } from 'rxjs/operators';

@Component({

selector: 'uploads-file-select',

templateUrl: 'uploads-file-select.component.html',

styleUrls: ['uploads-file-select.component.scss']

})

export class UploadsFileSelectComponent implements OnInit, OnDestroy {

public acceptString = ".txt, .csv";

public uploadSaveUrl = environment.serviceUrl + "api/UploadFiles/UploadFile"; // should represent an actual API endpoint

myRestrictions: FileRestrictions = {

allowedExtensions: ['.csv', '.txt']

};

@Output() fileUploaded = new EventEmitter();

constructor(private utilityService: UtilityService,  private dataService: DataService, private errMsgService: ErrorMessageService,

private injector: Injector, private changeRef: ChangeDetectorRef,

private utilService: UtilService, private globalService: GlobalService) {

}

uploadEventHandler(e: UploadEvent) {

e.data = {

userName: "tester@lab.com"

};

}

public remove(upload, uid: string) {

console.log("remove" + uid);

upload.removeFilesByUid(uid);

}

public loadItems(event) {

console.log("load itemas");

this.fileUploaded.emit();

}

ngOnInit() {

}

ngOnDestroy() {

}

activate() {

};

}

Upload

answered on 21 Aug 2019

8 answers

553 views

Virtual scrolling pageEvent does not always fire

When I scroll a virtually scrolling grid then a pageEvent does not always fire. I often see this if I have a scrolled down grid and then quickly scroll to the top with a flick on the mouse (apple magic mouse).

Debugging this, it appears that the PageChangeEvent does not fire for the last change event. When scrolling to the top I often do not get an event that corresponds to the (skip: 0) position. This leads to a grid which is scrolled to the top but does not show any content because the slicing of the data shows record below the currently shown slice.

I have be able to replicate (with some difficulty) this behaviour in the remote data example here:

https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual/#toc-virtual-scrolling

Have you seen this behaviour and/or do you have fix/workaround for this behaviour?

Grid