Angular 2 grid not showing sort caret and only sorts ascending

[Steven]

Hello, I have a grid that does not show the caret (up or down) but it does sort asc only. It is firing the sort event when I click the heading of columns with a "field" but it only does a sort descriptor of "asc" and never shows the caret in the grid header? What am I doing wrong?

 

        <kendo-grid [data]="gridView" [height]="400" [sortable]="{mode: 'single'}" [sort]="sort" (sortChange)="sort($event)">
            <kendo-grid-column title="#" [width]="30">
                <template kendoGridCellTemplate let-rowIndex="rowIndex">{{rowIndex + 1}}</template>
            </kendo-grid-column>
            <kendo-grid-column title="Edit" [width]="60">
                <template kendoGridCellTemplate let-dataItem>
                    <a class="btn btn-primary" (click)="edit(dataItem.Id)" title="Edit {{dataItem.Id}}">
                        <i class="fa fa-edit white"></i>
                    </a>
                </template>
            </kendo-grid-column>
            <kendo-grid-column field="Location" title="Location">
                <template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                    {{dataItem.Location}} - {{locName[rowIndex]}}
                </template>
            </kendo-grid-column>
            <kendo-grid-column field="Sdate" title="Date and Time Created">
                <template kendoGridCellTemplate let-dataItem>
                    {{dataItem.Sdate | date: 'MM/dd/yyyy'}} - {{'01/01/01 ' + dataItem.Stime | date: 'HH:mm:ss'}}
                </template>
            </kendo-grid-column>
            <kendo-grid-column field="DownCount" title="Count"></kendo-grid-column>
            <kendo-grid-column field="ScanBy" title="Scanned By"></kendo-grid-column>
            <kendo-grid-column [width]="60" title="Del">
                <template kendoGridCellTemplate let-dataItem>
                    <a class="btn btn-danger" (click)="delete(dataItem.Id)" title="Delete Scan Entry">
                        <i class="fa fa-close white"></i>
                    </a>
                </template>
            </kendo-grid-column>
        </kendo-grid>

 

[Dimiter Topalov]

Hello Steven,

I noticed that the issue is resolved in a private support thread, but will also paste the answer here, so others can benefit as well:

Looking at the description you have provided I suspect that the cause for the behavior you have described is incorrect/incomplete handling of the sortChange event. As demonstrated in the documentation, the developer is responsible to handle the sortChange event, in which to update the sort setting of the Grid component as well as to sort the data accordingly. It is also possible to use the kendoGridBinding directive, which removes the necessity of handling this manually.

I have also noticed in the sample you have pasted, that the Grid sort option, as well as the sortChange event handler, are bound to a single member named sort, which is not correct.

Regards,
Dimiter Topalov
Telerik by Progress

[Steven]

Yes, here is a copy of the kendo-grid tag. scanlogs is my model and all works with no need to do any event handling. Thanks

        <kendo-grid [kendoGridBinding]="scanlogs" [pageSize]="10" [pageable]="pageSizes: [10,20,100]}" [sortable]="true" [groupable]="true"
            [height]="370">