Questions on Kendo UI for Angular Forum

5 answers

1.0K+ views

Extend DataSourceResult with new property

Looking at this post from another one of your boards.

https://www.telerik.com/forums/extend-kendo-mvc-ui-datasourceresult-with-new-property

I'm doing the exact same thing with Angular. I managed the web service changes so the data is returned to Angular but I've not been successful at extracting the extra data and to keep functionality like sort/filter working.

General Discussions

answered on 19 Jul 2019

2 answers

144 views

Put chart series names as labels on the category axis

I have the chart code below that I would like to format so that the series names appear on the category axis as shown in the CaptureBugGood image,  my chart currently appears as in CaptureBugBad image.



Is there a way to have two levels of category axis labels such as category and then series, if not how can I put just the series names on the category axis while maintaining the series colors etc.

<kendo-chart *ngIf="!(graphType=='Doughnut')">

<kendo-chart-value-axis>

<kendo-chart-value-axis-item *ngFor="let item of valueAxes" [name]="item.name" [title]="{ text: item.title }"

[max]="item.max">

<kendo-chart-value-axis-item-labels [format]="item.format">

</kendo-chart-value-axis-item-labels>

</kendo-chart-value-axis-item>

</kendo-chart-value-axis>

<kendo-chart-category-axis>

<kendo-chart-category-axis-item [title]="xAxis_Label" [categories]="categories" [axisCrossingValue]="crossingValues">

</kendo-chart-category-axis-item>

</kendo-chart-category-axis>

<kendo-chart-axis-defaults>

<kendo-chart-axis-defaults-labels>

</kendo-chart-axis-defaults-labels>

</kendo-chart-axis-defaults>

<kendo-chart-legend [visible]="false"></kendo-chart-legend>

<kendo-chart-series>

<kendo-chart-series-item *ngFor="let series of model"

[name]="series.name"

[data]="series.data"

[categoryField]="series.category" field="value"

[stack]="series.stack"

[color]="series.color"

[type]="series.type"

[axis]="series.axis">

<kendo-chart-series-item-tooltip>

<ng-template let-value="value" let-category="category">

<span

[innerHTML]="series.dataLabel.replace('[value_1]', value.toLocaleString() ).replace('[year]', category ).replace('[series]', series.name ).replace('[#%]', ((value)*100).toFixed(1).toString() + '%') "></

span>

</ng-template>

</kendo-chart-series-item-tooltip>

</kendo-chart-series-item>

</kendo-chart-series>

</kendo-chart>

Charts

answered on 19 Jul 2019

2 answers

98 views

Grid Column Menu not Working in All IE versions

I am having trouble with the Grid Column Menu Filter and Columns button not popping the menu in all versions of IE. I have seen bug reports for jquery version but I am using straight angular 7 (no jquery). Wondering if I am missing something or maybe I need to update my progress versions?

Thanks,

Paul

Grid

answered on 18 Jul 2019

3 answers

453 views

Master Detail Grid with ChangeDetectionStrategy.OnPush

Quick question for OnPush strategy, any recommendations on how I can hook clicks on the hierarchy cells? Everything else seems to work pretty well but I noticed the hierarchy cells aren't traditional buttons.

Thank you!

Grid

answered on 18 Jul 2019

1 answer

146 views

Error when i retrieve date from kendo ui date-picker

I'm trying to store one date in my database with the [Date Picker Component for Kendo Ui][1]

So, this component format my selected data like this:

2019-07-23T00:00:00

I try to catch the return of the saved object and insert in my actual object, but i receive:

> Error: The 'value' should be a valid JavaScript Date instance. Check
> http://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/#toc-using-with-json
> for possible resolution.

My component:
<kendo-datepicker [(value)]="ReferenciaMktDataDisponivel" ></kendo-datepicker>

Also tried:

let dataDisponibilidade = new Date(this.formGroup.get('ReferenciaMktDataDisponivel').value)
this.formGroup.get('ReferenciaMktDataDisponivel').setValue(dataDisponibilidade)

My console.log of this date: `2019-07-17T00:00:00`

Can someone help me ?

[1]: https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/

DatePicker

answered on 18 Jul 2019

1 answer

559 views

