HI,
I have a grid with 2 columns. In my first column I would like to have a complex control (image and text side by side).
So I have 2 colums with key, Col1, Col2.
Col1 has the value '<a>test</a>'.
My rowtemplate is defined like :" <tr><td> ${Col1} </td><td>${Col2}</td></tr>".
The problem is that my "url" is shown as simple text "<a>test</a>" and not as a URL.
If I change my rowtemplate to "<tr><td><a>${Col1}</a></td><td>${Col2}</td></tr>", it works fine, but thats not the behavior I pretend to implement, has my Col1 will be more complex than just a <a>test</a>.
Any ideas?
Best Regards!
Francisco Correia
Hi..
In iggrid template, is there any option to show minified string value(as like setting up with substring) and on clicking "see more" option which can enable the full text?
For example,
Consider a full text data: "Life is beautiful, everyone has their own talent to show it up".
The above data should show in grid as "Life is beautiful, everyone has... (with see more(link))"
When click on see more link the full text data should be shown. it is possible??
Suggest me a solution plzz..
Thanks
Regards
Sathish
HI..
Am using iggrid to show some data which contains html format datas. And i have a template showing the html data using {{html <fieldname>}} which works very fine.
Now, am facing a difficulty in showing the same html data in tool tip, where i can't use {{html <fieldname>}}. Its not working. Am very tired searching for the solution. Please give me a soultion.
Here is the code am using for tooltip:
Note: The columnkey "Posts" has the html data(for eg: <p>If u have any word by using eg.</p>)
features: [ { name: "Tooltips", style: tooltipStyle, columnSettings: [ { columnKey: "Posts", allowTooltips: true }, { columnKey: "Date", allowTooltips: false }, { columnKey: "PostID", allowTooltips: false }, { columnKey: "LikesCount", allowTooltips: false }, { columnKey: "CommentsCount", allowTooltips: false }, ], visibility: "always", showDelay: 100, tooltipShowing: function (e, args) { var message = "<div class='event-fired'>tooltipShowing " + "event fired, with arguments:" + "</div>" + "<div class='event-args'>" + "Key of the current row: " + args.columnKey + "<br />" + "Index of the current row: " + args.index + "<br />" + "Index of the current column: " + args.columnIndex + "<br />" + "Index of the current cell: " + args.element.cellIndex + "<br />" + formatValue(args) + "<br />" + "<span class='tooltip-italic'>This event is cancalable. You need to return false in the handler. </span>" + "<br />" + "</div>"; showEvent(message); }, tooltipShown: function (e, args) { var message = "<div class='event-fired'>tooltipShown " + "event fired, with arguments:" + "</div>" + "<div class='event-args'>" + "Key of the current row: " + args.columnKey + "<br />" + "Index of the current row: " + args.index + "<br />" + "Index of the current column: " + args.columnIndex + "<br />" + "Index of the current cell: " + args.element.cellIndex + "<br />" + formatValue(args) + "<br />" + "</div>"; showEvent(message); }, tooltipHiding: function (e, args) { var message = "<div class='event-fired'>tooltipHiding " + "event fired, with arguments:" + "</div>" + "<div class='event-args'>" + "Key of the current row: " + args.columnKey + "<br />" + "Index of the current row: " + args.index + "<br />" + "Index of the current column: " + args.columnIndex + "<br />" + "Index of the current cell: " + args.element.cellIndex + "<br />" + "<span class='tooltip-italic'>This event is cancalable. You need to return false in the handler. </span>" + "<br />" + "</div>"; showEvent(message); }, tooltipHidden: function (e, args) { var message = "<div class='event-fired'>tooltipHidden " + "event fired, with arguments:" + "</div>" + "<div class='event-args'>" + "Key of the current row: " + args.columnKey + "<br />" + "Index of the current row: " + args.index + "<br />" + "Index of the current column: " + args.columnIndex + "<br />" + "Index of the current cell: " + args.element.cellIndex + "<br />" + "</div>"; showEvent(message); } } ] }); function formatValue(args) { var eventText = ''; if (typeof (args.value) === "object") { // do nothing } else { eventText = "Text: " + args.value; } return eventText; } function showEvent(message) { alert(message); $("#eventsInfo").html($("#eventsInfo").html() + message). prop({ scrollTop: $("#eventsInfo").prop("scrollHeight") }); }
Hi Francisco,
The answer to your question is that you're trying to inject html content into the row template, but the expression template ${} which you're using is escaping them. You should use {{html <fieldName>}} template expression instead.
Here you can find the explanation. This is the except from the document:
"The values rendered by ${} are evaluated as strings, and are HTML encoded. Any embedded markup will therefore be encoded. To insert the not encoded markup in the rendered template, use instead the {{html}} template tag. "
Having said all that you should use the following row template:
rowTemplate: "<tr><td> {{html Col1}} </td><td>${Col2}</td></tr>"
In 12.1 we introduced our own templating engine which is supposed to replace the jQuery templating engine which we used in earlier versions. We now use our templating engine by default in our jQuery controls. If you want to use the jQuery templating engine you should set jQueryTemplating option of igGrid to true.
Again in 12.1 release we introduced column templates which is convenient way to set template only for one column. Here is an example code of using column templating:
$("#grid1").igGrid({ columns: [ { headerText: "col1", key:"col1", dataType:"string", template: "{{html col1}}"}, { headerText: "col2", key:"col2", dataType:"string"}, ], });
$("#grid1").igGrid({
columns: [
{ headerText: "col1", key:"col1", dataType:"string", template: "{{html col1}}"},
{ headerText: "col2", key:"col2", dataType:"string"},
],
});
You can use column template in your scenario.
Hope this helps,
Martin Pavlov
Infragistics, Inc.