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

[Ryan]

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 !

[Konstantin Dikov]

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

[Ryan]

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.

[Viktor Tachev]

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