Hi,

there is this link how to do the above mentioned task:

https://www.telerik.com/kendo-angular-ui/components/uploads/upload/model-binding/#toc-rendering-of-initial-files

In my special case the file isn't rendered.

I have a multistep form with a stepper, where I pass the form variable as input variable to the appr. step screen. The workflow is the following: the user fills in some data on the first screen, then selects a file on the second screen, reviews it on the 3rd screen and if everything is ok, uploads it on the last screen.

This is the code detail of the form:

<form class="k-form" [formGroup]="form" style="margin-top: 2rem">
    <entity
      *ngIf="currentStep === 0"
      [entity]="currentGroup"
      [formPassed]="entityFormPassed"
    >
    </entity>
    <file *ngIf="currentStep === 1" [file]="currentGroup"> </file>
    <overview *ngIf="currentStep === 2" [form]="form"></overview>
    <upload-file *ngIf="currentStep === 3" [form]="form"></upload-file>
  </form>

The form variable contains the file, which I would like to upload as a last step.

My upload-file component looks like this:

<kendo-upload [ngModel]="fileArray"> </kendo-upload>

TS:

import { Component, Input, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FileInfo } from '@progress/kendo-angular-upload';

@Component({
  selector: 'upload-file',
  templateUrl: './upload-file.component.html',
})
export class UploadFileComponent implements OnInit {
  @Input() form!: FormGroup;

  fileArray!: FileInfo[];

  ngOnInit() {
    this.fileArray = <FileInfo[]>this.form.get('file.fileName')?.value;
  }
}

I get the file correctly, it has the appr. value. But the file isn't rendered in the file list of the upload component. If I directly declare the fileArray variable with some test files, it works. The question is, how to get rendered the file, which was provided via input property?

I have another question too.

In your examples to the upload component you use a mock service to simulate the upload process and this changes the progressbar value too.

In my case - as described above - the user will start the upload. Do I need to care about changing the progress bar value somehow via the uploadprogress event or the component cares itself about it? If no, how can I do this?

Thanks for your help.

Tring to right align the header and data in selected columns in a grid as follows

    <kendo-grid-column field="outstandingValue" title="Outstanding Value" width="100"  [style]="{'text-align': 'right'}"  [headerStyle]="{'text-align': 'right'}" [filterable]="false">
      <ng-template kendoGridHeaderTemplate>
        Outstanding Value
      </ng-template>
      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
          {{dataItem.outstandingValue | currency : 'GBP'}}
      </ng-template>      
    </kendo-grid-column>  

The data is right aligned but the header styling does not work?

Hi,

Could i disable one or many tabs from an child component contained in this tabstrip

Regards

how to customize, using scss and variables the font size of the dropdownLists?

Actually is 16px, but i need smaller one

I am a .NET dev. Now learning Angular. I have created Angular solution use ASP.NET Core with Angular template. I have that running with a sample screen. Now I would like to use Telerik Kendo UI for Angular components and I don't have the slight idea how to install them. For Blazor we just installed from the Progress Control panel and added the NuGet packages in the VS Package manager. For Angular I have no idea. Can someone tell me how to get started? I have looked thru the doco online here but nothing seems to address using them in Visual Studio.

I use <kendo-grid-filter-cell> in my grid to filter dates.

These filter don't work

Do you know why these filter don't work.

<kendo-grid
  [kendoGridBinding]="collaborateurData"
  [filterable]="true"
  [resizable]="true"
  [sortable]="true"
  [pageable]="true"
  [pageSize]="15"
  class="table"
>
  <!-- Colonne Date Entrée Groupe -->
  <kendo-grid-column field="DateEntreeGroupe" title="Date Entrée Groupe">
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
      <kendo-grid-date-filter-cell
        [column]="column"
        [filter]="filter"
        [showOperators]="false"
        [format]="format"
        [formatPlaceholder]="{
          day: 'J',
          month: 'M',
          year: 'yyyy',
          hour: 'h',
          minute: 'min',
          second: 's'
        }"
      >
      </kendo-grid-date-filter-cell>
    </ng-template>
    <ng-template kendoGridCellTemplate let-collaborateur>
      <a
        [routerLink]="[
          'collaborateurs',
          collaborateur.TypeSalarie,
          collaborateur.Id
        ]"
        >{{ collaborateur.DateEntreeGroupe | date: 'yyyy-dd-MM' }}</a
      >
    </ng-template>
  </kendo-grid-column>
</kendo-grid>

Hi

fieldset [disabled] not running on an kendo-grid for disabeling all selection

So i have tried  [selectable], that"s ok first time , i could unselect my grid, But after i could not select it even if my boolean change ?

Why ?

   [selectable]="!isFormEnabled()"

are there any way to do like this ?- style row in the grid

We were excited to see the new Filter component in the latest release of Kendo Angular, and are wondering if there is any way to customize it or extend it. For example, we'd like to use a different FilterEditor, like a multi-select, and potentially some more advanced customization like comparing and doing some basic calculations across two fields.

It doesn't look like the current version supports that level of customization, but is there a recommended approach for extending the component to add our own functionality? Thanks!