how to upload files and select additional metadata by using the Kendo angular UI Upload control. I saw this is available in kendo UI for Jquery but we need in kendo UI for Angular. Below is the Jquery example. We need same control in Kendo angular UI .Is it available?

https://docs.telerik.com/kendo-ui/controls/editors/upload/how-to/select-additional-metadata

Hello,

when the default menu filter icons are clicked/filter popup is being opened, the page scrolls to the top. When I scroll down to the grid, I can see that the filter opened. Only happens with default filters. Tested with Chrome 96.0.4664.45 and Firefox 95.0.

I managed to replicate the unwanted behavior in StackBlitz:

https://stackblitz.com/edit/grid-in-cell-edit-with-datetimepicker-gljp2r?file=app/app.component.ts

The same thing happens if the top of the page is filled with other components, that have no relationship with the component containing the grid.

I have tried setting specific filter types, but it did not help. 

Is there a way to fix this?

I am trying to implement a dashboard where the user can add / remove and reorder widgets.

Loading the persisted state should not be a problem since I can create something like this:

<kendo-tilelayout-item *ngFor="let widget of widgets"
                       [title]="widget.title"
                       [col]="widget.col"
                       [order]="widget.order">...</kendo-tilelayout-item>

But how can I persist the state of the tilelayout to my models?

I tried with the reorder event but there I haven't got any information to identify my widget models.

  public onReorder(e: TileLayoutReorderEvent): void {
    // Find the model to persist changes
  }

Hi,

there is this blog post about batch editing in the grid:

grid batch editing

I have two questions regarding it:

1. How to get a form field value?

Let's suppose, I want to get a value of a form field in the active row. For this I created a value change event and tested this:

<FormGroup[]>this.formArray.value)[rowIndex].controls

However, it returns undefined. So, no 'get' works too. But on the other side, if I log just this:

<FormGroup[]>this.formArray.value)[rowIndex]

I get the form fields.

2. How to set a form field value in the active row?

Thanks.

Hello,

I'm sorry for the strange request.

I am writing because I could not find a solution / idea.

I have to enable sorting with dedicated buttons for each column of the grid.

For example:

• add 2 buttons in the header to manage the sorting (ascending / descending). 
• add a combobox with the options ascending and descending sorting.

In attachment an example.

Could you please help me?
The project is in angular.

My client wanted to have input fields that were numeric (no text allowed). So after a long search and many experiments I managed to get it working. The Input field is a numeric textbox without spinners, in a grid

        <kendo-grid-column format="c1" [width]="100" field="jan" title="Jan {{ convertedYear }}" [editable]="editMode" [headerStyle]="currentMonth(0)">
          <ng-template
          kendoGridEditTemplate
          let-column="column"
          let-dataItem
          let-formGroup="formGroup">
          <kendo-numerictextbox [spinners]="false" [formControl]="formGroup.get(column.field)">
        </kendo-numerictextbox>
        </ng-template>
        </kendo-grid-column>

The problem is ... that values are shown as currency values, even when they are 0. For all numbers that would be fine, except for the 0, which they want to be a plain 0. example below

I tried changing the format="c1" ... but any changes there are not possible, and there is no way to know what value the field will hold in the column itself.

I tried changing the ng-template with [format]="formatOptions" and then setting them, but that changes the format in the numerictextbox field and not the column representation.

is there a way to conditionally format the column cell formatting on the condition being 0 ...

thank you for the help

I'd like to pass a cell template to a grid column at runtime. The template is just a string that I have elsewhere in memory and can't be declared ahead of time.

I'm looking at the following example at: https://www.telerik.com/kendo-angular-ui/components/grid/columns/templates/#toc-cell-template

<kendo-grid [data]="gridData">
  <kendo-grid-column field="ProductName">
    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
      Row: {{ rowIndex }} /
      <strong>{{ dataItem.ProductName }}</strong>
      <span class="{{ dataItem.Discontinued ? 'discontinued' : 'active' }}">
        {{ dataItem.Discontinued ? "discontinued" : "active" }}
      </span>
    </ng-template>
  </kendo-grid-column>
</kendo-grid>

What I want is for the entire ng-template to be defined elsewhere, or at least the contents of it. In the past I was able to do something like:

    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
      {{ myTemplate }}
    </ng-template>

But this hasn't worked for a while. I suspect the custom template needs to be compiled somehow, but am not sure what to do. I looked in to using ngTemplateOutlet, but that also needs the template pre-declared. Any advice is appreciated. Thanks.