asp.net - Get GridView selected row DataKey in Javascript - Stack Overflow

admin管理员组

文章数量:1200985

I have GridView which I can select a row. I then have a button above the grid called Edit which the user can click to popup a window and edit the selected row. So the button will have Javascript code behind it along the lines of

function editRecord()
{
  var gridView = document.getElementById("<%= GridView.ClientID %>");
  var id = // somehow get the id here ???
  window.open("edit.aspx?id=" + id);
}

The question is how do I retrieve the selected records ID in javascript?

I have GridView which I can select a row. I then have a button above the grid called Edit which the user can click to popup a window and edit the selected row. So the button will have Javascript code behind it along the lines of

function editRecord()
{
  var gridView = document.getElementById("<%= GridView.ClientID %>");
  var id = // somehow get the id here ???
  window.open("edit.aspx?id=" + id);
}

The question is how do I retrieve the selected records ID in javascript?

• asp.net
• javascript
• gridview

Share Improve this question Follow asked Oct 23, 2008 at 4:29 CraigCraig 36.8k3535 gold badges121121 silver badges202202 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 10

I worked it out based on JasonS response. What I did was create a hidden field in the Grid View like this:

<asp:TemplateField ShowHeader="False">
    <ItemTemplate>
      <asp:HiddenField ID="hdID" runat="server" Value='<%# Eval("JobID") %>' />
    </ItemTemplate>
</asp:TemplateField>
<asp:TemplateField Visible="False">
    <ItemTemplate>
      <asp:LinkButton ID="lnkSelect" runat="server" CommandName="select" Text="Select" />
    </ItemTemplate>
</asp:TemplateField>

Then on the OnRowDataBind have code to set the selected row

protected virtual void Grid_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // Click to highlight row
        Control lnkSelect = e.Row.FindControl("lnkSelect");
        if (lnkSelect != null)
        {
            StringBuilder click = new StringBuilder();
            click.AppendLine(m_View.Page.ClientScript.GetPostBackClientHyperlink(lnkSelect, String.Empty));
            click.AppendLine(String.Format("onGridViewRowSelected('{0}')", e.Row.RowIndex));
            e.Row.Attributes.Add("onclick", click.ToString());
        }
    }            
}

And then in the Javascript I have code like this

<script type="text/javascript">

var selectedRowIndex = null;

function onGridViewRowSelected(rowIndex)
{        
    selectedRowIndex = rowIndex;
}

function editItem()
{   
    if (selectedRowIndex == null) return;

    var gridView = document.getElementById('<%= GridView1.ClientID %>');                
    var cell = gridView.rows[parseInt(selectedRowIndex)+1].cells[0];        
    var hidID = cell.childNodes[0];        
    window.open('JobTypeEdit.aspx?id=' + hidID.value);
}

</script> 

Works a treat :-)

1) change your javascript function to use a parameter

function editRecord(clientId)
{ ....

2) output the call in your editRecord button... if you want to avoid dealing with the .net generated ids, just use a simple

<input type="button" onclick="editRecord(your-rows-client-id-goes-here)" />

Based off of your comments to @DaveK's response, in javascript you can set the id of a hidden field to the clientId of the selected row when the user selects it. Then have your editRecord function use the value set on the hidden form field.

one could avoid javascript altogether, by setting anchor tags pre-populated with the query string for each row (although this will effect your table layout, it will need only one click rather than 2 from the user)

insert in the gridview template:

<asp:HyperLink runat="server" ID="editLink" Target="_blank"
   NavigateURL='<%# Eval("JobID","edit.aspx?id={0}") %>'> 
     Edit..
</asp:HyperLink>

本文标签： aspnetGet GridView selected row DataKey in JavascriptStack Overflow