Comments Differentiation is some recent requirement as new advancements in CSS been implemented. Customer requires differentiation in Image when some comment been added. It has been implemented with css and little Jquery.
Step:1: Include following icon tag in Link Text in report column attributes
<i class="fa fa-comments-o fa-3x icon-grey" aria-hidden="true"></i>
Step:2: Create hidden column to find comments exists for particular row.
Step:3: Include following JQuery for color differentiation:
Create Dynamic Action as Execute Javascript Code
Event : After Refresh and Page Load
$("#report_del_item .t-Report-report td[headers='GENERAL_COMMENTS']").each(function(){
var c = $(this).children("input[name='f17']").val();
if (c.length != 0)
{
$(this).closest('tr').find("td[headers='GENERAL_COMMENTS'] a").children("i").css({"color":"red"});
}
});
#report_del_item - Static Id of Report.
td[headers='GENERAL_COMMENTS'] - Represents General Comments Column
$(this).children("input[name='f15']") - Represents general comments hidden column , Children been specified as all hidden columns will be children to last visbile/display column.
.closest('tr') - Finds closest table row <tr>
.children(i) - Represents child icon tag inside parent general comments
.css - Adds style element to selector
Output:
You can notice General Comments to see Comments Differentiation
No comments:
Post a Comment