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

Angular 2 grid not showing sort caret and only sorts ascending

2 Answers 339 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Steven
Top achievements
Rank 1
Steven asked on 07 Mar 2017, 11:03 PM

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>

 

2 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Topalov
Telerik team
answered on 09 Mar 2017, 07:42 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Steven
Top achievements
Rank 1
answered on 09 Mar 2017, 11:36 AM

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">

Tags
Grid
Asked by
Steven
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Steven
Top achievements
Rank 1
Share this question
or