JQuery Mouseover Mouseout and click on a Gridview

sujeshva
sujeshva used Ask the Experts™
on
Hello All,

This should be fairly simple for the JQuery experts. here is the problem. I have two Gridviews on two different pages.

1. Both gridview should allow a mouseover and mouseout affect when the user moves their mouse over the rows and assign CSS Classes already defined for mouseover and mouseout affect.
2. One grid allows selecting only one row. Which means, when the user selects another row, the previous row should be deselected.
3. The other grid should allow multiple selects when clicked.
4. The single select should return the data in the first column when selected.
5. The multi select should return each row's first column in a comma seperated value that has been selected.

There you go, how do you do this using JQuery?? I would like to store the selected value in a hidden field control and then use it in my code behind.

Thanks,
Suj
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Ultimately your grid will convert into table on client site. So using its client id  (run time generated),  program jquery code aganst that table's rows (TRs) and coluns(TDs) and it should do.

Author

Commented:
Well,

Here is the solution I have devised.

1. In the aspx page, add the following code in the head section of the page. Note the Cancel click can be set on the click event of an image on the grid or something that should not highlight the row, else every click will highlight the row. Also, a Pager class is added so that the pager is not affected by the mouseover and mouseout events. This whole code is listed in the first attached code.

2. In the code behind, add an id attribute to the first visible column of the grid and on the Row_Databound event, add the value that would be returned on click as the id value of the column, where DRV is teh DataRowView of e.Row.DataItem.


GridRow.Cells(FirstVisibleColumn).Attributes.Add("id", DRV("ID_No"))


Thats it, you are all set.

Commented:
The code was not attached. Here is the code.

var PrevRow;
var NewRow;
var RowClickedValue = '';
var CurrentRowClicked = '';
var GridPlainHover = '#add8e6';
var GridPlainClicked = '#ffff99';
var GridPlainNeutral = 'white';
var sSkipHeaderFooter = '';
var CancelClick = false;
var stblGridView1= '';
var hdnClickedValues = '';

 $(document).ready(function() {
            var bEnableMultiRowClick = 1;   //Set the value to state whether multiple rows can be clicked 1=true, 0=single row click only
            var bHasHeader = 1;             //Set the value to indicate if the Grid contains a Header 1=Yes, 0=No
            var bHasFooter = 1;             //Set the value to indicate if the Grid contains a Footer 1=Yes, 0=No
            stblGridView1= "<%= GridView1.ClientID %>";
            hdnClickedValues = "<%= hdnClickedValues.ClientID %>";
            fn_SetHoverRules(stblGridView1, bEnableMultiRowClick, bHasHeader, bHasFooter);
        });

function fn_SetHoverRules(sGrid, bMultiClick, bIncludeHeader, bIncludeFooter) {
    if (bIncludeHeader) {
        sSkipHeaderFooter = ":first,";
    }
    if (bIncludeFooter) {
        sSkipHeaderFooter = sSkipHeaderFooter + ":last";
    }
    if (bMultiClick) {
        if (sSkipHeaderFooter.length > 0) {
            $('table#' + sGrid+ ' tr').not(sSkipHeaderFooter).click(function() { fn_RowClickMultiple($(this)) });
        }
        else
            $('table#' + sGrid+ ' tr').click(function() { fn_RowClickMultiple($(this)) });
    }
    else {
        if (sSkipHeaderFooter.length > 0) {
            $('table#' + sGrid+ ' tr').not(sSkipHeaderFooter).click(function() { fn_RowClickSingle($(this)) });
        }
        else
            $('table#' + sGrid+ ' tr').click(function() { fn_RowClickSingle($(this)) });
    }

    if (sSkipHeaderFooter.length > 0) {
        $('table#' + sGrid+ ' tr').not(sSkipHeaderFooter).mouseover(function() { fn_mouseoverAll($(this)); });
        $('table#' + sGrid+ ' tr').not(sSkipHeaderFooter).mouseout(function() { fn_mouseoutAll($(this)); });
    }
    else {
        $('table#' + sGrid+ ' tr').mouseover(function() { fn_mouseoverAll($(this)); });
        $('table#' + sGrid+ ' tr').mouseout(function() { fn_mouseoutAll($(this)); });
    }

}


function fn_mouseoutAll(item) {
    if (item[0].className != 'pager') {
        item[0].style.cursor = 'hand';
        if (item[0].className != 'GridPlainClicked')
            item[0].style.backgroundColor = GridPlainNeutral;
    }

}

function fn_mouseoverAll(item) {
    if (item[0].className != 'pager') {
        item[0].style.cursor = 'hand';
        if (item[0].className != 'GridPlainClicked')
            item[0].style.backgroundColor = GridPlainHover;
    }

}

function fn_RowClickMultiple(item) {
    if (!CancelClick) {
        if (item[0].className != 'pager') {
            CurrentRowClicked = item[0].cells[0].getAttribute('id');
            if (item[0].className == 'GridPlainClicked') {
                fn_RemoveKeys(item[0].cells[0].getAttribute('id'));
                item[0].className = '';
            }
            else {

                item[0].className = 'GridPlainClicked';
                item[0].style.backgroundColor = GridPlainClicked;
                fn_AddKeys(item[0].cells[0].getAttribute('id'));

            }

        }
    }
    CancelClick = false;


} //End fn_RowClickMultiple

function fn_RowClickSingle(item) {
    if (!CancelClick) {
        if (item[0].className != 'pager') {
            RowClickedValue = item[0].cells[0].getAttribute('id');
            PrevRow = NewRow;
            NewRow = item[0];
            if (PrevRow != undefined) {
                PrevRow.className = '';
                PrevRow.style.backgroundColor = GridPlainNeutral;
            }
            NewRow.className = 'GridPlainClicked';
            NewRow.style.backgroundColor = GridPlainClicked;
            CurrentRowClicked = RowClickedValue;

        }
    }
    CancelClick = false;
} //End fn_RowClickSingle

function fn_AddKeys(KeyValue) {
    RowClickedValue = RowClickedValue + KeyValue + ';'
}

function fn_RemoveKeys(KeyValue) {
    var indexOf = 0;
    indexOf = RowClickedValue.indexOf(KeyValue);

    if (indexOf >= 0)
        RowClickedValue = RowClickedValue.replace(KeyValue + ';', '');
}

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial