Questions on Kendo UI for Angular Forum

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

533 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

445 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

143 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.1K+ 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.4K+ 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

1 answer

1.2K+ views

Save As File Dialog

Hi,

May I know kendo has Save As file dialog for angular ?

Thanks

File Saver

answered on 08 Jul 2019

4 answers

665 views

[Solved] Send file contents (ArrayBuffer) during uploadEventHandler

I might be overlooking something, but I'm looking for a way to send the file itself (rawFile in the FileInfo) with the post. I'm getting all the File information and my additional values in the body, but can't seem to send the contents along with it. We are storing our documents in the DB.

--Angular with Node API.

Thanks for your time!

Upload

answered on 02 Jul 2019

3 answers

1.7K+ views

[Solved] How to set file restrictions on file browser for kendo upload

How can the file upload be configured so that the user does not have the option select files of a type that are not in the restrictions list.

Upload

answered on 02 Jul 2019

3 answers

260 views

Column header and content alignment mismatch

Hi all

I have an issue with the alignment of the header and content columns. Chrome displays the grid correctly but in Firefox the header columns aren't aligned with the content columns (see attachments). It seems that as soon as the scrollbar is visible, Firefox doesn't take into account the width of the scrollbar for the header columns. Is there a way to get around that issue?

Best regards,
Sandro

Grid

answered on 01 Jul 2019