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>
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 want to export data in excel using following code
<kendo-excelexport [data]="excelData" [group]="groups" [filterable]="true" fileName="exceldata.xlsx" #excelexport>
<kendo-excelexport-column title="title">
<ng-template kendoExcelExportCellTemplate let-dataItem>
{{dataItem.isTrue == 1 ? "title" }}
</ng-template>
<ng-template kendoExcelExportGroupFooterTemplate let-group="group" let-aggregates>
<span> Total</span>
</ng-template>
<ng-template kendoExcelExportFooterTemplate let-column="column">
<span>Grand Total</span>
</ng-template>
</kendo-excelexport-column>
</kendo-excelexport>
Please help me to resolve this issue.
Thanks in advance
Excel export does not use column template for formatting value or customizing data, please refer following link for further clarification https://www.telerik.com/kendo-angular-ui/components/grid/export/excel-export/#toc-known-limitations
You can customize the exported workbook by accessing the generated options, and modifying them as necessary:
DOCS AND EXAMPLE
You can customize both the appearance and value of each cell based on some custom logic.
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"
This HTML for the Kendo Angular dropdown leaves a single comma for the empty/default value and does not allow me to go back to an empty value once I've selected a value. I've played with all sorts of ternary operators on my template to no avail. Should I make a pipe for all instances of LastName, FirstName to make things easier?
<kendo-dropdownlist id="cost-engineer-dropdown"
formControlName="CostEngineerId"
[defaultItem]="{ text: 'Select an Engineer', value: '' }"
[data]="costEngineer | async"
[textField]="'LastName'"
[valueField]="'Id'"
value="this.LastName"
(valueChange)="valueChange('this.Id')"
(selectionChange)="selectionChange($event)"
[formControl]="masterProjectFormGroup.get('CostEngineerId')"
[valuePrimitive]="true"
[(ngModel)]="CostEngineerId"
>
<ng-template kendoDropDownListItemTemplate let-dataItem>
{{dataItem?.LastName}}, {{dataItem?.FirstName}}
</ng-template>
<ng-template kendoDropDownListValueTemplate let-dataItem>
{{dataItem?.LastName}}, {{dataItem?.FirstName}}
</ng-template>
</kendo-dropdownlist>
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