Hide a GridView Column in ASP.NET C# and Retrieve Its Value Client-Side

To hide a specific column in an ASP.NET GridView while still retainign access to its data on the client side, follow these steps:

1. Attach the OnRowDataBound Event

In your .aspx markup, ensure the GridView inlcudes the OnRowDataBound handler:

<CimesUI:CimesGridView 
    ID="gvShow" 
    runat="server" 
    AutoGenerateColumns="False"
    OnRowDataBound="gvShow_RowDataBound"
    AllowPaging="true" 
    PageSize="30"
    Width="60%" 
    style="margin:0 auto;" />

2. Hide the Column in Code-Behind

In the RowDataBound event, hide both header and data cells by setting Visible = false:

protected void gvShow_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Header || e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.Cells[3].Visible = false; // Hides the 4th column (zero-based index)
    }
}

3. Preserve Hidden Column Data for Client Access

Since hidden cells are not rendered, their values aren’t available in JavaScript. To work around this, embed the value in a HiddenField within a visible cell:

protected void gvShow_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Header)
    {
        e.Row.Cells[3].Visible = false;
    }
    else if (e.Row.RowType == DataControlRowType.DataRow)
    {
        string sid = DataBinder.Eval(e.Row.DataItem, "Reliability_Picture_SID")?.ToString() ?? string.Empty;
        
        HiddenField hf = new HiddenField();
        hf.Value = sid;
        e.Row.Cells[0].Controls.Add(hf); // Add to first visible cell

        e.Row.Cells[3].Visible = false;
    }
}

4. Access the Value in JavaScript

Retrieve the hidden value from the DOM using querySelector:

function DownLoadCloseFile(link) {
    const row = link.closest('tr'); // Modern alternative to parentNode.parentNode
    const hiddenInput = row.querySelector('input[type="hidden"]');
    
    if (hiddenInput) {
        const reliabilityPictureSid = hiddenInput.value;
        console.log("SID:", reliabilityPictureSid);
        // Proceed with download logic using reliabilityPictureSid
    }
}

Note: The column containing Reliability_Picture_SID is hidden server-side but its value is preserved via the injected HiddenField, enabling client-side access without exposing it visually.

Tags: C# ASP.NET gridview HiddenField javascript

Posted on Fri, 02 Oct 2026 16:18:32 +0000 by greatme