Selecting row server side ... get null client side

[Corentin]

Hi,

I've see an issue in my grid since I've made the last update with the telerik control panel. I don't know if it is due to the update or a change in my code. 
I have this grid :

<telerik:RadGrid ID="TrainingPlanRadGrid" runat="server" Width="100%"
   AutoGenerateColumns="false" AllowPaging="true" PageSize="13"
   ShowHeader="true" ShowFooter="false" ShowGroupPanel="false"
   ShowStatusBar="false"
   OnNeedDataSource="TrainingPlanRadGrid_NeedDataSource"
   OnItemDataBound="TrainingPlanRadGrid_ItemDataBound"
   AllowMultiRowSelection="true" AllowAutomaticInserts="false"
   AllowAutomaticDeletes="false"
   AllowAutomaticUpdates="false" AllowSorting="true"
   AllowFilteringByColumn="false"
   BorderStyle="None" Style="overflow: auto;"
   HeaderStyle-Font-Bold="true">
      <MasterTableView TableLayout="Fixed" Width="100%" ClientDataKeyNames="ID">
         <Columns>
            <telerik:GridTemplateColumn UniqueName="CheckBoxTemplateColumn" Display="true">
               <ItemTemplate>
                  <asp:CheckBox ID="CheckBox1" runat="server"
                     OnCheckedChanged="ToggleRowSelection"
                     AutoPostBack="True" />
               </ItemTemplate>
               <HeaderTemplate>
                  <asp:CheckBox ID="headerChkbox" runat="server"
                     OnCheckedChanged="ToggleSelectedStatePage" AutoPostBack="True" />
               </HeaderTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn UniqueName="RequestId" HeaderText=""
               DataField="ID" Visible="false" />
            <telerik:GridDateTimeColumn UniqueName="RequestDate" HeaderText="RequestDate"
               DataField="REQUEST_DATE" HeaderStyle-Wrap="false" HeaderStyle-Width="12%"
               HeaderStyle-HorizontalAlign="Right" ItemStyle-Width="12%"
               ItemStyle-HorizontalAlign="Right" />
            <telerik:GridBoundColumn UniqueName="RequestUser" DataField="USER_NAME"
               HeaderText="RequestUser" HeaderStyle-Wrap="false" HeaderStyle-Width="15%"
               ItemStyle-Width="15%" />
            <telerik:GridBoundColumn UniqueName="RequestUserOrg" DataField="ORG_LABEL"
               HeaderText="RequestUserOrg" HeaderStyle-Wrap="false" HeaderStyle-Width="15%"
               ItemStyle-Width="15%" />
            <telerik:GridBoundColumn UniqueName="RequestAdmin" DataField="ADMIN_NAME"
               HeaderText="RequestAdmin" HeaderStyle-Wrap="false" HeaderStyle-Width="15%"
               ItemStyle-Width="15%" />
            <telerik:GridBoundColumn UniqueName="RequestCourse" DataField="COURSE_NAME"
               HeaderText="RequestCourse" HeaderStyle-Wrap="false" HeaderStyle-Width="25%"
               ItemStyle-Width="25%" />
            <telerik:GridTemplateColumn UniqueName="RequestStatus" HeaderText="RequestStatus"
               HeaderStyle-Wrap="false" HeaderStyle-Width="12%" ItemStyle-Width="12%"
               ItemStyle-Wrap="false">
               <ItemTemplate>
                  <%# GetRequestStatus(Eval("REQUEST_STATUS").ToString())%>
               </ItemTemplate>
            </telerik:GridTemplateColumn>
         </Columns>
         <PagerStyle AlwaysVisible="false" Mode="NumericPages" />
      </MasterTableView>
      <HeaderStyle Font-Bold="true" />
      <ClientSettings Selecting-AllowRowSelect="true">
         <ClientEvents OnRowDblClick="editTrainingPlan"  />
      </ClientSettings>
</telerik:RadGrid>

This is the function selecting programmatically the row (on checkbox click) :

protected void ToggleRowSelection(object sender, EventArgs e)
        {
            GridItem item = ((sender as CheckBox).NamingContainer as GridItem);
            item.Selected = (sender as CheckBox).Checked;
            ...
        }

There is no exception thrown during the C# method.
But now, when I call this in js :

var grid = $find("TrainingPlanRadGrid");
var gridSelectedItems = grid.get_selectedItems();

I get an array with one "null" entry for each item I have selected in my C# code. And if I select a row by clicking on I get an entry containing a [Telerik.Web.UI.GridDataItem].

I can't use the auto-generated select checkbox column because I have extra features to add but I need to access in js and in C# to selected columns.

Do you see where I am doing something wrong ?

[Eyup]

Hello Corentin,

To achieve this requirement, you will need to generate the client-side objects of the rows by calling the get_dataItems() method:

function buttonClick(sender, args) {
    var grid = $find('<%= TrainingPlanRadGrid.ClientID %>');
    grid.get_masterTableView().get_dataItems();
    var gridSelectedItems = grid.get_selectedItems();
}

That should resolve the problem. Please give it a try and let me know if it works for you.

Regards,
Eyup
Telerik