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>
Related
i am trying to add a popup form using an ng-template which have multiple selects .on ngOnInit() i add all the values as null
some of these selects are shown based on the previous select value using ngif
the problem is that when i change the value the second select go away but its value still the same this is my code :
<div *ngIf="cosForm.value.customer=='617e7d83c68272eba7c36c13'">
<div class="form-group text-right">
<label class="col-form-label" for="service">customer</label>
<select ng-model="selectedItem" class="form-control" placeholder="customer" autocomplete="customer"
formControlName="customer" required
[ngClass]="{ 'is-invalid': submitted && f.customer.errors, 'is-valid': f.customer.touched && !f.customer.errors }">
<option *ngFor="let customer of myCustomers" value="{{customer._id}}">{{customer.name}}</option>
</select>
<div *ngIf="submitted && f['customer'].errors" class="invalid-feedback">
<div *ngIf="f['customer'].errors.required">customer is required</div>
</div>
</div>
i want when i change the first select value the second ng select value set to null
i tried to use
<select onChange="cosForm.value.customer=null"> </select>
on the first select but i didnt get any result
i wanted to use :<div *ngIf="cosForm.value.customer=='!617e7d83c68272eba7c36c13'">
but i couldn't figure out how to affect the value
BTW: even if i change the first select, without changing the second ,i think the second select value is automatically changed because my submit button change to invalid and it became valid only when i fill the second select
If you are trying to invalidate another select based on one select then you can listen to changes in the first select tag with this
form.controls.customer.valueChanges.subscribe(()=>{
// Set the value of the second select to null here
form.controls.secondSelect.reset()
})
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"
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>
In angular 2 select options with ngRepeat for array of string is working fine, but its not working as expected when the data is array of object. ngModel is displaying as '[Object object]' instead of selected object.
Am tried with stringify also but no luck.
Here is my code.
HTML:
<select [(ngModel)]="selectedItem">
<option value="" selected disabled>Select any one</option>
<option *ngFor="let item of items" [value]="item">{{item.name}}</option>
</select>
{{selectedItem}}
Data:
items: any = [{name:'a', rate:20}, {name:'b', rate:36}, {name:'c', rate:42}];
Your suggestion are helpfull to me.
Thank you!
[value] on <select> works only for string values. For object values it requires [ngValue]
<option *ngFor="let item of items" [ngValue]="item">