How can I format category axes in chart?
I found this help file, but I can not connect it with my source code:
<kendo-chart [categoryAxis]="{ categories: graphsCategories }">
<kendo-chart-legend position="bottom" orientation="horizontal"></kendo-chart-legend>
<kendo-chart-series>
<kendo-chart-series-item *ngFor="let item of graphsSeries" type="line"
[data]="item.timers"
[name]="item.name">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
I would like to format date to view only days:
Change this:
<kendo-chart-series-item *ngFor="let item of graphsSeries" type="line" [data]="item.timers" [name]="item.name">
</kendo-chart-series-item>
To this:
<kendo-chart-series-item *ngFor="let item of graphsSeries" type="line" [data]="item.timers" [name]="item.name">
<kendo-chart-category-axis-item-labels format="EEEE">
</kendo-chart-category-axis-item-labels>
</kendo-chart-series-item>
Change the format to whatever you want but EEEE will give you the day
Related
Using Ignite UI for Angular Data Grid and I want to make an editor for the name of a column. However, the grid control seems to disable any input controls I put into the header template.
How can I enable input controls in the header template for my grid?
The code below creates a grid with an input control in the header. The input control cannot be clicked or the value edited.
<ng-template igx-header #editColumnMapping let-column>
<input type="text" name="textInput" [value]="column.header" />
</ng-template>
<igx-grid #grid2 [data]="[[1], [2], [3], [4]]">
<igx-column header="Values" [headerTemplate]="editColumnMapping" field="0"></igx-column>
</igx-grid>
Your code looks correct. I have created a sample for you in StackBlitz
<igx-grid #grid1 [data]="data">
<igx-column header="Rank" field="Id" [headerTemplate]="hTemplate"></igx-column>
<igx-column header="Athlete" field="Name" [headerTemplate]="hTemplate"></igx-column>
...
<ng-template #hTemplate let-column>
<div (click)="fieldInput.focus()">
<span >{{column.header}}</span>
<br />
<input #fieldInput [(ngModel)]="column.header" style="width: 100%">
</div>
</ng-template>
The sample is working with both the latest 9.0.0-beta.6 and 8.2.13
I have a number of divtags (as shown below) that contains a hrefthat I'm looking for. I can return the all of the hrefs and append them to a list but what I need to do is to just return the hrefs where the date equals the newest date in <li class="last first date"></li>. Any help on how I could achieve this would be great.
<div class="span8 story index_story genre-letter">
<a class="gtm-event" data-evt-action="/opinion/letters/article 1 on
/opinion/letters" data-evt-category="Section element" data-evt-
label="Position 98 of 99" href="/opinion/letters/article 1">
<span class="h2">Article 1</span>
</a>
<div class="article_info">
<ul>
<li class="last first date">February 21, 2018</li>
</ul>
</div>
I want to display hyperlinks within a grid of Kendo UI for Angular. Sometimes the simplest of things are the hardest to do...
Here is my column:
<kendo-grid-column field="number" title="Number">
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
{{dataItem.number}}
</ng-template>
</kendo-grid-column>
I'd like the 'number' to be blue and underlined as a regular hyperlink but it's just black and not underlined.
<kendo-grid-column field='Number' title='Number' width='120'>
<ng-template kendoGridCellTemplate let-dataItem >
{{dataItem.number}}
</ng-template>
</kendo-grid-column>
Just style it and add either a link or a custom click event as shown above.
this worked for me :
<kendo-grid-command-column width="550">
<ng-template kendoGridCellTemplate let-dataItem="dataItem">
<a style="color: blue" href="https://www.w3schools.com/html/">{{dataItem.number}}</a>
</ng-template>
</kendo-grid-command-column>
i guess you need "kendo-grid-command-column" instead of "kendo-grid-column"
Was wondering if it is possible to format a date in a column using a property.
E.g:
<kendo-grid-column field="DOB" format="{0:d}" title="DOB" width="160" >
</kendo-grid-column>
I would like to format the DOB using a property.
In my TS file I would have something like:
shortDate="dd/mm/yyyy"
In HTML:
<kendo-grid-column field="DOB" format="{0:shortDate}" title="DOB" width="160" >
</kendo-grid-column>
Something like that possible?
Thanks,
Solution I ended up using:
<kendo-grid-column field="DOB" title="DOB" width="160" >
<ng-template kendoGridCellTemplate let-dataItem>
{{dataItem.DOB | date:config.ShortDate}}
</ng-template>
</kendo-grid-column>
For anyone in future's use, You can easily format it using below format property as below
<kendo-grid-column title="Received On" field="labReceivedDate" format="{0: dd MMM yyyy}" width="120px "></kendo-grid-column>
I am trying to build a pie chart in Kendo-ui-angular2. Pie chart is displayed but labels are not. Any live plunker or example is highly appreciated.
<kendo-chart>
<kendo-chart-title text="Gross domestic product growth /GDP annual %/"></kendo-chart-title>
<kendo-chart-legend position="top" orientation="horizontal"></kendo-chart-legend>
<kendo-chart-tooltip format="{0}%"></kendo-chart-tooltip>
<kendo-chart-series>
<kendo-chart-series-item *ngFor="let item of series"
type="donut" [data]="item.data" [name]="item.name">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
private series: any[] = [{
name: ["India","Aus", "Fin"],
data: [3.907, 7.943, 7.848]
}];
You have to add :
<kendo-chart-series-defaults>
<kendo-chart-series-defaults-labels [visible]="true" </kendo-chart-series-defaults-labels>
</kendo-chart-series-defaults>