Card View Layout Template sorting not working

[Tanuj]

i am working on a example based on "Card View" demo http://demos.telerik.com/aspnet-ajax/grid/examples/generalfeatures/cardview/defaultcs.aspx i am able to have it work just how i want it to, however i am having  strange problems with the sorting functionality, not sure what i am missing
i have attached code and screenshot, i have listed the problem in 2 points belows

(1) The sort is not working altogether, i am able to click on the heading, its seems to refresh and adds a downward arrow (sort desc), but i don't see the records rearranged, i click on it again, it seems to refresh, but the downward arrow stays (does'nt change to upward arrow)

(2) if i am clicking on column 1, its highlighting(i have added sorted back color property to test this) and trying to sort column 2 with a desc arrow, this seems to be the norm for other columns too, ie if i click on column 5, its trying to sort column 6, when i click on column 1 for the second time it seems to be trying to sort column 1(but, point (1) above happens)

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ClassWorkShopGrid.ascx.cs" Inherits="CMSWebParts_Grafica_ClassWorkShopGrid" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!-- content start -->
<style type="text/css">
    .RadGrid .rgRow TD
    {
        padding:0px !important;
    }
    .RadGrid .rgAltRow TD
    {
        padding:0px !important;
        background-color:White;
    }
    .GridHeader
    {
        font-weight:bold;
        color:#426594 !important;
        text-transform:uppercase;
        font-size:11px !important;
    }
    .BlueHeadings
    {
        color:#426594 !important;
        text-transform:uppercase;
        font-size:11px !important;
        font-weight:bold;
    }
    .GridHeader a
    {
        font-weight:bold;
        color:#426594 !important;
        text-transform:uppercase;
        font-size:11px !important;
    }
</style>
<br/>
<br/>
<telerik:RadCodeBlock runat="server" ID="radCodeBlock">
    <script type="text/javascript">
        function showFilterItem() {
            $find('<%=RadGrid1.ClientID %>').get_masterTableView().showFilterItem();
        }
        function hideFilterItem() {
            $find('<%=RadGrid1.ClientID %>').get_masterTableView().hideFilterItem();
        }
    </script>
</telerik:RadCodeBlock>
<div>
    <div style="float:left;" class="BlueHeadings">
        Sort Classes by:
    </div>
    <div style="float:right;padding-right:15px;"  class="BlueHeadings">
        Show filtering item <input id="Radio1" type="radio" runat="server" name="showHideGroup" checked="true" onclick="showFilterItem()" /><label for="Radio1">Yes</label>
        <input id="Radio2" type="radio" runat="server" name="showHideGroup" onclick="hideFilterItem()"/><label for="Radio2" >No</label>
    </div>
    <div style="clear:both;"></div>
