Sort image (arrow) does not show up when using SortExpression

[Richard]

I have a RadGrid with column ->

<telerik:GridBoundColumn UniqueName="Description" HeaderText="Description" DataField="ShortDescription" HeaderStyle-Width="15em" SortExpression="ProductCatalogDescription" FilterControlWidth="16em">


Whenever the 'SortExpression' is set, the Ascending/Descending image (up/down arrow) is missing
when you cilck on the column header. If I remove 'SortExpression', then it shows up.

Is this a bug?

[Daniel]

Hello Richard,

This is not an expected behavior. Could you please post your code so that I can take a look?
Do you have a live URL showing this problem?

Best wishes,
Daniel
the Telerik team

[Ben]

Daniel,

I am having this exact same issue as well. What all code do you require to look at this for us?

[Daniel]

Hi Ben,

Simple runnable demo attached to a regular support ticket will be highly appreciated.

Thanks,
Daniel
the Telerik team

[Amjad]

Same issue is happening to me below is my code even if i put  the sort image URL for both ASC / DESC

Any Ideas?

<rad:GridBoundColumn UniqueName="colUniqueName" HeaderText="ColumnName" DataField="ColumnData"
                     HeaderStyle-Width="7%" SortExpression="Field" ShowSortIcon="true" SortAscImageUrl="Images/Common/SortAsc.gif"
                     SortDescImageUrl="Images/Common/SortDesc.gif">
                 </rad:GridBoundColumn>

[Radoslav]

Hello Amjad,

I am sending you a simple example, based on your code snippet. However everything works as expected. Please check it out and let me know what differs in your case. Looking forward for your reply.

All the best,
Radoslav
the Telerik team

[Vladimir]

Exact same problem - I've narrowed it down to the point where the arrow is showing as long as DataField and SortExpression are the same values. If they differ, the sort icon is not shown (sorting works fine though, it's just the icon missing).
I do all my sorting using JavaScipt:

function grdFiles_OnCommand(sender, eventArgs)
{
    switch (eventArgs.get_commandName())
    {
        case "Sort":
            RepositoryFolder.UpdateView();
            break;

    }
    //cancel the command
    eventArgs.set_cancel(true);
}

This is the RadGrid

<telerik:RadGrid runat="server" ID="grdFiles" AutoGenerateColumns="false"
    Height="300" AllowMultiRowSelection="true" AllowSorting="true">
    <MasterTableView BorderWidth="0" ClientDataKeyNames="Id,Name,Size,ChangeDate,AllowManage,IsStatement" GridLines="Horizontal">
        <Columns>
            <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn">
                <HeaderStyle Width="32px" />
            </telerik:GridClientSelectColumn>
            <telerik:GridBoundColumn DataField="Id" UniqueName="Id" Visible="false">
            </telerik:GridBoundColumn>
            <telerik:GridImageColumn DataType="System.String" DataImageUrlFields="Extension" DataImageUrlFormatString="~/App_Themes/Default/Images/FileTypes/{0}.gif" DataAlternateTextField="Extension" ImageAlign="Middle" HeaderText="">
                <HeaderStyle Width="25px" />
            </telerik:GridImageColumn>
            <telerik:GridHyperLinkColumn DataTextFormatString="{0}"
                DataNavigateUrlFields="Id" DataNavigateUrlFormatString="javascript:downloadFile("{0}");"
                HeaderText="Name" DataTextField="Name" SortExpression="Name" UniqueName="Name">
                <ItemStyle Wrap="false" />
            </telerik:GridHyperLinkColumn>
            <telerik:GridBoundColumn DataField="DisplaySize" HeaderText="Size" SortExpression="Size" UniqueName="DisplaySize" ShowSortIcon="True">
                <HeaderStyle Width="80px" HorizontalAlign="Center"/>
                <ItemStyle Wrap="false" HorizontalAlign="Right" />
            </telerik:GridBoundColumn>
            <telerik:GridTemplateColumn DataField="ChangeUser" HeaderText="Added By" SortExpression="ChangeUser" HeaderStyle-Width="120px" >
                <ClientItemTemplate>
                    <span title="#= ChangeUserTooltip #">#= ChangeUser #</span>
                </ClientItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn DataField="ChangeDate" HeaderText="Added On" SortExpression="DisplayChangeDate" UniqueName="ChangeDate">
                <HeaderStyle Width="120px" HorizontalAlign="Center" />
                <ItemStyle Wrap="false" HorizontalAlign="Right" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="AllowManage" UniqueName="AllowManage" Visible="false">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="IsStatement" UniqueName="IsStatement" Visible="false">
            </telerik:GridBoundColumn>
        </Columns>
        <NoRecordsTemplate>
            <div style="width: 100%; padding: 50px; text-align: center; color: #FF7A8793; font-style: italic;">(no files found)</div>
        </NoRecordsTemplate>
    </MasterTableView>
    <ClientSettings>
        <Selecting AllowRowSelect="true" />
        <ClientEvents OnCommand="grdFiles_OnCommand" OnRowDblClick="function(sender,args) { RepositoryFile.FromRow(args).Download(); }" OnRowContextMenu="grdFiles_OnRowContextMenu" />
        <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True"></Scrolling>
        <Resizing AllowColumnResize="false" AllowRowResize="false" ResizeGridOnColumnResize="false"
            ClipCellContentOnResize="true" EnableRealTimeResize="false" AllowResizeToFit="true" />
    </ClientSettings>
