This is a migrated thread and some comments may be shown as answers.

Sort Icon does not show after sort on DataSource

4 Answers 1001 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jerry
Top achievements
Rank 1
Jerry asked on 23 Jan 2014, 03:35 AM
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

4 Answers, 1 is accepted

Sort by
0
Accepted
Iliana Dyankova
Telerik team
answered on 24 Jan 2014, 12:41 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Abhishek
Top achievements
Rank 1
commented on 07 Feb 2022, 06:40 AM

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
Telerik team
commented on 08 Feb 2022, 10:02 AM

Hi Abhishek,

This thread is a pretty old one.

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

0
Jerry
Top achievements
Rank 1
answered on 27 Jan 2014, 08:56 PM
Hi Iliana,


Thank you for your reply. That works!!!

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

regards
Jerry
0
Christos
Top achievements
Rank 1
answered on 05 May 2019, 06:54 PM

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" });

0
Christos
Top achievements
Rank 1
answered on 05 May 2019, 06:55 PM
desc not dsc :)
Tags
Grid
Asked by
Jerry
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Jerry
Top achievements
Rank 1
Christos
Top achievements
Rank 1
Share this question
or