OnRowSelected client event, only for "select all" checkbox?

[C]

My grid has a <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" HeaderStyle-Width="30px" /> column to start things out. I am then trying to follow this example http://www.telerik.com/help/aspnet-ajax/grid-persist-selected-rows-client-sorting-paging-grouping-filtering.html in order to keep track of what rows I've selected.

However, I find that the javascript event for selecting a row only fires when I press the checkbox in the header ("select all"). And it fires once for every visible row, of course. Why isn't it firing when I click on the checkboxes next to an individual row?

[Konstantin Dikov]

Hello,

It is possible to observe such behavior if there is a JavaScript error present on the page, which will prevent the proper work of the controls. If you are setting an UniqueName of your GridClientSelectColumn to ClientSelectColumn you should also set that name to the JavaScript code in the following line:

var selectColumn = masterTable.getColumnByUniqueName("ClientSelectColumn");

Following is a slightly modified version of the example in the help article:

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script type="text/javascript">
        var selected = {};
        function RadGrid1_RowSelected(sender, args) {
            console.log("row selected");
            var mailID = args.getDataKeyValue("MailID");
            if (!selected[mailID]) {
                selected[mailID] = true;
            }
        }
        function RadGrid1_RowDeselected(sender, args) {
            var mailID = args.getDataKeyValue("MailID");
            if (selected[mailID]) {
                selected[mailID] = null;
            }
        }
        function RadGrid1_RowCreated(sender, args) {
            var mailID = args.getDataKeyValue("MailID");
            if (selected[mailID]) {
                args.get_gridDataItem().set_selected(true);
            }
        }
        function GridCreated(sender, eventArgs) {
            var masterTable = sender.get_masterTableView();
            var selectColumn = masterTable.getColumnByUniqueName("ClientSelectColumn");
            var headerCheckBox = $(selectColumn.get_element()).find("[type=checkbox]")[0];

            if (headerCheckBox) {
                headerCheckBox.checked = masterTable.get_selectedItems().length ==
                    masterTable.get_dataItems().length;
            }
        }
    </script>
</telerik:RadScriptBlock>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadGrid ID="RadGrid1" AllowMultiRowSelection="true" DataSourceID="SqlDataSource1"
    AllowPaging="true" AllowSorting="true" runat="server" AllowFilteringByColumn="true"
    ShowGroupPanel="true">
    <MasterTableView ClientDataKeyNames="MailID">
        <Columns>
            <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" />
        </Columns>
    </MasterTableView>
    <ClientSettings AllowDragToGroup="true">
        <Selecting AllowRowSelect="true" />
        <ClientEvents OnRowCreated="RadGrid1_RowCreated" OnRowSelected="RadGrid1_RowSelected"
            OnRowDeselected="RadGrid1_RowDeselected" OnGridCreated="GridCreated" />
    </ClientSettings>
</telerik:RadGrid>
<asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
    ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Mails" runat="server"></asp:SqlDataSource>

Hope this helps.


Regards,
Konstantin Dikov
Telerik

 

 

[C]

Yes. I was using the wrong unique name for the idname of the select column. Thanks.