insert href in javascript grid

Question

0.00/5 (No votes)

See more:

i have this code to show my data in javascript grid:

ASP.NET

<%@ 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"  önclick="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>

i want to put a link button at the last colm each row. please tell me how to do it.
Thanks in advance

Posted 15-Aug-13 18:46pm

saifullahiit

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ashutosh Mahto · Accepted Answer · 2013-08-15T19:34:00

You can add it in the "employeeTemplate" itself.

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>
    <td>
        <a class="selectAction" href="javascript:selectRowAction(this);">Select</a>
        <a class="viewAction" href="javascript:viewReportAction(this);">View Report</a>
        <a class="submitAction" href="javascript:submitRowAction(this);">Submit</a>
    </td>
</tr>

Then you can define these functions according to your need.

I hope this helps.
Thanks