GridClientSelectColumn - determine whenever any (or all) rows are selected - client-side ?

4 posts, 0 answers
  1. Ryan
    Ryan avatar
    13 posts
    Member since:
    Jun 2013

    Posted 21 Oct 2016 Link to this post

    Hello,

    The RadGrid events for the  GridClientSelectColumn , eludes me .  I think we can make the assumption it contains a check box.  But how do we inspect client events/state on this control .

     

    [in client/javascript]

    I simply want to know , when a user clicks on one (or more) check boxes in the GridClientSelectColumn , to determine if they checked or unchecked the row ?

    The purpose : I am trying to hide a RadButton , if none of my ( GridClientSelectColumn ) rows are selected.  However, if even one is selected, I want to show my RadButton.  I also need to take into account if the user clicks on the column header checkbox ( [de]selecting all ) .

     

    Thank you for your guidance !

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1875 posts

    Posted 26 Oct 2016 Link to this post

    Hello Ryan,

    You can handle the OnRowSelected and OnRowDeselected events of the grid to toggle the visibility of the button:
    <telerik:RadCodeBlock runat="server">
        <script>
            function rowSelected(sender, args) {
                toggleButton(sender);
            }
     
            function rowDeselected(sender, args) {
                toggleButton(sender);
            }
     
            function toggleButton(sender) {
                var button = $find("<%=RadButton1.ClientID%>");
            if (sender.get_selectedItems().length == 0) {
                button.set_visible(true);
            }
            else {
                button.set_visible(false);
            }
        }
        </script>
     
    </telerik:RadCodeBlock>
    <telerik:RadButton runat="server" ID="RadButton1" Text="Click me"></telerik:RadButton>
    <telerik:RadGrid runat="server" OnNeedDataSource="RadGrid1_NeedDataSource">
        <MasterTableView>
            <Columns>
                <telerik:GridClientSelectColumn></telerik:GridClientSelectColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings>
            <Selecting AllowRowSelect="true" />
            <ClientEvents OnRowSelected="rowSelected" OnRowDeselected="rowDeselected" />
        </ClientSettings>
    </telerik:RadGrid>

    Please give this a try and let me know if the result meets your requirements.


    Best Regards,
    Konstantin Dikov
    Telerik by Progress
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
  3. Ryan
    Ryan avatar
    13 posts
    Member since:
    Jun 2013

    Posted 19 Dec 2016 in reply to Konstantin Dikov Link to this post

    Yes this seems to work out alright.  I did want to say I misspoke and was using an ordinary ASP.NET button, which the javascript you've supplied will NOT work.  I have tested on a RadButton and it works great, thanks.
  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1536 posts

    Posted 22 Dec 2016 Link to this post

    Hello Ryan,

    If you are using standard ASP Button control you would need the $get() method to get reference of the HTML element rendered for the Button. Then you can modify the display property for the input element to change its visibility.

    The modified toggleButton method will look like below:


    function toggleButton(sender) {
        var button = $get("<%=Button1.ClientID%>");
     
        if (sender.get_selectedItems().length == 0) {
            button.style.display = "inline-block";
        }
        else {
            button.style.display = "none";
        }
    }


    Regards,
    Viktor Tachev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top