Client side selection not highlighting

[Peter]

When I try to select a row, the row is not highlighted and I am not sure why.

Markup:

<telerik:RadGrid ID="dgRates" runat="server" AllowSorting="false" AutoGenerateColumns="False" Skin="Web20" PageSize="200" GridLines="None" Width="390px" AllowPaging="True" TabIndex="-1" EnableEmbeddedSkins="true" OnBiffExporting="RadGrid_BiffExporting">
              <PagerStyle Position="Bottom" Mode="NumericPages" PageButtonCount="10" AlwaysVisible="true" />
              <ClientSettings>
                <Scrolling UseStaticHeaders="True" AllowScroll="True" ScrollHeight="300px"></Scrolling>
                <Resizing ResizeGridOnColumnResize="True" ClipCellContentOnResize="False" />
                <Selecting AllowRowSelect="True" />
              </ClientSettings>
              <MasterTableView AllowMultiColumnSorting="False" EnableNoRecordsTemplate="False" GridLines="None" DataKeyNames="ID" TableLayout="Fixed" ShowHeader="false">
                <Columns>
                  <telerik:GridBoundColumn DataField="ID" HeaderText="" UniqueName="ID" Display="false">
                    <HeaderStyle Width="0px" />
                  </telerik:GridBoundColumn>
                  <telerik:GridBoundColumn DataField="CarType" HeaderText="" UniqueName="CarType" Display="false">
                    <HeaderStyle Width="0px" />
                  </telerik:GridBoundColumn>
                  <telerik:GridBoundColumn DataField="Rate" HeaderText="" UniqueName="Rate" Display="false">
                    <HeaderStyle Width="0px" />
                  </telerik:GridBoundColumn>
                  <telerik:GridBoundColumn DataField="CurrencyCode" HeaderText="" UniqueName="CurrencyCode" Display="false">
                    <HeaderStyle Width="0px" />
                  </telerik:GridBoundColumn>
                  <telerik:GridBoundColumn DataField="Period" HeaderText="" UniqueName="Period" Display="false">
                    <HeaderStyle Width="0px" />
                  </telerik:GridBoundColumn>
                  <telerik:GridBoundColumn DataField="Total" HeaderText="" UniqueName="Total" Display="false">
                    <HeaderStyle Width="0px" />
                  </telerik:GridBoundColumn>
                  <telerik:GridCheckboxColumn DataField="HasInclusions" HeaderText="" UniqueName="HasInclusions" Display="false">
                    <HeaderStyle Width="0px" />
                  </telerik:GridCheckboxColumn>
                </Columns>
                <DetailItemTemplate>
                    <asp:Table ID="RateTable" runat="server" BorderWidth="0" Width="100%">
                        <asp:TableRow>
                            <asp:TableCell HorizontalAlign="Center" Width="70%" BorderColor="Transparent">
                               <asp:Label ID="lblCarType" runat="server"></asp:Label></asp:TableCell>
                           <asp:TableCell RowSpan="4" ID="tcbtnBook" HorizontalAlign="Center" VerticalAlign="Top" BorderColor="Transparent">
                               <asp:Button ID="btnBook" runat="server" CssClass="BtnStyle" Width="75px" Text="" CommandName="Book"></asp:Button>
                           </asp:TableCell>
                        </asp:TableRow>
                        <asp:TableRow>
                            <asp:TableCell CssClass="LabelHeading" HorizontalAlign="Center" Width="70%" BorderColor="Transparent">
                               $ <asp:Label ID="lblRate" runat="server"></asp:Label> <asp:Label ID="lblCurrencyCode" runat="server"></asp:Label> / <asp:Label ID="lblPeriod" runat="server"></asp:Label></asp:TableCell>
                        </asp:TableRow>
                        <asp:TableRow>
                            <asp:TableCell HorizontalAlign="Center" Width="70%" BorderColor="Transparent">
                               $ <asp:Label ID="lblTotal" runat="server"></asp:Label> <asp:Label ID="lblCurrencyCode2" runat="server"></asp:Label> <asp:Label ID="lblTotalText" runat="server"></asp:Label></asp:TableCell>
                        </asp:TableRow>
                        <asp:TableRow>
                            <asp:TableCell HorizontalAlign="Center" Width="70%" BorderColor="Transparent">
                               <asp:LinkButton ID="btnDetails" runat="server" Text="" Visible="false" CommandName="Details" /></asp:TableCell>
                        </asp:TableRow>
                    </asp:Table>
                </DetailItemTemplate>
              </MasterTableView>
            </telerik:RadGrid>

Javascript:

function btnBook_onclick(index, id) {
    var masterTable = $find("dgRates").get_masterTableView();
    masterTable.clearSelectedItems();
    masterTable.selectItem(index);
    return false;
}

[Venelin]

Hello Peter,

From the provided information I can only make best guess what might be the problem. All columns in the grid are with Display="false", could you please elaborate more on this and explain your scenario. Secondly, I can't see where the btnBook_onclick event handler is attached. Please make sure that it is attached correctly, you are passing the right parameter, that no JavaScript error is thrown (this is very essential) and that the button does not make post back (also very important detail).

I have created a sample demo test page, which is attached to this post for your reference where the functionality works as expected.

Regards,
Venelin
Telerik

 

 

[Peter]

When you have a template "row", setting "selected" from the client, it does not apply the "rgSelectedRow" class to the template "row".  

 I switched to using the "ItemCommand" to the server, and I change the CssClass on the template row via DetailTemplateItemDataCell, works great.