ハイパーリンクの列を作りたい！ということもあります。そんな時には、igGridの列の定義にunbound: true, template: "ここにリンクのHTML"という感じの追加してやります。
igGridのサンプル的には以下のようにやります。
列テンプレート サンプル - Grid コントロールの 列テンプレート - Ignite UI™jp.igniteui.com
上記サンプルはボタンですが、ハイパーリンクにするにはaタグにしてあげればOKです。以下のような感じ。
<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><head><metacharset="UTF-8" /><title>Insert title here</title><scripttype="text/javascript"src="/js/modernizr.js" th:src="@{/js/modernizr.js}"></script><scripttype="text/javascript"src="/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script><scripttype="text/javascript"src="/js/jquery-ui.min.js" th:src="@{/js/jquery-ui.min.js}"></script><scripttype="text/javascript"src="/js/infragistics.loader.js" th:src="@{/js/infragistics.loader.js}"></script><linkrel="stylesheet"type="text/css"href="/css/main.css" th:href="@{/css/main.css}"></link></head><body><buttonid="button">save</button><tableid="grid"></table><scripttype="text/javascript" th:inline="javascript">/*<![CDATA[*/ $.ig.loader({ scriptPath : /*[[@{/js}]]*/"/js", cssPath : /*[[@{/css}]]*/"/css", resources : "igGrid.*", ready : function(){ $("#button").click(function(){ $("#grid").igGrid("saveChanges", function(){ $("#grid").igGrid("commit");}, function(e){ console.log(e);});}); $("#grid").igGrid({ primaryKey : "id", dataSource : /*[[@{/api/people}]]*/"/people", autoGenerateColumns : false, columns : [{ key : "id", headerText : "ID", dataType : "number", hidden : true}, { key : "name", headerText : "名前", dataType : "string"}, { key : "age", headerText : "年齢", dataType : "number"}, { key : "nav", headerText : "", unbound : true, template : "<a href=[[@{/index/${id}}]] >${id}</a>"}]});}});/*]]>*/</script></body></html>