Hi everyone, I'm currently working on a grid which is dynamically built and I'm experiencing some weird behaviour.

I'll try to do my best to explain it clearly, starting from the code of the grid:

<kendo-grid
        [kendoGridBinding]="kgData"
        [sortable]="true"
        [pageable]="true"
        [pageSize]="5"
        >
        <!-- BUTTONS -->
        <ng-template kendoGridToolbarTemplate>
          <button kendoGridAddCommand>Aggiungi record</button>
          <button class="k-button">
            Salva
          </button>
        </ng-template>
        <!-- HEADERS -->
        <kendo-grid-column *ngFor="let col of columnInfoArray" [field]="col.fieldname" [title]="col.description" [hidden]="col.fieldname === 'id'">
          <ng-template
            kendoGridCellTemplate
            let-dataItem>
              <!--! NUMBER  -->
              <!--
                decimals: do not allow the user to type , and . when focused
                format n0: do not put commas when the input is not focused
              -->
              <kendo-numerictextbox
                *ngIf="col.configtype === 'int'"
                kendoGridFocusable
                [decimals]="0"
                format="n0"
                [value]="dataItem[col.fieldname]"
                (valueChange)="kgUpdateValue(col.fieldname,dataItem,$event)"
                ></kendo-numerictextbox>
              <!--! SELECT  -->
              <!--
                [data]: the array of options, textField and valueField access the properties of the objects contained inside the array
                [value]: gets the default value based on the fieldname and the value
              -->
              <kendo-dropdownlist
                *ngIf="col.configtype === 'combo'"
                kendoGridFocusable
                [data]='kgSelectOptions[col.fieldname]'
                textField='label'
                valueField='value'
                [value]='kgGetDefaultOption(col.fieldname,dataItem[col.fieldname])'
                (valueChange)="kgUpdateValue(col.fieldname,dataItem,$event.value)"
                ></kendo-dropdownlist>
              <!--! CHECKBOX  -->
              <input
                *ngIf="col.configtype === 'bool'"
                kendoGridFocusable
                type="checkbox"
                kendoCheckBox
                (change)="kgUpdateValueEvent(col.fieldname,dataItem,$event)"
                />
              <!--! STRING  -->
              <input
                *ngIf="col.configtype === 'string'"
                kendoGridFocusable
                (change)="kgUpdateValueEvent(col.fieldname,dataItem,$event)"/>
          </ng-template>
        </kendo-grid-column>
      </kendo-grid>

columnInfoArray is an array of objects like this: (of course with different values every time) 

{
idfield: 1,
description: "Widget",
fieldname: "idwidget",
mandatory: true,
actionget: "widget",
configtype: "combo",
deleted: false,
filter: false
}

This tells the code the "type" of input I'm expecting, like a select box, a number, a textarea, a checkbox etc etc.
NOTE: despite I'm talking about inputs, the table isn't inside any form and forms aren't needed to get the job done.
The actionget, when present, is just a string that will be concatenated to a link and it'll get an array of objects that will look like:

{
   label: 'Some text',
   value: 1
}

1. inside the kendo-dropdownlist you can see the function kgGetDefaultOption. Inside this function I have put a console.log of a counter that starts from 0 and gets incresed every time the function is called: my kgData consists of 7 records, and I have two columns with configtype == 'combo'. I was expecting for the counter to be 14, but I get 89 instead. Also, the function is called every time I change page on the pagination bar. Why does that happen?
2. if I check the checkbox on row 1 of page 1, every checkbox on row1 of other pages is checked as well (I'm providing a GIF that shows what I mean)
   

Unfortunately I can't provide a StackBlitz (the API calls that get the data don't work on it). I hope this is enough for you to help me, else I will provide more info.

PS: even if that esulates from the main question, if you think something can be improved for what I need, let me know! This is the very first time I'm using Kendo grid and to be honest I found the documentation really difficult to understand so I might've missed something.

Hello,

Is there a way to display a tooltip in the dropdown button dropdown items?

thanks!

B

I am trying to apply formatting to the excel cells (both data cells and footer cells) using the cellOptions, footerCellOptions and groupFooterCellOptions. Although the formatting works fine with dataCells, it doesn't gets applied to footerCells.

In my project we have complex template for the footer, I thought that might be the reason its not working, but I created a simple sample project to show what I am trying to achieve.

https://stackblitz.com/edit/angular-qarfdv?file=app%2Fapp.component.ts

https://angular-qarfdv.stackblitz.io

it can be seen here that the dataCells having negative values are getting formatted, but footerCells are not

Although the formula does gets applied, but it shows an error in the cell. ( if you double click on the cell and click out it gets applied)

Appreciate your help

We are not able to get the formdata values in web api 2.0 (Not .NET Code).  In the http Interceptor we are passing authorization token along with files.  Is there any sample that you have to WebApi 2.0 Upload examples? 

Hello,

I want to stretch the textarea to it's full parent height, without the dragable reziser and the parent is a flexbox.
What is the best way to achive it? Do I have to edit the underlying textarea css?

Setting the kendo-textarea to `flex: 1` stretches only the kendo element not the textarea inside.

Example: stackblitz

EDIT: Scribble for better understanding

We currently in the process of upgrading from kendo UI for jquery to kendo UI for Angular. We have an option for or current girds to allow the user to save how they have arranged the grid and any filters they are using the grid. We do this using the grid functions getOptions and setOptions. I have noticed that these functions do not seem to work for the new Angular grids. Is there a similar function that might work?

Hello guys.

I uploaded my local angular app to my company's windows vm and I am getting a blank screen the following error at localhost:4200 console.

The application is running perfectly fine on my local mac.

Any ideas?

Thank you.

Hi,

I am trying to achieve the following.

When hovering over a cell of the grid, pop up a dynamic component. For this I need to be able to know the column name, row index, so I can pass it to the parent app, so it can set the data to the dynamic component based on the selected row.

I was able to achieve this on row selection. emitting selectionChanged event to the main app. 

Question is how cna we do this on hover.

in single-grid

<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
            <div cell [title]="(column.someField!= null) ? column.fieldAccessor(dataItem, dataItem[column.tooltipField]) : dataItem[column.tooltipField || column.field] | facetsData">
              {{ (column.someField != null) ? column.fieldAccessor(dataItem, dataItem[column.field]) : dataItem[column.field] 
              }}

<some-dynamic *ngIf="column?.info" [iconColor]="'white'"
  [dynamicPopupComponent]="column.info.displayComponent"
  [dynamicData]="column.info.displayData"
  [displayPosition]="column.info.displayPosition">
</some-dynamic>
            </div>
  </ng-template>


I have multiple grids in a for loop . The main app basically uses the multi-grid component to render multiple grids.

<div *ngFor="let gridData of gridDataRows; let indexOfgrid=index;" style="margin-bottom:25px">
<single-grid #multiGrid [settings]="settings[indexOfgrid]" [data]="gridData" 
...
<single-grid>
</div>

main app  -- this app need to know what cell was hovered over along with the row index and  column name.
<multi-grid 
... all the inputs >
</multi-grid>

Any help is greatly appreciated.

REgards,

Jyothi