Telerik Forums
Kendo UI for Angular Forum
1 answer
578 views

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"'.

<kendo-grid [kendoGridBinding]="collaborateurData" [filterable]="true" scrollable="none" [pageable]=true [pageSize]="10">
      <kendo-grid-column
        *ngFor="let column of columns"
        field="{{ column.field }}"
        title="{{ column.title }}"
        format="{{ column.format }}"
        filter="{{ column.type }}"
      ></kendo-grid-column>
</kendo-grid>

 

I also try this

but this error appear in my console :

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

<kendo-grid [kendoGridBinding]="collaborateurData" [filterable]="true" scrollable="none" [pageable]=true [pageSize]="10">
  <kendo-grid-column
  *ngFor="let column of columns"
  field="{{ column.field }}"
  title="{{ column.title }}"
  format="{{ column.format }}"
>
<ng-template kendoGridFilterCellTemplate let-filter let-column="column">
  <!-- Modification du filtre par défault par son type -->
  <kendo-grid-string-filter-cell
  *ngFor="let column of columns"
    [showOperators]="false"
    [column]="column"
    [filter]="{{ column.type }}">
  </kendo-grid-string-filter-cell>
</ng-template>
</kendo-grid-column>
</kendo-grid>
Hetali
Telerik team
 answered on 06 Dec 2021
1 answer
606 views
Hi,
Can we pass kendo-grid map object? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
will the grid work with Map objects ?
Dimiter Topalov
Telerik team
 answered on 06 Dec 2021
1 answer
209 views

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...)

Svet
Telerik team
 answered on 03 Dec 2021
1 answer
1.6K+ views

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');
//});
}));

Yanmario
Telerik team
 answered on 03 Dec 2021
1 answer
164 views

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

Thanks.

Yanmario
Telerik team
 answered on 03 Dec 2021
1 answer
98 views

Hi

I could i use Kendo component with Pug template ?

 

Regard

Svet
Telerik team
 answered on 01 Dec 2021
1 answer
103 views

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 ?

 

 

Yanmario
Telerik team
 answered on 01 Dec 2021
1 answer
149 views

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.

Ivo
Telerik team
 answered on 29 Nov 2021
1 answer
158 views
Hello,

I'm currently looking into Kendo-UI and found information that Telerik provides a .NET abstraction layer for it's UI components to be used in Web Tests.

https://www.telerik.com/blogs/automated-testing-of-kendo-ui-made-easy


For instance:
using Telerik.TestingFramework.Controls.KendoUI.Angular;
using Telerik.TestingFramework.Controls.KendoUI.Angular.Grid;
KendoAngularGrid grid = Manager.ActiveBrowser.Frames[0].Find.AllByTagName<KendoAngularGrid>("kendo-grid").FirstOrDefault();

 

Now, for my question:
Is the c# library that provides this abstraction layer (Telerik.TestingFramework.Controls.KendoUI.Angular) also available as a NuGet package and if so, where can I find them? This would be important when setting up dependencies and controlling the build chain in a modern setup.

Thanks, Michael

Elena
Telerik team
 answered on 29 Nov 2021
1 answer
395 views

Hi,

I have the problem that my component styles are not assigned to the kendo grid column.


Component Html-Snippet:
<kendo-grid-column field="displayname" title="DisplayName"  [class]="'isTrainedColumn'"> </kendo-grid-column>

Component SCSS-Style Snippet:
.isTrainedColumn {
    text-align: right;
    background-color: red;
}

Generated HTML-Code:

<style>
.isTrainedColumn[_ngcontent-ndt-c454] {
  text-align: right;
  background-color: red;
}
</style>

Selector is only set at grid level and template level
<kendo-grid _ngcontent-ndt-c454="" ...>

But missing on the TD-Tag
Is this an issue or a missconfiguration on my side?
Silviya
Telerik team
 answered on 29 Nov 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?