<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JQueryGridTemplate.aspx.cs"Inherits="JqueryGridDemo.JQueryGridTemplate" %>
JQuery Grid Template Demo</title><br><br> <script src="jquery-1.8.3.min.js" type="text/javascript"></script><br><br> <script src="jquery.tmpl.js" type="text/javascript"></script><br><br> <style type="text/css"><br> #tblEmployee td<br> {<br> padding: 2px;<br> background: #e8edff;<br> border-top: 1px solid #fff;<br> color: #669;<br> }<br> #tblEmployee th<br> {<br> padding: 2px;<br> color: #039;<br> background: #b9c9fe;<br> }<br> </style><br><br> <script type="text/javascript"><br> function BindClientSideData() {<br> //JSON data format<br> var emps = [<br> { Name: "John", Designation: "Analyst", Age: 25, Department: "IT", DataSource: "Client" },<br> { Name: "Matthew", Designation: "Manager", Age: 38, Department: "Accounts", DataSource: "Client" },<br> { Name: "Emma", Designation: "Senior Manager", Age: 40, Department: "HR", DataSource: "Client" },<br> { Name: "Sid", Designation: "Analyst", Age: 27, Department: "HR", DataSource: "Client" },<br> { Name: "Tom", Designation: "Senior Analyst", Age: 35, Department: "IT", DataSource: "Client" }<br> ];<br> BindTable(emps);<br> }<br><br> function BindServerSideData() {<br> $.ajax({<br> type: "POST",<br> url: "JQueryGridTemplate.aspx/GetEmployees", //pagename.aspx/WebMethodname<br> data: "{}",// Blank data<br> contentType: "application/json; charset=utf-8",<br> dataType: "json",<br> success: function(msg, status, metaData) {<br> if (msg.d && msg.d.length > 0) {<br> BindTable(msg.d); <br> }<br> },<br> error: function(ex, status) {<br> //alert(ex.responseText);<br> alert("error");<br> },<br> complete: function(eret, tytyt) {<br> //alert("complete");<br> }<br> });<br> return false;<br> }<br><br> function BindTable(data) {<br> // removes existing rows from table except header row<br> $('#tblEmployee tr:gt(0)').remove();<br> //apply tmpl plugin to <script> and append result to table<br> $("#employeeTemplate").tmpl(data).appendTo("#tblEmployee");<br> }<br> </script><br><br> <%--table row layout with data binding--%><br> <script id="employeeTemplate" type="text/html"><br> <tr><br> <td> ${Name}</td> <br> <td>${Designation}</td><br> <td>{{if Age>30}}<br> <span style='background-color:red'>Middle-aged</span><br> {{else}}<br> <span style='background-color:yellow'>Still young</span><br> {{/if}}</td><br> <td>${Department}</td><br> <td> ${DataSource}</td> <br> </tr><br> </script><br><br></head><br><body><br> <form id="form1" runat="server"><br> <div><br> <input id="btnClient" type="button" value="Bind Grid with Client Data" onclick="BindClientSideData()" /><br> <asp:Button Text="Bind Grid with Server Data" runat="server" ID="btnServer" OnClientClick="javascript:return BindServerSideData()" /><br> <br /><br> <br /><br> <table id="tblEmployee"><br> <thead><br> <tr><br> <th><br> Name<br> </th><br> <th><br> Designation<br> </th><br> <th><br> Age<br> </th><br> <th><br> Department<br> </th><br> <th><br> Data Source<br> </th><br> <th><br> Data Source<br> </th><br> <th><br> <a id="btnSelectCustomer1" href=#">Select</a><br> <a href=#">View Report</a> <br> <a href=#">Submit</a><br> </th><br> </tr><br> </thead><br> </table><br> </div><br> </form><br><br></pre><br><br><br>i want to put a link button at the last colm each row. please tell me how to do it.<br>Thanks in advance</div></article><section class="comments" id="replies"><header class="comments-head"><span class="comments-badge" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M3 3h10a2 2 0 0 1 2 2v4.5a2 2 0 0 1-2 2H7.5L4 14.5V11.5H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"></path></svg></span><div><h2 class="comments-title">1 Reply</h2><p class="comments-sub">Know the answer? Post it — somebody with the same question will find it here.</p></div></header><div class="comment-signin"><span class="comment-signin-badge" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M11.5 3.5h3.2a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-3.2" stroke-linecap="round"></path><path d="M4.5 10h7" stroke-linecap="round"></path><path d="M8.8 7.2 11.6 10l-2.8 2.8" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><div class="comment-signin-body"><p class="comment-signin-title">Sign in to <!-- -->answer this question</p><p class="comment-signin-text">It is the same account you read, post and publish with — and you will come straight back to this page.</p></div><div class="comment-signin-actions"><a class="btn primary-btn comment-signin-btn" href="/login?returnurl=%2Fforums%2Finsert-href-in-javascript-grid">Sign in</a><a class="comment-signin-alt" href="/register?returnurl=%2Fforums%2Finsert-href-in-javascript-grid">Create an account</a></div></div><ul class="comment-list"><li class="comment-thread reply-accepted"><article class="comment"><a class="comment-photo-link" href="/members/iftikar-hussain" title="Iftikar Hussain"><span class="comment-photo avatar-initials" title="Iftikar Hussain" style="background-image:linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);font-size:16px" aria-hidden="true">IH</span></a><div class="comment-main"><div class="comment-head"><p class="comment-byline"><a href="/members/iftikar-hussain" class="comment-author">Iftikar Hussain</a><span class="posted-when" tabindex="0"><time class="posted-when-value comment-time" dateTime="2013-08-16T00:53:09.647Z">13y<!-- --> ago</time><span class="posted-when-pop" role="tooltip"><span>Posted<!-- --> <!-- -->Aug 16, 2013, 12:53 AM</span></span></span></p><span class="reply-accepted-flag">Accepted answer</span></div><div class="article-body">Hi,<br /> Try like this<br /><br /><div><script id="employeeTemplate" type="text/html"></div><div> <tr></div><div> <td> ${Name}</td> </div><div> <td>${Designation}</td></div><div> <td>{{if Age>30}}</div><div> <span style='background-color:red'>Middle-aged</span></div><div> {{else}}</div><div> <span style='background-color:yellow'>Still young</span></div><div> {{/if}}</td></div><div> <td>${Department}</td></div><div> <td> ${DataSource}</td></div><div> <span style="font-weight: bold;"><td><a href="">${Name}</a></td></span></div><div> </tr></div><div> </script></div><br />Regards,<br />Iftikar</div><div class="comment-foot"></div></div></article></li></ul></section></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(a){$RT=performance.now();for(var b=0;b<a.length;b+=2){var c=a[b],e=a[b+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&requestAnimationFrame(g._reactRetry)}}a.length=0};
$RC=function(a,b){if(b=document.getElementById(b))(a=document.getElementById(a))?(a.previousSibling.data="$~",$RB.push(a,b),2===$RB.length&&("number"!==typeof $RT?requestAnimationFrame($RV.bind(null,$RB)):(a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:$RT+300-a)))):b.parentNode.removeChild(b)};$RC("B:1","S:1")</script><div hidden id="S:3"></div><script>$RC("B:3","S:3")</script><div hidden id="S:0"></div><script>$RC("B:0","S:0")</script></body></html></body></html> insert href in javascript grid
i have this code to show my data in javascript grid: