Enable button if any GridClientSelectColumn is checked in a RadGrid

2 posts, 0 answers
  1. Ingemar
    Ingemar avatar
    17 posts
    Member since:
    Apr 2012

    Posted 03 Oct Link to this post

    I have a RadGrid and a button.

    In the RadGrid, one column is a GridClientSelectColumn.

    I have tried to have a javascript function to enable/disable the button depending on whether one or more rows are selected.

    It will however fail to find the button, because $find will return null. Why?

    aspx:

    <telerik:RadGrid ID="grdActivitiesToCopy" Skin="Metro" AutoGenerateColumns="False"
            AllowMultiRowSelection="True" runat="server">
            <MasterTableView DataKeyNames="id" ClientDataKeyNames="id">
                    <Columns>
                            <telerik:GridClientSelectColumn UniqueName="DetailCheckColumn" />
                    </Columns>
            </MasterTableView>
            <ClientSettings>
                    <Selecting AllowRowSelect="true" />
                    <ClientEvents OnGridCreated="on_grid_created()"></ClientEvents>
            </ClientSettings
    </telerik:RadGrid>
    <div style="padding-top: 14px">
            <telerik:RadButton Text="Copy" ID="btnCopy" runat="server"/>
    </div>

    javascript:

    var btnCopyId = "<%=btnCopy.ClientID %>";
     
    function on_grid_created()
    {
      $(":checkbox").on('change', function ()
      {
        update();
      });
     
      update();
     
      function update()
      {
        var enabled = $(":checkbox:checked").length > 0;
     
        $find(btnCopyId).set_enabled(enabled);
      }
    }

     

     

     

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 05 Oct Link to this post

    Hello,

    Please do not use parenthesis where the handler for the GridCreated event is defined. Also, the Button may not be fully rendered when the Grid is created and this would cause an error.

    Try to modify the code as illustrated below and let me know how it works for you.

    ClientSettings:

    <ClientSettings>
        <Selecting AllowRowSelect="true" />
        <ClientEvents OnGridCreated="on_grid_created"></ClientEvents>
    </ClientSettings>


    JavaScript:


    var btnCopyId = "<%=btnCopy.ClientID %>";
     
    $(document).ready(function () {
        $find(btnCopyId).set_enabled(false);
     
        update();
    });
     
    function on_grid_created() {
        $(":checkbox").on('change', update);
    }
     
    function update() {
        var enabled = $(":checkbox:checked").length > 0;
     
        $find(btnCopyId).set_enabled(enabled);
    }



    Regards,
    Viktor Tachev
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top