Option to add an image on the grid link field

Feature Requests
1

Hi,

I would like to add an icon such as a pencil for edit on the grid/table view using the link option.

Thanks

Dan


2

Hi Dan -

View and Edit links now can have icons added to them, when you click the edit pencil for that column. More information canb be found in our help article "Tables: Columns".

eu32tsAxYJz-JTGk6i9EBQ.png1098×503

Thanks!

3

For reference: http://helpdesk.knackhq.com/support/discussions/topics/5000058375

Also added updates to this Tips & Tricks.

4

It also uses the text in the grid/table header for that column as the title (Text shown on hovering over the icon).

5

Hi, I have looked and can add it using JS/CSS but the "Edit", "View" and I assume "Delete" links all have the same class of "ang-link" meaning I cannot set different icons per link type, can we please refine this by adding another selector to each.

To add for example the + icon you see on the "Allow users to add records" Connections you would use the below replacing the "view_37" with your view unless you want it for all links then just use .any (I will also post in Tips & Tricks):

JS:

$(document).on('knack-view-render.view_37', function(event, view, data) {

$("td.kn-table-link > span > a.ang-link").text("").attr("title", $("th.kn-table-link > span").text()).append('<span class="icon-plus-sign"></span>');

});

CSS:

#view_37 td.kn-table-link span a.ang-link {

text-decoration: none;

}

#view_37 td.kn-table-link span a.ang-link .icon-plus-sign:before{

color: #aaa;

}

#view_37 td.kn-table-link span a.ang-link:hover .icon-plus-sign:before {

color: inherit;

}