</div>
<telerik:RadGrid ID="RadGrid1"  AllowPaging="True" runat="server" AllowSorting="True" Skin="WebBlue" OnNeedDataSource="RadGrid1_NeedDataSource"
    AllowFilteringByColumn="true" AutoGenerateColumns="false" ShowStatusBar="True">
    <PagerStyle Mode="NextPrevAndNumeric" Wrap="True" AlwaysVisible="true"></PagerStyle>
    <MasterTableView AllowMultiColumnSorting="false" TableLayout="Fixed" AllowNaturalSort="false" >
        <Columns>
            <telerik:GridBoundColumn UniqueName="CourseTitle" HeaderText="Course Title" DataField="CourseTitle"  SortExpression="CourseTitle" AllowFiltering="false" HeaderStyle-CssClass="GridHeader"
                HeaderStyle-Width="60px" ItemStyle-Width="60px"/>
            <telerik:GridBoundColumn UniqueName="CategoryName" HeaderText="Category" DataField="CategoryName"  SortExpression="CategoryName" AllowFiltering="true" HeaderStyle-CssClass="GridHeader"
                HeaderStyle-Width="80px" ItemStyle-Width="80px" >
                 <FilterTemplate>
                        <telerik:RadComboBox ID="RadComboBoxCategoryName" DataSourceID="SqlDataSource2" DataTextField="CategoryName" Skin="WebBlue"
                            DataValueField="CategoryName" AppendDataBoundItems="true" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("CategoryName").CurrentFilterValue %>'
                            runat="server" OnClientSelectedIndexChanged="CategoryIndexChanged" Width="95px">
                            <Items>
                                <telerik:RadComboBoxItem Text="All" />
                            </Items>
                        </telerik:RadComboBox>
                        <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                            <script type="text/javascript">
                                function CategoryIndexChanged(sender, args) {
                                    var tableView=$find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                    tableView.filter("CategoryName", args.get_item().get_value(), "EqualTo");
                                }
                            </script>

                        </telerik:RadScriptBlock>
                 </FilterTemplate>
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="ClassLevel" HeaderText="Course Level" DataField="ClassLevel"  SortExpression="ClassLevel" AllowFiltering="True" HeaderStyle-CssClass="GridHeader"
                HeaderStyle-Width="60px" ItemStyle-Width="60px" >
                 <FilterTemplate>
                        <telerik:RadComboBox ID="RadComboBoxClassLevel" DataSourceID="SqlDataSource3" DataTextField="ClassLevel" Skin="WebBlue"
                            DataValueField="ClassLevel" AppendDataBoundItems="true" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("ClassLevel").CurrentFilterValue %>'
                            runat="server" OnClientSelectedIndexChanged="ClassLevelIndexChanged" Width="70px">
                            <Items>
                                <telerik:RadComboBoxItem Text="All" />
                            </Items>
                        </telerik:RadComboBox>
                        <telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">
                            <script type="text/javascript">
                                function ClassLevelIndexChanged(sender, args) {
                                    var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                    tableView.filter("ClassLevel", args.get_item().get_value(), "EqualTo");
                                }
                            </script>
                        </telerik:RadScriptBlock>
                 </FilterTemplate>
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="FacultyName" HeaderText="Instructor" DataField="FacultyName"  SortExpression="FacultyName" AllowFiltering="true" HeaderStyle-CssClass="GridHeader"
                  HeaderStyle-Width="70px" ItemStyle-Width="70px">
                 <FilterTemplate>
                        <telerik:RadComboBox ID="RadComboBoxFacultyName" DataSourceID="SqlDataSource4" DataTextField="FacultyName" Skin="WebBlue"
                            DataValueField="FacultyName" AppendDataBoundItems="true" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("FacultyName").CurrentFilterValue %>'
                            runat="server" OnClientSelectedIndexChanged="FacultyNameIndexChanged" Width="90px">
                            <Items>
                                <telerik:RadComboBoxItem Text="All" />
                            </Items>
                        </telerik:RadComboBox>
                        <telerik:RadScriptBlock ID="RadScriptBlock3" runat="server">
                            <script type="text/javascript">
                                function FacultyNameIndexChanged(sender, args) {
                                    var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                    tableView.filter("FacultyName", args.get_item().get_value(), "EqualTo");
                                }
                            </script>
                        </telerik:RadScriptBlock>
                 </FilterTemplate>
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="StudioSchoolType" HeaderText="Class / Workshop" DataField="StudioSchoolType"  SortExpression="StudioSchoolType" AllowFiltering="true" HeaderStyle-CssClass="GridHeader"
                HeaderStyle-Width="60px" ItemStyle-Width="60px">
                 <FilterTemplate>
                        <telerik:RadComboBox ID="RadComboBoxStudioSchoolType" Skin="WebBlue"
                            SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("StudioSchoolType").CurrentFilterValue %>'
                            runat="server" OnClientSelectedIndexChanged="StudioSchoolTypeIndexChanged" Width="70px">
                            <Items>
                                <telerik:RadComboBoxItem Text="All" Value="All"  />
                                <telerik:RadComboBoxItem Text="Class" Value="Class" />
                                <telerik:RadComboBoxItem Text="Workshop" Value="Workshop" />
                            </Items>
                        </telerik:RadComboBox>
                        <telerik:RadScriptBlock ID="RadScriptBlock4" runat="server">
                            <script type="text/javascript">
                                function StudioSchoolTypeIndexChanged(sender, args) {
                                    var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                    tableView.filter("StudioSchoolType", args.get_item().get_value(), "EqualTo");
                                }
                            </script>
                        </telerik:RadScriptBlock>
                 </FilterTemplate>
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="ScheduleDays" HeaderText="Day(s)" DataField="ScheduleDays"  SortExpression="ScheduleDays" AllowFiltering="true" HeaderStyle-Width="80px" HeaderStyle-CssClass="GridHeader"
             ItemStyle-Width="80px" FilterControlWidth="95px" CurrentFilterFunction="Contains" FilterListOptions="VaryByDataType" ShowFilterIcon="false" AutoPostBackOnFilter="true" />
            <telerik:GridTemplateColumn UniqueName="Price" HeaderText="Price" DataField="Price"  SortExpression="Price" AllowFiltering="false" HeaderStyle-Width="60px" ItemStyle-Width="80px" HeaderStyle-CssClass="GridHeader" >
                <ItemTemplate>
                    <span>$<%# Eval("Price").ToString()%></span>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn UniqueName="Add" HeaderText="Add" AllowFiltering="false" HeaderStyle-Width="35px" ItemStyle-Width="35px" HeaderStyle-CssClass="GridHeader" SortExpression="Price" >
                <ItemTemplate>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
        <ItemTemplate>
            <div style="width:100%;padding:0px;margin:0px;padding-top:5px;" >
                <span style="font-weight: bold; font-family: Arial Black;padding-left:5px;"><%# Eval("CourseTitle").ToString()%></span>
                <hr style="width:100%;" />
                <div>
                    <div style="float:left;width:90px;padding-left:5px;">Course #:<%# Eval("CourseCode").ToString()%></div>
                    <div style="float:left;width:110px;"><%# Eval("CategoryName").ToString()%></div>
                    <div style="float:left;width:90px;"><%# Eval("ClassLevel").ToString()%></div>
                    <div style="float:left;width:110px;"><%# Eval("FacultyName").ToString()%></div>
                    <div style="float:left;width:80px;"><%# Eval("StudioSchoolType").ToString()%></div>
                    <div style="float:left;width:120px;"><%# Eval("ScheduleDays").ToString().Replace("|",", ")%></div>
                    <div style="float:left;width:75px;">
                        <span style="color:#e76d18;font-weight:bold;">Member:</span><br/>
                        <span>$<%# (Convert.ToInt32(Eval("Price").ToString())-30).ToString()%></span><br/><br/>
                        <span style="color:#e76d18;font-weight:bold;">Non Member:</span><br/>
                        <span>$<%# Eval("Price").ToString()%></span><br/>
                    </div>
                    <div style="float:left;width:40px">
                        <a href="~/SpecialPages/Shoppingcart.aspx"><img src="~/app_themes/njvac/images/cart.gif" border="0" title="add to cart" /></a><br/><br/><br/>
                        <a href="~/SpecialPages/Shoppingcart.aspx"><img src="~/app_themes/njvac/images/cart.gif" border="0" title="add to cart" /></a>
                    </div>
                    <div style="clear:both;"></div>
                </div>
                <div>
                    <span style="font-weight: bold;background-color:#bdc3ce;padding:5px;color:White;">Course Information</span><br/>
                </div>
                <div style="background-color:#f7f3f7;padding:15px;">
                    <span style="font-weight:bold;"><%# Eval("Duration").ToString()%> week(s) course</span>&nbsp;&nbsp;
                    <span style="font-weight:bold;">Class Held:&nbsp;</span><%# Convert.ToDateTime(Eval("StartDate").ToString()).ToShortDateString()%> - <%# Convert.ToDateTime(Eval("EndDate").ToString()).ToShortDateString()%>
                    <span style="font-weight:bold;">Season:&nbsp;</span><%# Eval("SeasonName").ToString()%> - <%# Eval("Year").ToString()%>&nbsp;&nbsp;
                    <span style="font-weight:bold;">No class on:&nbsp;</span><%# Eval("NoClassOn").ToString()%>&nbsp;&nbsp;<br/>
                    <%# Eval("Description").ToString()%><br/>
                    <span style="color:red"><%# Eval("ClassFullMessage").ToString()%></span>
                </div>
            </div>
        </ItemTemplate>
    </MasterTableView>
    <ClientSettings>
        <Scrolling UseStaticHeaders="true" />
    </ClientSettings>
