insert href in javascript grid

Aug 16 2013 12:45 AM

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

Answers (1)

Ajax call to a web method does not give response

Adding event calendar in jquery