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

Enable button if any GridClientSelectColumn is checked in a RadGrid

4 Answers 201 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Anders
Top achievements
Rank 1
Anders asked on 03 Oct 2016, 07:59 AM

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);
  }
}

 

 

 

4 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 05 Oct 2016, 01:21 PM
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.
0
Dehanys
Top achievements
Rank 2
answered on 07 Feb 2019, 01:34 PM

Hello Viktor.

 

I tried this solution and it is not working for me. Is it probably because the button is inside the grid that I cannot find it from the JS function?

Here is my  grid:

 

<telerik:RadGrid ID="grdReports" runat="server" AllowMultiRowSelection="true" AllowPaging="False" AllowSorting="true" CssClass="centerMeAndText90" GroupingEnabled="True" GroupingSettings-ShowUnGroupButton="True" RenderMode="Lightweight" ShowGroupPanel="True" >
            <ClientSettings AllowDragToGroup="True" Selecting-AllowRowSelect="true" />
            <GroupingSettings ShowUnGroupButton="True" />
            <HeaderStyle HorizontalAlign="Center" />
            <MasterTableView AutoGenerateColumns="false" AllowSorting="true" CommandItemDisplay="Top">
                <CommandItemTemplate>
                    <div style="padding: 5px 5px;">
                        <div runat="server" style="float: left">
                            <telerik:RadButton ID="btnPrintSelected" runat="server" Text="View/Print Selected" CommandName="Print" ButtonType="LinkButton" />
                        </div>
                    </div>
                </CommandItemTemplate>
                <Columns>
                    <telerik:GridClientSelectColumn UniqueName="clmnSelect" />
                    <telerik:GridBoundColumn UniqueName="ID" DataField="ID" HeaderText="ID" Display="false" />
                    <telerik:GridHyperLinkColumn UniqueName="lnkbtnViewPrint" Text="View/Print" />
                    <telerik:GridBoundColumn UniqueName="ReportType" DataField="rptCategory" HeaderText="Report" />
                    <telerik:GridBoundColumn UniqueName="Phase" DataField="Phase" HeaderText="Phase" />
                    <telerik:GridDateTimeColumn UniqueName="Date" DataField="rDate" DataFormatString="{0:d}" HeaderText="Date" />
                    <telerik:GridBoundColumn UniqueName="FTRID" DataField="FTRID" HeaderText="FTR" />
                    <telerik:GridBoundColumn UniqueName="FTOID" DataField="FTOID" HeaderText="FTO" />
                    <telerik:GridBoundColumn UniqueName="FTAID" DataField="FTAID" HeaderText="FTA" />
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>

Thanks.

0
Eyup
Telerik team
answered on 12 Feb 2019, 05:09 AM
Hello Dehanys,

You can achieve this requirement using the $telerik.findControl method:
https://www.telerik.com/support/kb/aspnet-ajax/details/access-telerik-controls-on-client-side

You can use the OnRowSelected event handler to capture this moment:
https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/client-side-programming/events/onrowselected

The first argument of the method is the container to search through and you can pass it to be args.get_tableView().get_element().

I hope this will prove helpful.

Regards,
Eyup
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Dehanys
Top achievements
Rank 2
answered on 12 Feb 2019, 01:10 PM

I got it.

Thank you Eyup.

Tags
Grid
Asked by
Anders
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Dehanys
Top achievements
Rank 2
Eyup
Telerik team
Share this question
or