ASP.NET Gridview: Highlighting rows on mouse over then updating the highlighted rows

Question

So I have scoured the internet for a solution to this problem, and haven't been to successful so far. I am trying to update a SQL database based on "highlighted" rows in a GridView in ASP.NET. Here is the code I have so far for highlighting.

// ASP.NET

// GridView1 Row DataBound event: adds selection functionality
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    e.Row.Attributes.Add("onmousedown", "IsMouseDown(this)");
    e.Row.Attributes.Add("onmouseup", "IsMouseDown(this)");
    e.Row.Attributes.Add("onmouseover", "HighlightRow(this)");
}

// Javascript

<script type="text/javascript">
    var mousedown = false;

    document.onselectstart = new Function ("return false")

    function IsMouseDown(row) {
        if (mousedown == false) mousedown = true;
        else mousedown = false

        if (mousedown == true) {
            HighlightRow(row)
        }
    }

    function HighlightRow(row) {
        if (mousedown == true) {
            if (row.className == 'gridHighlightedRow') {
                row.className = 'gridNormalRow';
            }
            else {
                row.className = 'gridHighlightedRow';
            }
        }
    }
</script>

// CSS Classes

.gridNormalRow
{
    background-color: #FFFFFF; 
}
.gridHighlightedRow
{
    background-color: #FFFFCC;
}

The above code is working perfectly, the problem is that I can't do anything with the highlighted rows because Javascript (based on my understanding) modiefies the tr tag, not the actual GridView class or BackColor. I have looked all over the place for a solution, all I need to do is find some identifier I can access from my C# code to update each row. Anyone have any ideas?

Quick Edit

I actually thought of using some type of hidden field, I just have no idea how to do that with JavaScript or what I would need to do the the Row.Attributes.Add() to make it save to a hidden field. Can I see some examples of what I would need to do (JavaScript is not my strong suite)

Answer 1

So I figured it out. It is a little messy but it works till I refine what I have.

First I sent the Row Index to javascript

// C#

// GridView1 Row DataBound event: adds selection functionality
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    // Excludes row header and pager rows
    if (e.Row.RowType != DataControlRowType.Header && e.Row.RowType != DataControlRowType.Pager)
    {
        e.Row.Attributes.Add("onmousedown", "IsMouseDown(this," + e.Row.RowIndex + ")");
        e.Row.Attributes.Add("onmouseup", "IsMouseDown(this," + e.Row.RowIndex + ")");
        e.Row.Attributes.Add("onmouseover", "HighlightRow(this," + e.Row.RowIndex + ")");
    }
}

Then did the highlighting and for each row moused over with when mousedown was true I appended a string. When the mouseup event fires I did a postback of the string

// Javascript

<script type="text/javascript">
    var mousedown = false;
    var returnGrid = "";

    document.onselectstart = new Function ("return false")

    function IsMouseDown(row, index) {
        if (mousedown == false) mousedown = true;
        else mousedown = false

        if (mousedown == true) {
            HighlightRow(row, index)
        }
        else
        {
            __doPostBack("ReturnedIndexes", returnGrid);
        }
    }

    function HighlightRow(row, index) {
        if (mousedown == true) {
            if (row.className == 'gridHighlightedRow') {
                row.className = 'gridNormalRow';
                returnGrid += (index + ",");
            }
            else {
                row.className = 'gridHighlightedRow';
                returnGrid += (index + ",");
            }
        }
    }
</script>

Finally, when the page loads with the "ReturnIndexes" event target I set the row color based on what the row color currently is.

// C#

// Page load event
protected void Page_Load(object sender, EventArgs e)
{
    // Avoids calling this code if the call is a postback
    if (!IsPostBack)
    {
        // Some Code Here
    }
    else if(Request.Params.Get("__EVENTTARGET").ToString() == "ReturnedIndexes")
    {
        // Returns highlighted results
        String ReturnIndexes = Request.Params.Get("__EVENTARGUMENT").ToString();

        txtRowIndexes.Text = ReturnIndexes;

        int[] GridIndex = RowHighlightChanged();

        for (int i = 0; i < GridIndex.Length; i++)
        {
            if (GridView1.Rows[GridIndex[i]].CssClass == "gridHighlightedRow")
            {
                GridView1.Rows[GridIndex[i]].CssClass = "gridNormalRow";
            }
            else GridView1.Rows[GridIndex[i]].CssClass = "gridHighlightedRow";
        }
    }
}

Finally to update the "highlighted" rows I just look for the CssClass "gridHighlightedRow".

// C#

// buttonUpdateSelected Click event: Updates all items currently selected in the grid view
protected void buttonUpdateSelected_Click(object sender, EventArgs e)
{
    foreach (GridViewRow row in GridView1.Rows)
    {
        if (row.CssClass == "gridHighlightedRow")
        {
            // Update Rows
        }
    }
}

Works pretty well I think :).

Thanks for the help Thomas, it got me started on the right track!

Answer 2

Use HiddenField for storing ids of highlighted rows/records. When HighlightRow is called, just add selected id to HiddenField. After postback you can read its value in codebehind. Or you can use attributes on rows and store simple boolean for those which are selected. There are many options how to solve this.