locked
Disable button while datagrid was clicked to sort RRS feed

  • Question

  • User-1261576618 posted

    For example, if i declare a datagrid by the code below,

    <asp:datagrid id="example" runat="server" AllowSorting="True">
       <ASP:BOUNDCOLUMN HeaderText="exampleCol" DataField="exampleCol" SortExpression="exampleCol">
       </ASP:BOUNDCOLUMN>
    </asp:datagrid>

    which set AllowSorting="true" for the datagrid.

    And i have declared a button:

    <asp:button id="exampleBtn" Runat="server" Text="exampleBtn" Width="100%" onclick="exampleBtn_onclick"></asp:button>

    The desire effect for this page is to disable "exampleBtn" instantly while the datagrid is sorting (Or let's say after the user click to sort the grid and before the servlet postback).

    Are there any onClientClick event on the boundcolumn of the datagrid?

    Or are there any other way to achieve this effect? (Or javascript to do the work?)

    Thanks a lot !

    Monday, May 15, 2017 2:33 AM

Answers

  • User-1509636757 posted

    However, what i want is to temporarily disable the button (just after the sort command fires, to prevent bugs when clicking the button to update database),

    and enable again after the website postback.

    In that case, you can write code in jQuery, on click of the sort link, disable the button and in document.ready event enable it back. Here is a sample code:

    <asp:DataGrid runat="server" ID="GridView1" AutoGenerateColumns="false" AllowSorting="true" OnSortCommand="example_SortCommand">
        <Columns>
            <asp:BoundColumn DataField="RowNumber" HeaderText="Sample Row" SortExpression="RowNumber">
                <HeaderStyle CssClass="SortLink" />
            </asp:BoundColumn>
        </Columns>
    </asp:DataGrid>
    <asp:Button Text="Test" CssClass="ButtonClass" runat="server" />
    <script src="Scripts/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".SortLink a").click(function () {
                //-- on sort command click event
                $('.ButtonClass').prop('disabled', true);
            });
    
            //-- on page load (document.ready)
            $('.ButtonClass').prop('disabled', true);
        });
    </script>

    On each postback, document.ready event will also fire and will re-enable the button.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 15, 2017 7:54 AM

All replies

  • User-1509636757 posted

    Try OnSortCommand event to disable Button:

    <asp:DataGrid ID="example" runat="server" AllowSorting="True" OnSortCommand="example_SortCommand">
        <Columns>
            <asp:BoundColumn HeaderText="exampleCol" DataField="exampleCol" SortExpression="exampleCol"></asp:BoundColumn>
        </Columns>
    </asp:DataGrid>

    protected void example_SortCommand(object source, System.Web.UI.WebControls.DataGridSortCommandEventArgs e)
    {
        btnShow.Enabled = false;
    }

    Monday, May 15, 2017 6:16 AM
  • User-1261576618 posted

    Thanks for your reply.

    The above code will disable the button permanently after sort command fires.

    However, what i want is to temporarily disable the button (just after the sort command fires, to prevent bugs when clicking the button to update database),

    and enable again after the website postback.

    Monday, May 15, 2017 6:24 AM
  • User-1509636757 posted

    However, what i want is to temporarily disable the button (just after the sort command fires, to prevent bugs when clicking the button to update database),

    and enable again after the website postback.

    In that case, you can write code in jQuery, on click of the sort link, disable the button and in document.ready event enable it back. Here is a sample code:

    <asp:DataGrid runat="server" ID="GridView1" AutoGenerateColumns="false" AllowSorting="true" OnSortCommand="example_SortCommand">
        <Columns>
            <asp:BoundColumn DataField="RowNumber" HeaderText="Sample Row" SortExpression="RowNumber">
                <HeaderStyle CssClass="SortLink" />
            </asp:BoundColumn>
        </Columns>
    </asp:DataGrid>
    <asp:Button Text="Test" CssClass="ButtonClass" runat="server" />
    <script src="Scripts/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".SortLink a").click(function () {
                //-- on sort command click event
                $('.ButtonClass').prop('disabled', true);
            });
    
            //-- on page load (document.ready)
            $('.ButtonClass').prop('disabled', true);
        });
    </script>

    On each postback, document.ready event will also fire and will re-enable the button.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 15, 2017 7:54 AM
  • User-1261576618 posted

    Thanks for your answer,

    and i have solve my problem now :)

    Monday, May 15, 2017 8:11 AM