Questions on Kendo UI for Angular Forum

3 answers

489 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

188 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

581 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

655 views

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

1.0K+ 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

497 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

408 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

import { InputsModule, MaskedTextBoxComponent } from '@progress/kendo-angular-inputs';

So what’s the correct syntax for the MaskedTextBox?

MaskedTextBox

answered on 11 Jul 2019

4 answers

112 views

[Solved] video for angular fileupload

I'm sure that recently I found a video demonstrating an approach for using the angular file upload component with a .NET Core Web API project. I have searched high and low and find myself not able to find it. Any clues anyone?

Upload

answered on 10 Jul 2019

1 answer

3.0K+ views

How do you set the height/# rows of editor

I am unable to determine how to set the height of the editor. Additionally, it would be nice if it would autosize, increase height upon entering text.

Editor

answered on 10 Jul 2019

1 answer

5.3K+ views

Kendo Grid Column width is not applied

I have two pages one page has kendo grid in it and grid column width is applied without an issue.

This code works:

<div class="row">
<div class="col-lg-12 pv-lg col align-self-center">
<kendo-grid [kendoGridBinding]="gridData" [pageSize]="pageSize" [pageable]="gridData.length > 9 && pageSize > 0"
[sortable]="false"
[filterable]="false"
[groupable]="false">
<ng-template kendoGridToolbarTemplate>
<button type="button" kendoGridExcelCommand ><span class="k-icon k-i-file-excel"></span>Export to Excel</button>
</ng-template>
<kendo-grid-column
*ngFor="let column of columnNames; let i = index;" field="{{column}}" [width]="calculateColumnLength(i)"></kendo-grid-column>
<kendo-grid-excel fileName="{{ cardTitle }}.xlsx" [fetchData]="allData"></kendo-grid-excel>
</kendo-grid>
</div>
</div>

However when I build tab strips with grid in it. The grid column width is not applied.

This code doesn't work:

<kendo-tabstrip (tabSelect)="handleTabSelected($event)">
<kendo-tabstrip-tab *ngFor="let tab of tabsInfo; let i = index" [title]="tab.tabName" [selected]="i == 0">
<ng-template kendoTabContent>
<kendo-grid [kendoGridBinding]="tab.gridData">
<ng-template kendoGridToolbarTemplate>
<button type="button" kendoGridExcelCommand ><span class="k-icon k-i-file-excel"></span>Export to Excel</button>
</ng-template>
<kendo-grid-column *ngFor="let column of tab.columnNames; let j = index;" field="{{column}}" width="230"></kendo-grid-column>
<kendo-grid-excel fileName="{{tab.tabName}}.xlsx" [fetchData]="allData"></kendo-grid-excel>
</kendo-grid>
</ng-template>
</kendo-tabstrip-tab>
</kendo-tabstrip>

I been on this issue for the past two days, could some one please point out what am I doing wrong.

Regards,

Alex

General Discussions

answered on 10 Jul 2019