</telerik:RadGrid>
<asp:SqlDataSource ID="SqlDataSource2" ConnectionString="<%$ ConnectionStrings:CMSConnectionString %>"
    ProviderName="System.Data.SqlClient" SelectCommand="select CategoryName from customtable_class_categories"
    runat="server"></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource3" ConnectionString="<%$ ConnectionStrings:CMSConnectionString %>"
    ProviderName="System.Data.SqlClient" SelectCommand="select ClassLevel from customtable_class_level"
    runat="server"></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource4" ConnectionString="<%$ ConnectionStrings:CMSConnectionString %>"
    ProviderName="System.Data.SqlClient" SelectCommand="select fullname as 'FacultyName' from customtable_faculty"
    runat="server"></asp:SqlDataSource>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using CMS.PortalControls;
using Telerik.Web.UI;
using Grafica.Helper;

public partial class CMSWebParts_Grafica_ClassWorkShopGrid : CMSAbstractWebPart
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
    {
        this.RadGrid1.DataSource = Course.GetAllCourses();
    }
}

[Veli]

Hi Tanuj,

The sorted styles of the header, as well as the sort arrows not getting updated are caused by setting a custom CSS class to your header cells. The custom CSS class overwrites the default CSS class from RadGrid's skin. As a result, the sorted styles, as well as the sort arrows are not properly shown. You need to remove the HeaderStyle-CssClass="GridHeader" properties from your column definitions. If you need to apply the styles defined by the GridHeader selector, you can use the default grid header CSS class (rgHeader) with a higher specificity:

div.RadGrid table.rgMasterTable th.rgHeader
{
    font-weight:bold;
    color:#426594;
    text-transform:uppercase;
    font-size:11px;
}

div.RadGrid table.rgMasterTable th.rgHeader a
{
    font-weight:bold;
    color:#426594;
    text-transform:uppercase;
    font-size:11px;
}

This issue is probably related to your issue 2 in your list. Let me know whether the suggested approach fixes it too.

We do not have an idea as to why the sorting itself does not happen, e.g. why do you get the sorted styles applied, but the data stays in the same order. If you are using AJAX, try disabling it to see if it makes any difference. Also, I notice the markup you provided is a UserControl. Make sure the control is properly added to the page and recreated on postback.

If the problem persists, consider sending us some sample test project we can debug locally. You can open a regular support ticket and attach the files in it. Refer to this forum thread, if needed.

Regards,
Veli
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.