Here it is described how to put a tooltip on a kendo grid cell. However it is only about tooltip containing some information from the anchor element, for example its title attribute. But what is the best way to integrate external information not available at the anchor? In my case I want to have a tooltip displaying the name of the last editor of the grid item when I hover over a particular cell of it. The name is not part of the cell content. It comes additionally from the backend for each grid row. How can I access it for the tooltip?
<kendo-grid [height]="200"
[data]="myModel">
<kendo-grid-column field="one" title="First column" width="90"></kendo-grid-column>
<kendo-grid-column field="two" title="Second column" width="60"></kendo-grid-column>
<kendo-grid-column field="three" title="Third column" width="120"></kendo-grid-column>
</kendo-grid>
OK, I solved it. The solution was to modify the kendo column with ng-template:
<kendo-grid-column title="My titel" width="90">
<ng-template kendoGridCellTemplate let-dataItem>
<span kendoTooltip title="{{dataItem?.tooltipContent}}">
{{dataItem?.cellContent}}
</span>
</ng-template>
</kendo-grid-column>
This way I "smuggle" the external data to the cell HTML element. Then it can be easily accessed with kendo tooltip directive.
Related
I am trying to display data on each and every tab, but the issue is the data I have is relatably large to fit in a single screen.
I am looking for a way to make tabs scrollable so that I can scroll on the data.
Is there any way to add buttons on the edges of the tabs or add a horizontal scrollbar to make it scrollable?
Something like this, which is responsive too.
Thanks
You can solve it through Angular material Tabs. Here, is the documentation of angular.
https://material.angular.io/components/tabs/examples
Remember, you have to import MatTabModule on your angular module, like below:
I have added it on my project and a sample image is like below:
Additionally, if you want to add a button instead of text, you can do it also. Here is a sample image for you:
Here, sample code for this is
<mat-tab-group>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="example-tab-icon">thumb_up</mat-icon>
First
</ng-template>
Content 1
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="example-tab-icon">thumb_up</mat-icon>
Second
</ng-template>
Content 2
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="example-tab-icon">thumb_up</mat-icon>
Third
</ng-template>
Content 3
</mat-tab>
</mat-tab-group>
You can use any mat-icon class here to change the button icon. You can use this link https://material.io/resources/icons/?style=baseline .
Hopefully, it will solve your problem.
This is my DOM element. Data is being fetched from backend and I am using *ngFor to display data. What I want it on click of that edit button I want the respective row's text to have an input tag and the edit button to change to save button. And on clicking save button the input should disappear.
Below are the html code and image of my DOM element. Right now on the click of edit button I am just toggling editable to true or false but it's not working either.
<span *ngFor="let body of myLinkBody;let last=last" class="myLinkBody" [class.myLinkBodyLast]="last">
<a [href]="domainURL+body.href" contenteditable="editable">{{body.value}}</a>
<div id="editLinkButton"><a (click)="edit($event,body)"></a> </div>
<div id="deleteLinkButton"><a></a></div>
</span>
Try setting a new property to each object in myLinkBody array to maintain the current state whether its being edited or not.
myLinkBody.map(body => { body.currentState="edit"; return body});
and use an extra tag input field use [(ngModel)].Use [hidden] on both achor tag and input tag ,show and hide them based on current state.
<span *ngFor="let body of myLinkBody;let last=last;let i=index" class="myLinkBody" [class.myLinkBodyLast]="last">
<a [href]="domainURL+body.href" [hidden]="body.currentState=='save'">{{body.value}}</a>
<input type="text" [(ngModel)]="myLinkBody[i].name" [hidden]="body.currentState=='save'"/>
<button (click)="edit($event,body,index)">{{body.currentState}}</button>
<div id="deleteLinkButton"></div>
</span>
In edit function
edit(event,body,index){
if(body.state == 'save')
this.myLinkBody[index].state='edit';
else
this.myLinkBody[index].state='save';
.....your code here
}
Example stackblitz :https://stackblitz.com/edit/angular-5hrmfv
I have implemented a basic snippet, that will display sample data as list using *ngFor, where the fields can be edited by clicking the edit button.
Check out the snippet here: https://stackblitz.com/edit/angular-rmvkat
Live URL : https://angular-rmvkat.stackblitz.io/
I arranged the checkboxes and the text right next to each other using bootstrap grid. But, when I click on the textbox other than the first one, only the first checkbox gets enabled. How do I make the respective checkboxes get enabled without distorting the order?
Here is my stackblitz url
The stackblitz is not working properly but one thing you can try is making the id of the checkboxes unique like
component-
public routes=[{"id":1, "place":"Chennai - 500085/Madhapur, TS"}, {"id":2,
"place":"chennai-mumbai"}, {"id":3, "place":"chennai-madhapur"}, {"id":4,
"place":"chennai-secundrabad"}];
html-
<div class="col-sm-1" style="margin-top: 10px;">
<mat-checkbox class="check-style" id="route.id"></mat-checkbox>
</div>
<div class="col-sm-10">
<div class="routesList">
{{route.place}}
</div>
</div>
I hope it helps.
Using prime ng data table's column checkbox as,
<p-column [style]="{'width':'38px'}" selectionMode="multiple">
</p-column>
I want to add a tooltip in the header to indicate a value of checkAll/uncheck All.
In stack overflow found that in prime faces we can add a tooltip how to do this in angular?
You could try to add to a template, something like this:
<p-column [style]="{'width':'38px'}" selectionMode="multiple">
<ng-template pTemplate="header">
<span pTooltip="this is a tooltip!" appendTo="target"
style="position: relative">
{{row[col.field]}}
</span>
</ng-template>
</p-column>
Also make sure you imported tooltip in app.module, import {TooltipModule} from 'primeng/tooltip';
I have a tabView and a list of tab-panels.
Based on runtime conditions, I need to hide and unhide one of the tab panels.
Can not find a way to do this using looking at their docs or here.
Any suggestions?
In general is there a way to dynamically add and remove tab panels?
Code I am using now that is not working, my test syntax must be wrong:
<div [ngSwitch]="isNEC">
<ng-template ngSwitchCase="'true'">
<p-tabView>
<p-tabPanel header="Detail">
<linechart #linechart></linechart>
</p-tabPanel>
<p-tabPanel header="Assessment">
Coming soon to a theater near you !!!!
</p-tabPanel>
</p-tabView>
</ng-template>
<ng-template ngSwitchCase="'false'">
<p-tabView>
<p-tabPanel header="Detail">
<linechart #linechart></linechart>
</p-tabPanel>
</p-tabView>
</ng-template>
</div>
unless I put a switch default, nothing ever shows up.
isNEC is a component public attribute of type string
all is well, I just needed to check for 'true' and not "'true'"