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!