Get the rowIndex of an ASP.Net Gridview using jQuery - asp.net

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.

Answer 1

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>

Answer 2

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.

Answer 3

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") );
})
}
);