How to integrate Reporting tool in Kendo UI Angular?
In DataGrid, export PDF is taking snapshot and downloads but not actually data?
Thanks in advance.
or
1 answer
470 views
I'm going to start development for a new CRUD app using Angular 6. I have used Angular Material and Bootstrap in my earlier projects. For a change, I want to use another UI Framework and see how it goes. What would be the best stable, easy to use Angular UI framework so far which is ideal for a CRUD application?
I googled and found that ng-lightning and SemanticUI have nice design, so could you please share your experience with those two frameworks if you have.
Martin Bechev
Telerik team
answered
on
07 Mar 2022
1 answer
392 views
Hello,
I am developing an angular application on webpack 5 .i have two problems with Grid that is:
I - Change Items Per Page
First time, i change items per page, the page number is not updated.
2nd, i re-click on select items per page, the page number is updated now.
II - Always shows "No records available." even if there is data.
Please help me soon.
Thanks !
0 answers
227 views
Hello Team,
I have a scenerio where i need to show the data in multiple lines within autocomplete field, I'm able to get multiple lines in item template but when selected it is displaying in single line, is there any way to show it in multiple lines?
TIA.
Srija .P
Srija
Top achievements
Rank 1
Rank 1
asked
on
06 Mar 2022
1 answer
271 views
I work on an enterprise application that has a mix of AngularJS (v1) and NGX (v2+) pages. We employ Kendo UI to construct Grids for list pages in the app.
Recently, we updated the the NGX portion of our application to Angular 12 via these update steps. After doing so however, the "items per page" text that usually appears at the bottom of the Kendo Grid next to the page size drop down disappeared from grids that are on AngularJS pages.
I've tried reverting the i18n migration step in the Angular upgrade guide which changes message IDs ("items per page" is one of the messages in messages.xlf) but this didn't help.
I also tried modifying the $scope's gridOptions that set the messages on the grid based on these docs i.e.
pageable: {
.
.
.
messages: {
itemsPerPage: "items per page"
}
}
but this also didn't work.
What's interesting is that if I modify the display or empty properties in messages, I do actually end up seeing a change. It's itemsPerPage (among other properties) whose updates can't be seen on the front-end. This might be a symptom of the same issue.
Anyone have ideas as to why this might be happening? Are there any incompatibility issues with certain versions of @progress/kendo-angular-<package_name> with version 12 of Angular?
Martin Bechev
Telerik team
answered
on
04 Mar 2022
1 answer
468 views
Hi.
Simple question about scrolling.
Is there any way to tell what is startRow or endRow for standard scroll? (Not virtual scrolling)
Since there is scrollTo option. Isn't there some way to tell where scroll bar is located?
Failing that is there a way to tell ContentScrollEvent ScrollTop max height?
Thanks
Kaspars
Martin Bechev
Telerik team
answered
on
04 Mar 2022
1 answer
217 views
Martin Bechev
Telerik team
answered
on
03 Mar 2022
1 answer
384 views
Hi,
I would like to integrate the Kendo UI grid into my ASP.Net Zero application. I have ASP. Net Zero application with Angular frontend and .Net Core back end. And I need any documentation or help to integrate the grid considering 2 points as follows:
1- How to read from JSON file that returned from .NET Core to Angular?
2- How to switch the grid (in ASP.Net Zero) from LTR to RTL.
Please note that ASP.NET Zero is based on AspNet Boilerplate.
Awaiting your reply.
Thank you.
Valentin
Telerik team
answered
on
02 Mar 2022
1 answer
366 views
I am considering purchasing Kendo UI Professional, but it's sale price is thousand bucks. Infragistics price is lower at 700$ and it's equally good. So, I am going to purchase that most likely.
Kendo doesn't have some features that i think are basic. I tried to implement a simple tags input control and I couldn't. Had to go back to select2 control.
They don't seem to have any support to S3 in upload control.
These are important in my application and Kendo doesn't provide them out of the box. Bums me out that i have to implement these manually after spending 1000 usd on the control set.
Martin Bechev
Telerik team
answered
on
02 Mar 2022
1 answer
154 views
Hi,
I have a template driven form and use some kendo elements (e.g. DatePicker or Dropdownlist). The error is the same for all the Kendo widgets, I'll describe it here only for the DatePicker:
In my component 1, there's my form and I call my sub-component where the datepicker is in it:
<form #form="ngForm" novalidate="novalidate">
<my-datepicker [(property)]="myProperty" [parentctrl]="this"></my-datepicker>
...
</form>
In my sub-component there is the kendo DatePicker:
<kendo-datepicker #datePicker
calendarType="classic"
[attr.name]="datePickerName"
[(ngModel)]="dateVal"
[format]="'dd.MM.yyyy'"
(ngModelChange)="datePickerChanged()"></kendo-datepicker>
The name of the DatePicker is set dynamically via [attr.name]. The value is inside the component:
@Component({
selector: 'my-datepicker',
templateUrl: './my-datepicker.component.html',
viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
styleUrls: ['./my-datetimepicker.component.less']
})
export class MyDatepickerComponent {
public datePickerName: string = "myName";
}
When I check this.parentctrl.form.form.controls[this.datePickerName], there is no form control for my datepicker. Also, when I replace it with <kendo-datepicker name="{{datePickerName}}". This problem only exists, when I set the DatePicker name dynamically. When I use a static name (<kendo-datepicker name="myName"), I can find the datePicker in the form.controls array.
I need access to the form.controls array for validation purposes, but I need to set the name attribute dynamically from component code.
With normal html5 elements (like input) it works. But with Kendo elements (DatePicker, Dropdownlistm ...) there is the problem in the form.controls array.
Do you have any idea how to "refresh" the form controls array after setting the name dynamically?
Thanks,
Katharina
Martin Bechev
Telerik team
answered
on
02 Mar 2022
0 answers
278 views
Hello,
I need help with horizontal scroll issue. The column headers have a delay of position while scrolling.
Could you please help me with that? 🙏🙏
***EXAMPLE***
VIDEO:
https://streamable.com/l37xri
CODE:
<app-grid-adapter [contextMenuItems]="contextMenuItems"
(contextMenuItemSelect)="onContextMenuSelect($event)">
<app-shared-loading *ngIf="loading$ | async"
[height]="height"></app-shared-loading>
<kendo-grid #grid
[excelExportName]="name"
[kendoGridBinding]="gridData$ | async"
[gridDataRef]="gridData$"
kendoGridSelectBy="tradeId"
[selectable]="{mode: 'multiple'}"
[aggregates]="aggregates"
[height]="height"
[columnMenu]="true"
[groupable]="groupable$ | async"
[filterable]="filterable$ | async"
[selectedKeys]="gridSelection"
(selectedItemsChange)="onSelectedItemsChange($event)"
(selectionChange)="onSelectedItemChangedCustom($event)">
<ng-template kendoGridColumnMenuTemplate
let-service="service">
<app-column-menu-template [service]="service"
[grid]="grid"
[filterable$]="filterable$"
[groupable$]="groupable$"
(exportCsv)="exportCsv()"
(toggleGrouping)="toggleGrouping($event)"
(switchFilterRows)="switchFilterRows($event)">
</app-column-menu-template>
</ng-template>
<kendo-grid-excel fileName="Kniha portfoliových obchodů.xlsx"
[fetchData]="exportExcel.bind(this)"></kendo-grid-excel>
<basic-string-column title="Číslo obchodu"
field="tradeNumber"
width="134">
</basic-string-column>
<basic-string-column title="Směr"
field="tradeDirectionName"
width="137">
</basic-string-column>
<basic-string-column title="ISIN"
field="portfolioInstrumentName"
width="89">
</basic-string-column>
<basic-string-column title="RČ/IČO klienta"
field="clientIdentNumber"
class="text-right"
width="135">
</basic-string-column>
<basic-string-column title="CUID"
field="cmdId"
class="text-right"
width="135">
</basic-string-column>
<basic-string-column title="RČ/IČO protistrany"
field="counterPartyIdentNumber"
class="text-right"
width="159">
</basic-string-column>
<basic-string-column title="Nominee Account"
field="nomAccountName"
width="107">
</basic-string-column>
<basic-string-column title="Produkt"
field="productName"
width="107">
</basic-string-column>
<basic-string-column title="Měna"
field="currencyCode"
width="85">
</basic-string-column>
<basic-string-column title="Název emise"
field="portfolioInstrumentNameExt"
width="375">
</basic-string-column>
<basic-string-column title="Jméno klienta"
field="clientName"
width="136">
</basic-string-column>
<basic-string-column title="Jméno protistrany"
field="counterPartyName"
width="155">
</basic-string-column>
<basic-string-column title="Trh"
field="marketCode"
width="90">
</basic-string-column>
<basic-string-column title="Vypořádací centrum"
field="settlementMarketCode"
width="167">
</basic-string-column>
<basic-string-column title="Pár"
field="twinTradeId"
width="71">
</basic-string-column>
<basic-string-column title="Portfolio"
field="portfolioName"
width="201">
</basic-string-column>
<basic-string-column title="Provize"
field="commissionValue"
format="{0:n4}"
editor="numeric"
filter="numeric"
class="text-right"
[thousands]="[4, 4]">
</basic-string-column>
<basic-number-column title="Poplatek trh"
field="feeMarketValue"
format="{0:n4}"
editor="numeric"
filter="numeric"
class="text-right"
[thousands]="[4, 4]">
</basic-number-column>
<basic-number-column title="Poplatek obchodu"
field="feeMerchantValue"
format="{0:n4}"
editor="numeric"
filter="numeric"
class="text-right"
[thousands]="[4, 4]">
</basic-number-column>
<basic-string-column title="Registr"
field="clientCSDPCode"
class="text-right"
width="92">
</basic-string-column>
<basic-string-column title="Uživatel"
field="brokerName"
width="128">
</basic-string-column>
<basic-number-column title="Kusy"
field="quantity"
format="{0:n4}"
editor="numeric"
filter="numeric"
class="text-right"
width="88"
[thousands]="[4, 4]">
</basic-number-column>
<basic-number-column title="Cena"
field="price"
format="{0:n6}"
editor="numeric"
filter="numeric"
class="text-right"
[width]="85">
</basic-number-column>
<basic-number-column title="Objem"
field="volume"
format="{0:n4}"
editor="numeric"
filter="numeric"
class="text-right"
width="100"
[thousands]="[4, 4]">
</basic-number-column>
<basic-number-column title="AUV"
field="accruedInterest"
format="{0:n6}"
editor="numeric"
filter="numeric"
class="text-right"
width="100">
</basic-number-column>
<basic-string-column title="Stav obchodu"
field="statusName"
width="131">
</basic-string-column>
<!-- <kendo-grid-column title="Popis"
field=""
width="150"></kendo-grid-column> -->
<basic-date-column title="Datum přijetí"
field="creationDate"
width="127"
filter="date"
format="{0:d}"
[dateFormat]="'dd.MM.yyyy HH:mm:ss'">
</basic-date-column>
<basic-date-column title="Datum obchodu"
field="tradeDate"
width="146"
filter="date"
format="{0:d}">
</basic-date-column>
<basic-date-column title="Datum vypořádání"
field="settlementDate"
width="159"
filter="date"
format="{0:d}">
</basic-date-column>
<basic-date-column title="Datum účetní"
field="accountingDate"
width="130"
filter="date"
format="{0:d}">
</basic-date-column>
<basic-date-column title="Datum nabytí"
field="acquisitionDate"
width="130"
filter="date"
format="{0:d}">
</basic-date-column>
<basic-string-column title="Druh portfolia"
field="portfolioTypeName"
width="133">
</basic-string-column>
<basic-string-column title="Interní pozice"
field="internalPositionName"
width="151">
</basic-string-column>
<basic-string-column title="Správce"
field="managerName"
width="97">
</basic-string-column>
<basic-string-column title="Účel držení"
field="holdingPurposeName"
width="116">
</basic-string-column>
<basic-string-column title="Cílový klient"
field="lastClientName"
width="130">
</basic-string-column>
<basic-string-column title="Cílový klient IČO"
field="lastClientIdentNumber"
width="130">
</basic-string-column>
<basic-string-column title="Poznámka"
field="note"
width="355">
</basic-string-column>
<basic-string-column title="Id"
field="tradeId"
[hidden]="true"
width="150">
</basic-string-column>
</kendo-grid>
</app-grid-adapter>
<ng-template #confirmDialogAction>
<button class="btn-ok"
style="border-radius: 0.25rem;"
(click)="okConfirmDialog(true)">OK
</button>
<button class="btn-cancel"
style="border-radius: 0.25rem;"
(click)="cancelConfirmDialog(false)">Zrušit
</button>
</ng-template>
