i have this code to show my data in javascript grid:
<pre lang="HTML"><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JQueryGridTemplate.aspx.cs"Inherits="JqueryGridDemo.JQueryGridTemplate" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JQuery Grid Template Demo</title>
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jquery.tmpl.js" type="text/javascript"></script>
<style type="text/css">
#tblEmployee td
{
padding: 2px;
background: #e8edff;
border-top: 1px solid #fff;
color: #669;
}
#tblEmployee th
{
padding: 2px;
color: #039;
background: #b9c9fe;
}
</style>
<script type="text/javascript">
function BindClientSideData() {
//JSON data format
var emps = [
{ Name: "John", Designation: "Analyst", Age: 25, Department: "IT", DataSource: "Client" },
{ Name: "Matthew", Designation: "Manager", Age: 38, Department: "Accounts", DataSource: "Client" },
{ Name: "Emma", Designation: "Senior Manager", Age: 40, Department: "HR", DataSource: "Client" },
{ Name: "Sid", Designation: "Analyst", Age: 27, Department: "HR", DataSource: "Client" },
{ Name: "Tom", Designation: "Senior Analyst", Age: 35, Department: "IT", DataSource: "Client" }
];
BindTable(emps);
}
function BindServerSideData() {
$.ajax({
type: "POST",
url: "JQueryGridTemplate.aspx/GetEmployees", //pagename.aspx/WebMethodname
data: "{}",// Blank data
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg, status, metaData) {
if (msg.d && msg.d.length > 0) {
BindTable(msg.d);
}
},
error: function(ex, status) {
//alert(ex.responseText);
alert("error");
},
complete: function(eret, tytyt) {
//alert("complete");
}
});
return false;
}
function BindTable(data) {
// removes existing rows from table except header row
$('#tblEmployee tr:gt(0)').remove();
//apply tmpl plugin to <script> and append result to table
$("#employeeTemplate").tmpl(data).appendTo("#tblEmployee");
}
</script>
<%--table row layout with data binding--%>
<script id="employeeTemplate" type="text/html">
<tr>
<td> ${Name}</td>
<td>${Designation}</td>
<td>{{if Age>30}}
<span style='background-color:red'>Middle-aged</span>
{{else}}
<span style='background-color:yellow'>Still young</span>
{{/if}}</td>
<td>${Department}</td>
<td> ${DataSource}</td>
</tr>
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="btnClient" type="button" value="Bind Grid with Client Data" onclick="BindClientSideData()" />
<asp:Button Text="Bind Grid with Server Data" runat="server" ID="btnServer" OnClientClick="javascript:return BindServerSideData()" />
<br />
<br />
<table id="tblEmployee">
<thead>
<tr>
<th>
Name
</th>
<th>
Designation
</th>
<th>
Age
</th>
<th>
Department
</th>
<th>
Data Source
</th>
<th>
Data Source
</th>
<th>
<a id="btnSelectCustomer1" href=#">Select</a>
<a href=#">View Report</a>
<a href=#">Submit</a>
</th>
</tr>
</thead>
</table>
</div>
</form>
</body></html>
</pre>
i want to put a link button at the last colm each row. please tell me how to do it.
Thanks in advance