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.

using Telerik.TestingFramework.Controls.KendoUI.Angular;
using Telerik.TestingFramework.Controls.KendoUI.Angular.Grid;

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

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

Hello,

Is there a way to change table/cells width in KendoEditor other than typing spaces or editing HTML source directly ?

Ideally with a mouse dragging, similar to what TinyMCE Editor offers.

Thank you,

--

Leonid.

Hello Team,

I am using line type stock chart for multiple series where I have dates like: "01-Jan-2021", "04-Jan-2021" and so on. I am using new Date() to parse the dates to Kendo acceptable format. Chart is rendering but dates are wrong on the X axis labels as well as tooltip. Data set contains multiple attributes along with date starting from "01-Jan-2021" but in the chart it is starting from "27-Dec-2020" that is incorrect and it is happening for all next data points. All data points showing incorrect date. I have tried to change date format by using getTime() method (referring Kendo API Data) but no luck. When I change the date range by using navigator it shows me correct start and end date in information popup which appears for few seconds but x axis labels are incorrect.

Could you please help me to understand what I am doing wrong here.

Thanks in advance.

Regards,

Deepesh