Wait cursor on click of auto select button on GridView-CodePudding

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!

CodePudding user response：

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>