Get the rowIndex of an ASP.Net Gridview using jQuery

Question

Hello, is it possible to get the current rowindex of a gridview using jQuery?

Bit of background:

I delete rows from a gridview using a server side link button in a template field like so:

<asp:LinkButton CausesValidation="false" CommandName="Delete" ID="lnkDelete"
              OnClientClick="javascript: return(confirm('Delete item?'));" runat="server" Text="Delete" />

Which prompts the user to confirm or cancel the deletion. If the user clicks OK, it then calls this method on the codebehind:

protected void GridViewRowDeleting(object sender, GridViewDeleteEventArgs e)
        {
            this.gridview_uploads.EditIndex = -1;

            if (!this.UploadsList.Count.Equals(0))
            {
                DocumentUpload upload = this.UploadsList[e.RowIndex];
                if (upload != null)
                {
                    this.UploadsList.RemoveAt(e.RowIndex);
                    this.BindInputGridview();
                }
            }
        }

But the javascript confirm (Delete item?) looks a bit naff.

I'd much prefer to use something like JQuery's dialog, but if I do, I have no idea how to grab the rowindex using this approach (I can figure out how to call the server code).

Any ideas?

Sorry if this has already been asked - I did a trawl of SO and Googled it but couldn't find anything useful.

Tim B James · Accepted Answer · 2010-09-29 12:09:54Z

3

If the LinkButton is the only LinkButton/Anchor within the GridView, then you should be able to do something like

$('#GridView1 a').click(function(){
     return confirm("Delete Item");
});

edit: change the #GridView1 to the .net ID of the control.

vb

<%=(me.GridView1.ClientID)%>

c#

<%=(this.GridView1.ClientID)%>

Reply to adrianos

If you look into the jQuery UI Dialog, this has a nice Modal Confirmation box.

In a similar way to the above code, but replacing the confirm function, you could have:

<script type="text/javascript">
 $().ready(function(){
    $( "#dialog" ).dialog( "destroy" );
    $( "#dialog-confirm" ).dialog({
        resizable: false,
        height:140,
        modal: true,
                    autoOpen: false;
        buttons: {
            "Delete item": function() {
                $( this ).dialog( "close" );
                // Put in your return true/false here to activate button
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        }
    });
    $('#GridView1 a').click(function(){
        $('#dialog-confirm').dialog("open");
        return false;
    });

    )};
</script>

edited Sep 29, 2010 at 12:09

answered Sep 29, 2010 at 10:06

Tim B James

20.4k4 gold badges77 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

adrianos Over a year ago

I don't want to use Javascript's confirm method and would prefer to use a jQuery dialog box with OK / Cancel buttons. Then I intend to wire up the OK button to fire a method on the server (which is why I need to get the rowindex) - thanks though.

adrianos Over a year ago

Hi Tim, it's a nice idea but as soon as I click the delete button, it executes the client side and server side code simultaneously - presumably because I have taken out the OnClientClick handler on the link button.

Tim B James Over a year ago

@adrianos, if you return false after opening the dialog it will stop the button from submitting. But you will need to come up with a way of then submitting the clicked button using the javascript. deviantpoint.com/post/2009/03/12/… is a link to a page which has a solution for doing it with a single button. Maybe you could adapt this to work within your gridview?

adrianos Over a year ago

I've just worked on a similar solution - but using a hidden field and __doPostBack instead. I'd like to vote your answer as 'the answer' but it's not how I've done and I don't want to mislead anyone.

Tim B James Over a year ago

Post up your answer as the answer.

adrianos · Accepted Answer · 2010-09-29 13:45:07Z

I figured out how to do this using the __doPostBack method (in Javascript)

>>> In the aspx:

Hidden field:

<asp:HiddenField ID="hidden_gridRowIndex" runat="server" />

In a script tag:

    $(document).ready
    (
    function () {
      $("#div_dialog_confirmUploadDelete").dialog({
        autoOpen: false
        , title: "Delete upload"
        , buttons: {
            "OK": function () {
                            __doPostBack('GridViewRowDelete', $("#<%# hidden_gridRowIndex.ClientID %>").val());
                            $(this).dialog('close');
                        }
             , "Cancel": function () { $(this).dialog('close'); }
                    }
                    });

});


    function deleteConfirm(index) {
                        $("#<%# hidden_gridRowIndex.ClientID %>").val(index)
                        $("#div_dialog_confirmUploadDelete").dialog('open');
                    }

On the gridview:

<asp:TemplateField>
  <ItemTemplate>
    <a href="javascript: void(0);" onclick='javascript:return deleteConfirm(<%# Container.DataItemIndex %>);'>Delete</a>
  </ItemTemplate>
</asp:TemplateField>

>>> In the codebehind

On Page_Load:

if (Request["__EVENTTARGET"] != null)
            {
                switch (Request["__EVENTTARGET"])
                {
                    case "GridViewRowDelete":
                        if (Request["__EVENTARGUMENT"] != null)
                        {
                            int index = -1;
                            if (int.TryParse(Request["__EVENTARGUMENT"], out index))
                            {
                                this.GridViewRowDelete(index);
                            }
                        }
                        break;
                }
            }

New method called by the page_load:

protected void GridViewRowDelete(int rowIndex)
        {
            this.gridview_uploads.EditIndex = -1;

            if (!this.UploadsList.Count.Equals(0))
            {
                DocumentUpload upload = this.UploadsList[rowIndex];
                if (upload != null)
                {
                    this.UploadsList.RemoveAt(rowIndex);
                    this.BindInputGridview();
                }
            }
        }

Thinking about it, I could have probably made the asp:HiddenField a regular html hidden input control as the server side never needs to see it.

It feels a bit ropey so feel free to throw stones at me / suggest improvements.

Arjun Shetty · Accepted Answer · 2011-07-11 11:02:01Z

2

Add a custom attribute to your grid and set value on binding event

   <asp:GridView ID="GridView1" runat="server">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>                
                    <a href="#" test='<%# Container.DataItemIndex %>'>content</a>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

Using .net clientId get the custom attribute value.

 $(document).ready(function () {
 $('#<%=(this.GridView1.ClientID)%> a').click(function () {
    return alert("Last Name : " + this.getAttribute("test") );
  })
  }
     );

answered Jul 11, 2011 at 11:02

Arjun Shetty

1,5851 gold badge15 silver badges36 bronze badges

Collectives™ on Stack Overflow

Get the rowIndex of an ASP.Net Gridview using jQuery

3 Answers 3

5 Comments

>>> In the aspx:

>>> In the codebehind

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

>>> In the aspx:

>>> In the codebehind

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related