Sort Icon does not show after sort on DataSource

[Jerry]

Hi there,


I just moved from Telerik MVC to Kendo. Quite a learning curve.

I'm having a strange problem, where I have set sort on the DataSource, the data being sorted correctly, just the sort icon doesn't show up on the column header, see attached thumbnail, .

javascript

standardGrid.dataSource.sort({ field: "ProjectName", dir: "dsc" });

Grid

@(Html.Kendo()
.Grid<CorporateSys.Data.GetProjectsByIdBusinessUnitIdsUserIdTagged_Result>()
.Name("ProjectStandardGrid")
.HtmlAttributes(new { style = "display:inline-block; height:100%; clear:both;" })
.Columns(columns =>
{
    columns.Bound(c => c.ProjectId).Hidden();
    columns.Bound(c => c.ProjectName);
    columns.Bound(c => c.ProjectType);
})
.Filterable()
.Groupable()
.Sortable()
.DataSource(ds => ds.Ajax()
    .Read("GetJobs", "Job", new { isBau = Model.IsBau, clientId = Model.ClientId })
                                    .ServerOperation(true)
    .PageSize(20))
    .Events(events=>events.DataBound("OnStandardGridDataBound"))
.Pageable()
)

I tried to hack the sort icon in databound event as following. After grid loaded, I click on column header, I always get two sort icons, see attached 'duplicate sort icons'. I tried to append "<span class='k-icon k-i-arrow-n'></span>",  the icon does not show. I tried "<span class='k-icon'></span>", but it displays two icons.

Hack in databound event

function OnStandardGridDataBound(e) {
    var grid = $("#ProjectStandardGrid").data("kendoGrid");

    var th = grid.thead.find(".k-link");

    th.find('span').remove();

    var sortSettings = grid.dataSource._sort;

    if (sortSettings != "" && sortSettings != null) {
        for (var i = 0; i < sortSettings.length; i++) {
            var sort = sortSettings[i];

            var thSort = grid.thead.find("th[data-field='" + sort.field + "'] .k-link");

            if (sort.dir == "dsc") {
                //thSort.append("<span class='k-icon k-i-arrow-n'></span>"); //k-i-arrow-s

                thSort.append("<span class='k-icon'></span>"); //k-i-arrow-s

            } else if (sort.dir == "asc") {

                thSort.append("<span class='k-icon'></span>"); //k-i-arrow-s
            }
        }
    }

any suggestion?

thanks in advance


regards
Jerry

[Iliana Dyankova]

Hello Jerry,

I have already replied to the same question in your other thread, however I am pasting my answer here too: 
I believe the issue is caused by incorrect direction of the dataSource sort method - it should be "desc", not "dsc":

standardGrid.dataSource.sort({ field: "ProjectName", dir: "desc" });

On a side note, please refrain from posting duplicate questions as we monitor all threads - posting same question more than once produces unnecessary overload. Thank you in advance for your understanding.

Regards,
Iliana Nikolova
Telerik

[Abhishek]

Hi Jerry,

I am facing the same issue.

I am using sort dir as "desc" and also added onDataBound code as mentioned above but still sort indicator is missing for me.

I am using Kendo UI v2017.2.621.

Please suggest.

Thanks

Abhishek

[Eyup]

Hi Abhishek,

This thread is a pretty old one.

Can you open a new formal Support Ticket and send us your grid definition there?

[Jerry]

Hi Iliana,


Thank you for your reply. That works!!!

My bad, I didn't read the documentation in detail. Sorry...

regards
Jerry

[Christos]

In my case i had the field all lower case, and it should be same case as the property from view model...

From your example:

standardGrid.dataSource.sort({ field: "projectname", dir: "dsc" });

and should be

standardGrid.dataSource.sort({ field: "ProjectName", dir: "dsc" });

[Christos]

desc not dsc :)