</telerik:RadGrid>

So for example - look at the "Size" column - it sorts AND shows the sorting image if written like this:

<telerik:GridBoundColumn DataField="Size" HeaderText="Size" SortExpression="Size" UniqueName="DisplaySize" ShowSortIcon="True">
    <HeaderStyle Width="80px" HorizontalAlign="Center"/>
    <ItemStyle Wrap="false" HorizontalAlign="Right" />
</telerik:GridBoundColumn>

but if I change the DataField, sorting still works, but the image disappears:

<telerik:GridBoundColumn DataField="DisplaySize" HeaderText="Size" SortExpression="Size" UniqueName="DisplaySize" ShowSortIcon="True">
    <HeaderStyle Width="80px" HorizontalAlign="Center"/>
    <ItemStyle Wrap="false" HorizontalAlign="Right" />
</telerik:GridBoundColumn>

My best guess is that somewhere in the JS behind, DataField and SortExpression are compared for value in order to show the sorting icon.
Thanks,
Vlad.

[Kiran]

I'm seeing the same exact behavior as Vladimir has noted above.  Any comment on this from Telerik please?

Regards,
Kiran

[Radoslav]

Hi Kiran,

I confirm that the descried issue exists into the current version of the RadGrid, however I logged it into our bug tracking system and our developers will start working on its resolution. Please excuse us for the temporary inconvenience. 

Regards,
Radoslav
Telerik

[Tim]

I also encounter the same issue in 2014 Q1 release (2014.1 403)
Will this be updated in the Q2 release?

[Radoslav]

Hi Tim,

Unfortunately the described issue exists into the current version of the controls. However I forwarded it to our developers and increased its priority. The fix will be available into the official Q2 2014 release.

Regards,
Radoslav
Telerik

 

 

[Peeyush]

Hello Telerik Team,

 

I am experiencing this same issue on 2014.3.12.09.40  and 2015.1.401.40 version as well, is this issue still not fixed ? I checked the Release history and did not find it as resolved, could you please help me on this.

FYI.. if I use SortAscImageUrl and SortDescImageUrl property on the column of grid it works well, but  I have 100+ grids inside my project and I go and update those one by one it will be a time consuming task, so please suggest something in order to resolve it.

 

Thanks!

[Phil]

i've been having the same issue.

by setting EnableEmbeddedSkins="true" the arrows will now show up.  

however, in doing so, you lose whatever styling you have overwritten, which doesn't help in our case.

using Developer Tools, i copied the background-image web resource URL and into a CSS class with EnableEmbeddedSkins set to 'false' and that did the trick.  sort of a hacky work-around, but it works.