Asp.net Gridview: Highlighting Rows On Mouse Over Then Updating The Highlighted Rows

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 GridVie

Solution 1:

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.

Solution 2:

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 functionalityprotectedvoidGridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    // Excludes row header and pager rowsif (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

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

    document.onselectstart = newFunction ("return false")

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

    functionHighlightRow(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 eventprotectedvoidPage_Load(object sender, EventArgs e)
{
    // Avoids calling this code if the call is a postbackif (!IsPostBack)
    {
        // Some Code Here
    }
    elseif(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 viewprotectedvoidbuttonUpdateSelected_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!