Questions on Kendo UI for Angular Forum

1 answer

543 views

Multi-page repeating header and footer

Hello,

Is there a way to specify header and footer templates for multi-page pdf export ?

Thanks

PDF Export

answered on 29 Apr 2019

2 answers

5.1K+ views

Collapse all grid rows

Is it possible to collapse all rows or expend only one row at a time?

I've already tried this

https://www.telerik.com/kendo-angular-ui/components/grid/api/GridComponent/#toc-expandrow

Thank you in advance

General Discussions

answered on 26 Apr 2019

1 answer

132 views

Context menu is hidden behind kendo window

If the context menu is inside a kendo window, the context menu will be hidden by the kendo window.How can i make the context menu show in front of the kendo window. Thanks.

Menu

answered on 25 Apr 2019

3 answers

69 views

Dropdown, Grid, Inputs not compatible with Angular 7

We upgraded our app from Angular 6 to 7. After the upgrade, we are getting a bunch of errors with the Resize Sensor when building in production mode. I attached a screenshot of the error. For troubleshooting, I created a brand new angular 7 app, added the dropdowns package along with popup and resize sensor packages, and get similar errors. Build is fine in dev mode.

General Discussions

answered on 24 Apr 2019

1 answer

1.8K+ views

cellClick event not being carried into handler?

Going off this example
https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-row-click/#preview-2

Im having trouble with inline editing. When I click on a cell, my click handler gets called, but no event information is carried over. Im using the safe-nav operator because the grid wont have data until some other actions happen which results in an api call to fetch data. The grid loads fine, but the $event doesnt seem to get carried into the click handler.

grid:

<kendo-grid [data]="selectedOrder?.lineItems" id="lineItemGrid"

[height]="360" (cellClick)="cellClickHandler($event)">

click handler: when this method is hit in the debug console, the parameters are undefined. What can I check to see why?

public cellClickHandler({ isEdited, dataItem, rowIndex }): void {

if (isEdited || (this.formGroup && !this.formGroup.valid)) {

return;

}

this.saveCurrent();

this.formGroup = createFormGroup(dataItem);

this.editedRowIndex = rowIndex;

this.lineItemGrid.editRow(rowIndex);

}

Grid

answered on 23 Apr 2019

1 answer

3.4K+ views

Kendo Grid - databound to boolean rendered as checkbox?

So Im looking at this example

https://txu6rb.run.stackblitz.io

How can I bind the "Discontinued" field to checkbox column? Shouldn't just be all that's needed?
eg. specifying the field?

<kendo-grid-checkbox-column showSelectAll="true" field="Discontinued" width="25"></kendo-grid-checkbox-column>

When I make that change, even through some of the Product's data has Discontinued as true, no checkboxes are displayed checked.

What am I missing?

General Discussions

answered on 22 Apr 2019

4 answers

1.0K+ views

Different class for each item

Hello!

I need to style some sortable items using the bootstrap grid system. If I set the itemClass to col-6 to all of them, everything works nice. I attached two pictures, one with the code and one with the result of this case.

But, I want some groups to be large and some small. (so depending on an item property, to have col-6 or col-12). If I set the col-{{group.size}} class to a div inside the template, bootstrap grid does not work correctly anymore.

Is it possible to achieve this behavior in some way?

Sortable

answered on 19 Apr 2019

3 answers

672 views

Dynamic Series Labels

Hi

I have a stacked bar chart that I want to have the series labels to be dynamically created on the last "color"

Currently in the attached file, i attached the series label to my "blue" bar. However once inside the callback I can't get to my component to generate a dynamic label.

If i have just 2 colors, i can calculate the label using "value" and "stackedValue" ... but with more than 2 i need to get at my component

So how can I get the label to show total for each color in the row, not just the last color, ie

1st row is 1/4/7
2nd row is 2/5/8
3rd row is 3/6/9

Here is my sample

https://stackblitz.com/edit/angular-vushqc?file=app/app.component.ts

Thanks

Charts

answered on 18 Apr 2019

2 answers

592 views

Splitter 100%height

using the Splitter for left / right layout and looking to find a way to make the splitter take up full height and width of the screen.

I have tried style="height: 100%;" on the

<kendo-splitter orientation="vertical" style="height: 100%;">

but this didnt do anything. If I set the height to a px value it works fine.

Please help - here is a for an example.

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

Splitter

answered on 17 Apr 2019

1 answer

1.6K+ views

Validation not working properly

Hello

I have an option list, and depending on the selection one of two ComboBoxes should be required

But the required state only gets active, after I select a value in the ComboBox which is meant to be required - when I then delete the entry again, it displays as error and the form gets invalid, but not directly after setting it via code and updating value&validitiy

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">

<label for="lastname">{{'BORN_IN' | translate}}</label>

<div [ngClass]="{'w-error': formGroup.get('BirthDomestic').invalid }">

<label class="i-check-label w-marging-offset-bottom">

<input type="radio"

name="BirthDomestic"

formControlName="BirthDomestic"

(change)="onBirthDomesticChange($event)"

[value]="1"

cubidoICheck />

{{ 'ITALY' | translate }}

</label>

</div>

<div [ngClass]="{'w-error': formGroup.get('BirthDomestic').invalid }">

<label class="i-check-label w-marging-offset-bottom">

<input type="radio"

name="BirthDomestic"

formControlName="BirthDomestic"

(change)="onBirthDomesticChange($event)"

[value]="0"

cubidoICheck />

{{ 'ABROAD' | translate }}

</label>

</div>

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">

<label>{{'BIRTHPLACE' | translate}}</label>

<div class="k-widget-override" [ngClass]="{'w-error': formGroup.get('BirthRegionId').invalid }">

<kendo-combobox [data]="regionCodes.RegionCodes"

[placeholder]="'SELECT_REGION' | translate"

[valuePrimitive]="true"

[valueField]="'Id'"

[textField]="'FilterName'"

formControlName="BirthRegionId"

[clearButton]="false"

[filterable]="true"

(filterChange)="regionCodeFilterChanged($event)">

<kendo-combobox-messages noDataText="{{ 'NO_DATA_FOUND_TWO_CHARS' | translate }}">

</kendo-combobox-messages>

</kendo-combobox>

</div>

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">

<label>{{'BIRTHPLACE' | translate}}</label>

<div class="k-widget-override" [ngClass]="{'w-error': formGroup.get('BirthCountryId').invalid }">

<kendo-combobox [data]="countryCodes.CountryCodes"

[placeholder]="'SELECT_COUNTRY_2' | translate"

[valuePrimitive]="true"

[valueField]="'Id'"

[textField]="'FilterName'"

formControlName="BirthCountryId"

[clearButton]="false"

[filterable]="true"

(filterChange)="countryCodeFilterChanged($event)">

<kendo-combobox-messages noDataText="{{ 'NO_DATA_FOUND_TWO_CHARS' | translate }}">

</kendo-combobox-messages>

</kendo-combobox>

</div>

public onBirthDomesticChange(): void

{

if (this.formGroup.controls["BirthDomestic"].value === 1)

{

this.formGroup.controls["BirthRegionId"].setValidators(Validators.required);

this.formGroup.controls["BirthCountryId"].setValidators(Validators.nullValidator);

}

else

{

this.formGroup.controls["BirthRegionId"].setValidators(Validators.nullValidator);

this.formGroup.controls["BirthCountryId"].setValidators(Validators.required);

}

this.formGroup.updateValueAndValidity();

}

Best regards

Jürgen

ComboBox

answered on 17 Apr 2019