or
1 answer
337 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
287 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
85 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
205 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
317 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
229 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
0 answers
73 views
Hello,
I want to override existing functionality of kendo grid.
When we press ctrl+down arrow it scroll down to 5 row but instead of that I want whenever I press ctrl+down arrow it goes to last row and whenever I press ctrl+up arrow it goes to top row in kendo grid for angular.
1 answer
1.2K+ views
I m using kendo-upload file control as below.
<kendo-upload formcontrolname="cfile" [saveurl] = "fileurl" [upload] ="uploadhandler" >
I could not use interceptor as my existing saveurl request is done by http not through httpclient.Also how i can calculate the file upload percentage
Dimiter Madjarov
Telerik team
answered
on
23 Feb 2022
1 answer
2.0K+ views
I have tried different ways to format, but couldn't get what I want. In my angualr App, I have data from database, like this
PacificTime TimeZoneCode TimeZone
2022-02-16 14:00:00.000 US/Eastern ET
With Kendo format, I was able to convert the time to local time based on the time zone, the result is: Wed Feb 16 2022 17:00:00 GMT-0500 (EST), but when I applied date pipe, it always convert back to old time. I tried is dateformat: 'dd/MM/yyyy hh:mm a' since I need it to be '02/16/2022, 05:00 PM'. I tried other format as well, but none was working. Please tell me which part went wrong, time format, or time zone convert? Below is the code to convert with Kendo. In ts:
convertTest(dateTime: string, zone: string) {
const from = new Date(dateTime);
const to = ZonedDate.fromLocalDate(from, zone)
return to
}
in html:
{{convertTest(dataItem.pacificTime, dataItem.imeZoneCode ) | date: 'dd/MM/yyyy hh:mm a' }}
also tried
{{dataItem.pacificTime | date: 'dd/MM/yyyy hh:mm a' : dataItem.imeZoneCode }} but still no working.
Thanks in advance.
Martin Bechev
Telerik team
answered
on
23 Feb 2022
