I can set the icons for the Bootgrid command buttons using Fontawesome icons, but can't make a fontawesome icon display in a Bootgrid table cell.
<td><i class='fa fa-check'></i></td>
I've checked it works outside the Bootgrid table.
Even styling does not work:
<td><span style="color:#ff0000!important">x</span></td>
I'm doing this at the moment and it works:
In the 'formatters' return an html string containing an element with a font awesome class.
"clipboard": function(column, row) {
htmlstring = "<i class=\"fa fa-clipboard\" aria-hidden=\"true\" alt=\"Copy to clipboard\"></i>"
return htmlstring
}
Hope that helps.
Rob Ganly
Related
I'm working with a data base that tells me if the user is a male (displays the "M" letter) or if is a woman (displays the "F" letter). I wanted to display the venus/mars icon depending on the gender instead of the letter itself (if is "M" the mars icon appears, if is "F" the venus icon appears). How can I do this?
Here is how I get the value from the data base :
<div class="gender" data-bind="text:Sex"></div>
PS: I am working with font awesome icons.
I tried assigning the font awesome icons but I'm not doing it right.
You can achieve this by using JS DOM. Just add class M or F it will automatic add fontawesome icon
<div class="gender m" data-bind="text:Sex"></div>
<script>
if (document.querySelector(".gender.M")) {
document.querySelector(".gender").innerHTML = `<i class="fa-solid fa-mars"></i>`;
}
else {
document.querySelector(".gender").innerHTML = `<i class="fa-solid fa-venus"></i>`;
}
</script>
When debug a webpage, a icon show on page but do not find the class definition! for example, below code use a class "icon icon-md ion-md-power", which libray should include to use this icon. any tutorial is welcome since I am a newbie for web programming!
<ion-icon name="md-power" role="img" class="icon icon-md ion-md-power" aria-label="power"></ion-icon>
ionicons not use CSS to display icon. ionicon have svg icons and get svg content by JavaScript based on ion-icon's attributes. You can learn about the Shadow DOM technology that ionicon uses to display icons in an MDN article.
icon.tsx, utils.ts#getUrl()
loadIcon() {
if (Build.isBrowser && this.isVisible) {
const url = getUrl(this); // <-- get URL of SVG icon! getUrl() declare at utils.ts.
if (url) {
if (ioniconContent.has(url)) {
this.svgContent = ioniconContent.get(url);
} else {
getSvgContent(url).then(() => this.svgContent = ioniconContent.get(url));
}
}
}
I am looking for a example for using kendo-grid Kendo for angular Grid for angular with tooltip on all cells and header.
I found they have this tooltip
EDIT!!!!
I need to put in the template a field from the dataItem (from the row)
I have this template but the dataItem doesnt work
What am I missing?
<ng-template #template let-anchor let-dataItem>
{{dataItem.NAME}}
<span *ngIf="anchor.nativeElement.textContent.length > 0">{{ anchor.nativeElement.textContent + dataItem.NAME}} </span>
</ng-template>
It is not clear what you want to show in the tooltip but generally you can just add the tooltip directive to the grid and set a filter for the cells:
<kendo-grid [data]="gridData" [height]="410"
kendoTooltip filter="td, th" [tooltipTemplate]="template">
https://plnkr.co/edit/448cL6c5iCK76rgXf8GW?p=preview
Edit:
They don't seem to have API to get the dataItem from the element but they seem to render the item index on the row and I was able to use it to get the dataItem for the anchor. Also, the filter input of the tooltip seems to conflict with the filter input of the grid so the tooltip should be initialized on a parent element:
https://plnkr.co/edit/9OmHXgDkcMprgw3oso3D?p=preview
For kendo MVC we use javascript like this for tooltip
$("#GridName").kendoTooltip({
filter: "th", //this filter selects all th and td cells
position: "top",
// apply additional custom logic to display the text of the relevant element only
content: function (e) {
var cell = $(e.target);
var content = cell.text();
return content;
}
}).data("kendoTooltip");
I'm stuck on a problem. I am using Kendo MVC and want to display font awesome icon in Grid Custom commands.
I have defined Grid Custom Commands for Edit, Delete, and Detail.
columns.Command(command =>
{
command.Custom("Edit").Action("Edit", "User");
command.Custom("Details").Action("Details", "User");
command.Custom("Delete").Action("Delete", "User");
}
Please review the following screenshot. I want to auto-add the fa fa-edit and other icons using MVC Helper extension method.
It is possible to override the CSS for the edit/details/delete command buttons which gives you the option to apply the same style for all pages or just one, for example:
.k-grid-content .k-button.k-grid-edit::before {
content: "\f044" !important;
}
.k-grid-content .k-button.k-grid-delete::before {
content: "\f1f8" !important;
}
And when grid transitions (after placed into edit mode):
.k-grid-content .k-button.k-grid-update::before {
content: "\f044" !important;
}
.k-grid-content .k-button.k-grid-cancel::before {
content: "\f1f8" !important;
}
Here is the a complete Dojo example and all Font Awesome icons along with their CSS values.
<a href="editauthority.jsp" title="Add a new connection" class="link btn btn-primary" role="button">
<i class="fa fa-plus-circle fa-fw" aria-hidden="true"></i>
Add a new connection</a>
I have an HTML element as above with an font-awesome icon. I want to find an element from html using its text.
This is what I have tried so far
//a[contains(#class,'btn') and contains(normalize-space(text()),'Add a new connection')]
But the problem is //a[contains(#class,'btn') and contains(normalize-space(text()),'')] returns the expected value with a new line before and few space at the start, which doesn't match with the expected value of Add a new connection
How can I match the element text ignore all new line and extra spaces.
I am using the above XPATH to find elements in selenium testing.
Update
Adding Selenium code
/**
* Clicks a button based on visible text, this type of button is created using anchor tag with .btn class
* #param text
*/
public void clickButton(String text)
{
WebElement element =
waitElementClickable(
By.xpath("//a[contains(#class,'btn') and contains(normalize-space(text()),'" + text + "')]"));
element.click();
if (!isAlertPresent())
{
wait.until(ExpectedConditions.invisibilityOfElementLocated(By.id("loader")));
}
}
It is important to realize the difference between Testing text() nodes vs string values in XPath.
Change this clause,
contains(normalize-space(text()),'Add a new connection')
to this
normalize-space()='Add a new connection'
So your complete XPath would read,
//a[contains(#class,'btn') and normalize-space()='Add a new connection']
You might also want to avoid inadvertent substring matching on #class by using this technique.
You can try this expression:
//a[contains(#class, "btn") and contains(.,"Add a new connection")]
Example