Questions on Kendo UI for Angular Forum

3 answers

83 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.9K+ views

[Solved] 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.5K+ 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.1K+ 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

709 views

[Solved] 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

620 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

1 answer

68 views

How to make some rows in edit mode at the same time?

I have a grid which only 2 column are editable, and not all rows editable. How can I make these rows in edit mode at the same screen?

Grid

answered on 17 Apr 2019

5 answers

617 views

Responsive Menu

Hi,

How can I go about making the menu responsive?

Something similar to this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_responsive_navbar_dropdown

Thanks.

General Discussions

answered on 15 Apr 2019

1 answer

579 views

painting issue when switching tabs

Hi,

I am using kendo-tabstrip-tab. In each of the tab's content I have a kendo-grid. When we switch between the tabs, there is painting issue.I see the following information on your website.

"By default, the component either creates the content of all its tabs when it is initialized or creates the content of each tab when the tab becomes active. When the

When set to true, the component renders all tabs and they are persisted in the DOM. By default, keepTabContent is false.tab is not in use anymore, the TabStrip destroys it. This specific default behavior depends on the value of the keepTabContent option.

"

Where do I set keepTabContent=true ? Will this solve the painting issue when we switch between tabs.

Regards,

Jyothi

TabStrip

answered on 12 Apr 2019