Sunday, February 13, 2011

Get GridView selected row DataKey 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?

  • 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)" />
    
    Craig : This works if I have an edit button on every row. But I only have 1 edit button on the whole page on a toolbar above the grid. So the workflow is someone selects a record and then clicks edit on the toolbar. There is no way to pass the id to the editRecord function.
    Dave K : I agree with JasonS below as a good approach.
    Eric : how can i get the rows client id here, Dave?
    From Dave K
  • 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.

    From JasonS
  • 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 :-)

    EndangeredMassa : That's basically how I do this.
    From Craig
  • i want to take gridview cell value in javascript

    From aryan
  • This solution works great! Thanks! Solved an issue so soon.

    From deepa

0 comments:

Post a Comment