CODEWITHSUNDEEP
c#javascriptasp.net.netrepeater
Hicham4
Hicham4

Reputation: 39

whole row selectable in a Repeater

I have the following: repeater with a couple rows. each row starts with linkbutton with which can i navigate to another page. what I now want to do is that I can click the whole row with the same clicking functionality of the linkbutton. Here is my Repeater:

    <table>
    <tr>
    <td>
<asp:Repeater ID="rptTasks" runat="server" onitemcommand="rptTasks_ItemCommand" 
    onitemdatabound="rptTasks_ItemDataBound" onitemcreated="rptTasks_ItemCreated">
<HeaderTemplate>
<table>
<tr>
<td colspan="8"></td>
<td colspan="2"> </td>
</tr>
</HeaderTemplate>
<ItemTemplate>

<tr style="cursor: pointer" onclick="Select(this);">
<td>
<asp:LinkButton ID="SelectRow" runat="server" CommandName="SelectRow" Text="Test" />
<asp:HyperLink ID="LnkTaskID1" runat="server"  CommandName="SelectRow" Text='<%# Eval("TaskID") %>' Font-Underline="True" /></td>
<td><asp:Label ID="StatusLabel1" runat="server" Text='<%# LocalizeStatusBinding(Eval("Status", "{0}")) %>' /></td>

</tr>

</ItemTemplate>
<AlternatingItemTemplate>
<tr style="cursor: pointer" onclick="Select(this);">
<td>
<asp:LinkButton ID="SelectRow" runat="server" CommandName="SelectRow" Text="Test" />
<asp:HyperLink ID="LnkTaskID1" runat="server"  CommandName="SelectRow" Text='<%# Eval("TaskID") %>' Font-Underline="True" /></td>
<td><asp:Label ID="StatusLabel1" runat="server" Text='<%# LocalizeStatusBinding(Eval("Status", "{0}")) %>' /></td>

</tr>

</table>
</AlternatingItemTemplate>
<FooterTemplate>
<tr>
<td colspan="5" align="left">
                    <asp:Label ID="lblCurrentPage" 
    runat="server"></asp:Label>
                </td>
                <td colspan="5" align="right">
                    <asp:HyperLink ID="lnkPrev" runat="server" Text="<< Prev"></asp:HyperLink>
                    <asp:HyperLink ID="lnkNext" runat="server" Text="Next>>"></asp:HyperLink>
                </td>
</tr>
</table>
</FooterTemplate>
</asp:Repeater>
 </td>
 </tr>
 </table>

I have also used javascript to get the selected row:

    <script type="text/javascript" >
function Select(obj) 
{ 
    obj.className = 'selected'; 
    var tbl = document.getElementById("table1") 
    var firstRow = tbl.getElementsByTagName("TR")[0]; 
    var oldRow = tbl.rows[firstRow.getElementsByTagName("input")[0].value];
    if (oldRow != null) 
    { 
        oldRow.className = ''; 
    } 
    firstRow.getElementsByTagName("input")[0].value = obj.rowIndex; 
}
    </script>

    <script type="text/C#" >
    onclick="this.getElementsByTagName('input')[0].clicked=true;
    </script>

When i give the second table tag an id="table1" i get jscript error, oldRow unknown

Does someone know a solution for this issue? for clarity: I want clicking on an row and then navigating just like if I click on the first linkbutton of each row.

In advance thanks.

Upvotes: 0

Views: 2087

Answers (1)

Sat
Sat

Reputation: 133

    $(function () {
        SetNaigationToSearchList();
    }
  );

    function SetNaigationToSearchList() {
        $("tr td")
        .css("cursor", "pointer")//set the pointer cursor for table row
        .click(function () {

            $row = $(this).parent();               
            var ID = $("td", $row).eq(0).text();//Get the 0 th col value of the cliked index... 
           alert('clicked');
            }

        });
    }

Upvotes: 1

Related Questions