Enable button if any GridClientSelectColumn is checked in a RadGrid

[Anders]

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

 

 

 

[Viktor Tachev]

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

[Dehanys]

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.

[Eyup]

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

[Dehanys]

I got it.

Thank you Eyup.