This is a migrated thread and some comments may be shown as answers.

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

3 Answers 568 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 21 Oct 2016, 09:00 PM

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 !

3 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 26 Oct 2016, 01:43 PM
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.
0
Ryan
Top achievements
Rank 1
answered on 19 Dec 2016, 04:57 PM
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.
0
Viktor Tachev
Telerik team
answered on 22 Dec 2016, 10:31 AM
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.
Tags
Grid
Asked by
Ryan
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Ryan
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or