Check if gridview row is selected or not with javascript

2k Views Asked by At

I have the following situation: I have an asp gridview that I have implemented row selection with javascript (I can select a row by clicking on every cell of it). The fired event is onclick through javascript and I am encountering a problem. When I try to edit te content of that row, through row edit command, at the moment I click on the textbox to focus on it, the row click event is fired again and I lose focus of the textbox. This way I have the desired effect that I can select a gridview by clicking everywhere, but I cannot edit the contents of the row.

Enable full row select on code behind:

protected void gvMyQuizz_RowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.ToolTip = "Click to show the questions of the quiz";
            e.Row.Attributes["onclick"] = this.Page.ClientScript.GetPostBackClientHyperlink(this.gvMyQuizz,"Select$"+e.Row.RowIndex);
        }
    }

The most helpful thing would be if I can create a javascript function that can check if the row that i being clicked is already selected, so I can return false, else select$row, but I haven't found much help online. I need to finish this through javascript. Any help would be appreciated.

UPDATE

I have changed the attribute that is added to the row on the onclick event:

protected void gvMyQuizz_RowCreated(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                e.Row.ToolTip = "Click to show the questions of the quiz";
                e.Row.Attributes["onclick"] = this.Page.ClientScript.GetPostBackClientHyperlink(this.gvMyQuizz, "selectRow(" + e.Row.RowIndex+");");
            }
        }

Javascript:

function selectRow(index) {

            var $selected = $("#gvMyQuizz .alt");
            if ($selected.length == 0) {
                console.log('nothing');
            } else if ($selected.length == 1) {
                console.log('one');
            } else {
                console.log('problem');
            }
        }

A function that I get when the row is clicked, but this is fired only once, I don't know why:

$("[id*=gvMyQuizz] td").click(function () {
            console.log('clicked');
        });

Is someone can figure out what is missing can help solve the issue. If the function that I fire when clicked is repeated, I can check there whether it is selected or not through this post.

1

There are 1 best solutions below

4
On

Edited

If you want to handle row selection with your onclick event, the most straightforward option to check whether the row you have clicked is currently selected is to keep a hidden field running at the server end. This field would contain the index of the currently selected row. You would still have to trigger a post back to the server to update this value in your row selection logic with something like

<input id="inp_row_index" type="hidden" runat="server" />

function select(rowIndex) {
    document.getElementById('<%=inp_row_index.ClientID %>').value = rowIndex;
    <%=Page.GetPostBackEventReference(inp_row_index) %>
}

This is basically a summary of the approach described here: http://www.codeproject.com/Tips/79822/How-to-handle-a-selected-row-in-GridView-on-the-cl