Default filter menu logic

Is there a way to default the built in filter menu logic to use "OR" as opposed to "AND"? I know that you can remove the secondary filter option using the [extra] attribute, but what I'm looking for is simply a way to make the default logic selection "OR".

General Discussions

answered on 17 Jul 2019

1 answer

619 views

setting file restrictions in uploader

I have a file uploader:

<kendo-upload

#templateUploader

id="document"

[multiple]="false"

[saveUrl]="uploadSaveUrl"

[removeUrl]="uploadRemoveUrl"

[autoUpload]="false"

[disabled]="!templateTypeSelected"

[restrictions]="fileRestrictions"

(remove)="removeEventHandler($event)"

(success)="successEventHandler($event)"

(upload)="uploadEventHandler($event)">

</kendo-upload>

And I need to dynamically change fileRestrictions.allowedExtensions when I select a different document type from a drop down list:

templateTypeSelectionChange(documentType: NcDocumentTypeDto) {

this.templateTypeSelected = true;

this.selectedNcDocumentCategory.documentTemplate.ncDocumentTypeId = documentType.id;

this.fileRestrictions.allowedExtensions = documentType.extensions.split(',');

}

The string array is set correctly but the component is not updated with new file restrictions. What is the problem?

Upload

answered on 16 Jul 2019

3 answers

953 views

Dynamically open the window in new window

Hello,

I would like to open kendo UI window to in new window that persist design of component .

Reference Demo of w3school https://www.w3schools.com/code/tryit.asp?filename=G5WILX67XOQF

How can I achieve this functionality using kendo window ?

Demo appreciate.

Thanks

Window

answered on 16 Jul 2019

1 answer

468 views

Manually call validate on save after copy paste in grid

I have validators below to validate some columns in my grid.

I then have a save button that loops through my data and saves it to the server.

How can I manually trigger validation on all cells upon clicking save so that I can highlight validation errors prior to submitting to the server?

Similarly, if there is a server side error in a particular cell, how can I show the error message from the server in the context of the cell that contains the error?

public createFormGroup(dataItem: any): FormGroup {

return this.formBuilder.group({

'viewBy': [dataItem.viewBy, Validators.required],

'viewByDetail': [dataItem.viewByDetail, Validators.required],

'order': [dataItem.order, Validators.required],

'1997': [dataItem['1997'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],

'1998': [dataItem['1998'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],

'1999': [dataItem['1999'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],

'2000': [dataItem['2000'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],

'2001': [dataItem['2001'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],

'2002': [dataItem['2002'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],

'2003': [dataItem['2003'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],

'2004': [dataItem['2004'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],

'2005': [dataItem['2005'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],

'2006': [dataItem['2006'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],

'2007': [dataItem['2007'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],

'2008': [dataItem['2008'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],

'2009': [dataItem['2009'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],

'2010': [dataItem['2010'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],

'2011': [dataItem['2011'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],

'2012': [dataItem['2012'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],

'2013': [dataItem['2013'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],

'2014': [dataItem['2014'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],

'2015': [dataItem['2015'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],

'2016': [dataItem['2016'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],

'2017': [dataItem['2017'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],

'2018': [dataItem['2018'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],

'2019': [dataItem['2019'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])],

'2020': [dataItem['2020'], Validators.compose([Validators.pattern('^(\\d|,)*\.?\\d*$')])]

});

}

Grid

answered on 15 Jul 2019

2 answers

396 views

How can I use MaskedTextBox in Edit template of a grid?

I want to use the MaskedTextBox instead of a standard textbox in an Edit template of a grid, but I cannot find an axample how to do that.

What I have is:

<kendo-grid>

<kendo-grid-column field="description" title="Description">

<ng-template kendoGridEditTemplate let-dataItem="dataItem">

<input [(ngModel)]="dataItem.description" kendoGridFocusable name="Description" class="k-textbox"/>

</ng-template>

</kendo-grid-column>

</kendo-grid>

When I try

<ng-template kendoGridEditTemplate let-dataItem="dataItem">

<kendo-maskedtextbox …></kendo-maskedtextbox>

</ng-template>

then Angular logs in the console “kendo-maskedtextbox' is not a known element”, although I imported