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
198 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
400 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
107 views
Martin Bechev
Telerik team
answered
on
03 Mar 2022
1 answer
336 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
280 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
84 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
192 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>
1 answer
310 views
I am trying to see if i can use tree view control in angular to allow my users to enable and move menu items.
Visually this seems to be not an issue but i am trying to figure out a way to sync the treeview data with my
backend end API. I use the NodeDrop event like this (nodeDrop)="handleDrop($event)" which gets me the start / orin position and where i droped it. But the problem is when i take a Node with some children and move it lets say all the way to top, the index of every Node will change but the only new index avail in the event is the destination index of where i dropped the node. In which case i would have to go and calculate all nodes new index but i hope there is a way to call a function which will provide a node module witch exposes all parents and child nodes and the current index.
Svet
Telerik team
answered
on
01 Mar 2022
0 answers
226 views
I have attached screenshot of report and index.html file. report rendering in my tr-viewer but icons only came as box. could you please help me to clear this issue in angular. Angular 10version i am using
1 answer
2.0K+ views
I would like my comboboxes to open or close the way a DropDownList works by clicking anywhere on the control, not just the arrow button.
I have tried handling the click event and calling .toggle(), but if I do this then clicking on the arrow button does not work.
Martin Bechev
Telerik team
answered
on
01 Mar 2022
