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"
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
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>
I have a form that spans multiple tabs in a TabStrip control. However, when the form is validated (e.g. f.valid), not all controls are considered when the validation is evaluated.
For example, if an input field is on tab 1 that is marked as "required" and the save action is called when the focus is on tab #3, the form will read as invalid since the required field is not in view. If the focus is on Tab #1, all works as expected.
I understand why this behavior is occurring, but I wanted to see if there was any suggested workaround.
Thanks!
Update
I created a plunkr that shows the basic issue. It is actually a little backwards from the problem I described, but it shows how the form ignores the fields on tabs other than the one displayed during validation: Plunkr Example
The template code looks like this:
<form #f="ngForm" (ngSubmit)="save(f)">
<kendo-tabstrip>
<kendo-tabstrip-tab [title]="'Paris'" [selected]="true">
<ng-template kendoTabContent>
<input type="text" name="controlOne" id="controlOne" [(ngModel)]="myModel.controlOne" required>
</ng-template>
</kendo-tabstrip-tab>
<kendo-tabstrip-tab [title]="'New York City'">
<ng-template kendoTabContent>
<input type="text" name="controlTwo" id="controlTwo" [(ngModel)]="myModel.controlTwo">
</ng-template>
</kendo-tabstrip-tab>
<kendo-tabstrip-tab [title]="'Tallinn'">
<ng-template kendoTabContent>
<input type="text" name="controlThree" id="controlThree" [(ngModel)]="myModel.controlThree">
</ng-template>
</kendo-tabstrip-tab>
</kendo-tabstrip>
<button type="submit">Save changes</button>
</form>
<div>
Valid when saving: {{ isValid }}
</div>
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>
Let this piece of html code:
<button
id= 'btnBckGrndColor'
class="jscolor {valueElement:'valueInput', styleElement:'zColorSample'}">A button
</button>
Chosen value: <input id="valueInput" value="">
<div id="zColorSample">Some text</div>
Clearly it modifies the background color of zColorSample.
How do I modify the font color of zColorSample?
A little late, but I figured I would answer because I just had this issue. To achieve this using JsColor, I just added the class jscolor to the input element then added the attribute onchange, which pointed to an update function that would update the font color instead. Here is an example of what I did,
<input type="text" class="jscolor" onchange="update(this.jscolor);" />
<p id="toChange">Text To Change</p>
Then the update function looked like this using jQuery,
function update(jscolor) {
$('#toChange').css("color", "#" + jscolor);}