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.

I make this dynamic grid https://www.telerik.com/kendo-angular-ui/components/grid/columns/auto-generated/

this error appear :

Type 'string' is not assignable to type '"boolean" | "text" | "numeric" | "date"'.

I also try this

but this error appear in my console :

Type '{ "": any; }' is not assignable to type 'CompositeFilterDescriptor'.

Noticed today, while using the toDataSourceRequestString method in @progress/kendo-data-query, that when passing in the SortDescriptor's, although dir? is an optional property, if you leave it null, the SortDescriptor will be excluded from processing and not included in the resultant string. We had to look really closely at the documentation of the property to see that it explicitly tells us that's the case, but seems odd that the dir? is set as optional. Just trying to understand the logic behind this decision... Why is the property optional, if its required?

(Ignore the tag, couldn't find an appropriate tag to use...)

Given this HTML, how are grid components (e.g. kendo-dropdownlist) accessed and tested?

<form [formGroup]="computedFormGroup" style="box-sizing:border-box;padding:40px;">
<div style="width:100%">

<h1>Policy</h1>

<kendo-tabstrip ...>
<kendo-tabstrip-tab ...>
<ng-template kendoTabContent>

<kendo-grid ...>

<ng-template kendoGridToolbarTemplate>
<button mat-raised-button color="primary" kendoGridAddCommand>Add new</button>
</ng-template>

<kendo-grid-command-column title="Action" [sticky]="true" [width]="290">
<ng-template kendoGridCellTemplate let-isNew="isNew">
...
</ng-template>
</kendo-grid-command-column>

<kendo-grid-column field="aip" title="AIP" width="200" class="aip_ddl">
<ng-template kendoGridCellTemplate let-dataItem>
{{ dataItem.aip }}
</ng-template>
<ng-template kendoGridEditTemplate
let-dataItem="dataItem"
let-column="column"
let-formGroup="policyFormGroup">
<div class="aip_ddl">
<kendo-dropdownlist [defaultItem]="{ aipCode: null, aipCodeAndName: '' }"
[data]="aipModel"
[popupSettings]="{width:400}"
textField="aipCodeAndName"
valueField="aipCode"
class="aip_ddl"
[valuePrimitive]="true"
[formControl]="policyFormGroup.get('aip')">
</kendo-dropdownlist>
</div>
</ng-template>
</kendo-grid-column>

Unit test code:

it('should bind the configured value to the AIP dropdown list.', async(() =>
{
// Arrange
// Set the form group.
component.policyFormGroup = constPolicyFormGroup(data);
// Set the specific data to test.
component.policyFormGroup.controls.aip.setValue('FH');

I want to access and test the dropdownlist here:

                console.log(fixture.debugElement);
const element = fixture.debugElement.query(By.css('form'));
const attr = element.nativeElement.getAttribute('aip-ddl');
//expect(element.nativeElement.getAttribute('ng-reflect-resizable')).toBe('true');
//let select: HTMLSelectElement = fixture.debugElement.query(By.css('.aip_dll')).nativeElement;
//const myComponent = fixture.debugElement.query(By.directive(DashboardComponent));
//let select: HTMLSelectElement = fixture.debugElement.nativeElement.querySelectore('aip_dll');
let p = fixture.debugElement.nativeElement.querySelector('p');
fixture.detectChanges();
//component.aipModel..aip = new FormControl(component.policyFormGroup.controls.aip);
//fixture.detectChanges();
//fixture.whenStable().then(() =>
//{
// let text = select.options[select.selectedIndex].label;
// expect(text).toBe('Manager');
// expect(p.textContent).toBe('Manager');
//});
}));

I have a button expand all, and i want to click this button - treeview expand all nodes. How i can do it ?

Thanks.

Hi

I could i use Kendo component with Pug template ?

Regard

i want to hide some of the filter operators can this be possible ?

i want to hide any one or two of these filters is it possible with Kendo UI Angular ?

Hi,

I have a grid, where I add some columns with ngFor like this:

<kendo-grid-column
      *ngFor="let period of periods; index as i"
      field="p{{ i + 1 }}"
      title="{{ i + 1 }}"
      format="n0"
      filter="numeric"
      [style]="{ 'text-align': 'right' }"
      [headerStyle]="{ 'text-align': 'right' }"
    ></kendo-grid-column>

The 'periods' is just a simple array from 1 to 12. The issue is, that the header style isn't applied, the title isn't aligned to the right. And if I test this with other columns, the title isn't aligned too. Does this works only, if I use a 'HeaderTemplateDirective'?

Thanks.