1

I have an asp:GridView control where the first column is where the user selects the row (so it displays an underlined "Select" on each row). The AutoGenerateSelectButton is set to "True". When the row is selected, the query behind it may take some time to return the data on the page, so I'd like to set the cursor to 'wait'. The problem is, on the client side, I'm not sure how I can trap which row was selected before the postback. With an autogenerate Select on a grid, the actual HTML on the page is an anchor tag with a javascript:postback assigned.

I can easily set a wait cursor for a control like an asp:Button by simply doing a

btnButton.Attributes.Add("onclick", "document.body.style.cursor = 'wait';")

in the C# code behind, but I'm not sure how to do something similar with a asp"GridView control when someone not just clicks on the grid but clicks the Select hyperlink.

Thanks!

General Grievance
  • 4,555
  • 31
  • 31
  • 45
Jim Beaumont
  • 67
  • 2
  • 7

1 Answers1

0

Set AutoGenerateSelectButton=false and use a button instead. This shall replace the select link column on your gridview, which should allow for your desired cursor functionality.

<asp:GridView ID="GridView1" runat="server" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:LinkButton Text="Select" runat="server" CommandName="Select" OnClientClick="$('body').addClass('waiting');"/>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

I placed the jquery directly into client side click, but it could also be used in a function. I found the javascript/css resources from another question on SO. Changing cursor to waiting in javascript/jquery

CSS:

<style>
        body.waiting * {
            cursor: progress;
        }
</style>
Rory
  • 159
  • 1
  • 8
  • I replaced the LinkButton with the Button so I could use the OnClientClick and the wait cursor. I also added the script and style but that doesn't seem to be doing anything. I'd love the wait cursor to cover the entire page, which at present it does not, but there doesn't seem to be a simple solution for that. – Jim Beaumont Dec 29 '21 at 18:21
  • I've updated the solution. This should show a progress cursor next to the mouse pointer. Is this your intent? – Rory Dec 29 '21 at 19:04
  • The wait cursor is what I am looking for. I presume with your solution which appears to be JQuery and not JavaScript (I'm not that familiar with JQuery), does one have to somehow remove the class to clear the cursor? – Jim Beaumont Dec 30 '21 at 20:57
  • Yes, you would need to use `$("body").css("cursor", "default");` to clear the cursor. Perhaps gridview_Rowupdated will do. Mine was resetting on its own, due to the page load I think. – Rory Dec 30 '21 at 21:15