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

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

2 Answers 255 Views
Grid
This is a migrated thread and some comments may be shown as answers.
C
Top achievements
Rank 1
C asked on 19 Nov 2014, 10:40 AM
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?

2 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 24 Nov 2014, 09:23 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
C
Top achievements
Rank 1
answered on 24 Nov 2014, 10:45 AM
Yes. I was using the wrong unique name for the idname of the select column. Thanks.
Tags
Grid
Asked by
C
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
C
Top achievements
Rank 1
Share this question
or