We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Sorting a grid

Hi
I have a grid with some numeric values. If I try to sort the grid with clicking the column header it seems the soring is alphanumeric.
Example:
My template for the grid looks like this:

<ej-grid allowFiltering="true" allowMultiSorting="true" allowPaging="true" allowSorting="true" [dataSource]="gridData" selectionType="single"
allowSelection="true" [selectionSettings]="tabellenEinstellungen['selectionMode']">
<e-columns>
<e-column field="Geraet" headerText="model" [visible]="true"></e-column>
<e-column field="maxLast" headerText="max. load" type="number" format="{0:n2}"></e-column>
</e-columns>
</ej-grid>

Example data:
modelmax. load
M1101.0
M210.8
M39.2
M498.5
M581.5

when sorting fo "max. load" I get the following:

modelmax. load
M210.8
M1101.0
M5
81.5
M39.2
M498.5

I would like to get a sorting like this:
modelmax. load
M39.2
M210.8
M5
81.5
M498.5
M1
101.0

What do I need to do to get the wanted behaviour.
The data loaded into the ejGrid are created server side and are sent as a JSON encoded string to the client sides javascript.

Regards
Bernd

5 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team August 30, 2017 11:17 AM UTC

Hi Bernd,  
 
Thanks for contacting Syncfusion Support  
 
We suspect that you are binding the maxLast column as string type. If the values in the Datasource string type, the Grid will consider them as string only and sort them alphabetically which is the default behavior. If you would like sort them as a number, bind them as numbers.  
 
Regards,  
Seeni Sakthi Kumar S. 



BS Bernd Schuhmacher August 31, 2017 06:32 AM UTC

Hi

Your guess was right. Is there a way to enforce that the fields of a column are handeld as numeric values?

Thanks for helping.

Regards

Bernd



PK Prasanna Kumar Viswanathan Syncfusion Team September 1, 2017 10:08 AM UTC

Hi Bernd, 

In Grid we do not have type support for sorting the column. So, to achieve your requirement we suggest you to bind them as numbers. In the attached sample we used load event of ejGrid and in this event we convert the string values to integer before we bind the data to the Grid.  

Find the code example and sample:  


<div ng-app="employeeView"> 
    <div ng-controller="GridCtrl"> 
        <div ej-grid id="Grid" allowfiltering="true" allowmultisorting="true" allowpaging="true" e-allowsorting="true" e-datasource="data" e-load="load" selectiontype="single" 
             allowselection="true"> 
            <div e-columns> 
                <div e-column e-field="OrderID" e-headertext="Order ID" e-isprimarykey="true" e-textalign="right"></div> 
                <div e-column e-field="Freight" e-headertext="Freight" e-textalign="right" type="number" format="{0:n2}"></div> 
            </div> 
        </div> 
    </div> 
</div> 
 
<script> 
    
    angular.module('employeeView', ['ejangular']) 
        .controller('GridCtrl', function ($scope) { 
 
            $scope.tools = ["add", "edit", "delete", "update", "cancel"]; 
            $scope.page = 2; 
            $scope.load = function (args) { 
                for (var i = 0; i < this.model.dataSource().length ; i++) { 
                    this.model.dataSource()[i]["Freight"] = parseInt(this.model.dataSource()[i]["Freight"]) 
                } 
            } 
            $scope.data = [{ OrderID: "M1", Freight: "101.0" }, { OrderID: "M2", Freight: "10.8" }, { OrderID: "M3", Freight: "9.2" }, { OrderID: "M4", Freight: "98.5" }, { OrderID: "M5", Freight: "81.5" }]; 
        }); 
</script> 


Refer to the help document for the load event.  


Regards, 
Prasanna Kumar N.S.V 



KL Kam Lo September 6, 2017 03:42 PM UTC

the example given is not Angular 2. since we don't have controllers anymore. Can you post an example for this in Angular? Thank you so much. 



SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 7, 2017 06:54 AM UTC

Hi Bernd,  
 
We are sorry for the inconvenience.  
 
We have modified the sample code as per your requirement. Refer to the following code example.  
 
<ej-grid #grid  [dataSource]="gridData" (load)="gridLoad($event)"> 
    <e-column field="Geraet" headerText="model" [visible]="true"></e-column> 
    <e-column field="maxLast" headerText="max. load" type="number" format="{0:n2}"></e-column> 
</ej-grid> 
 
    public gridLoad(args){ 
        for (var i = 0; i < args.model.dataSource.length ; i++) {  
            args.model.dataSource[i]["maxLast"] = parseInt(args.model.dataSource[i]["maxLast"])  
        }  
    } 
 
    public gridData = [ 
        { OrderID: "M1", Freight: "101.0" },  
        { OrderID: "M2", Freight: "10.8" },  
        { OrderID: "M3", Freight: "9.2" },  
        { OrderID: "M4", Freight: "98.5" },  
        { OrderID: "M5", Freight: "81.5" } 
    ]; 
 
Regards,  
Seeni Sakthi Kumar S. 


Loader.
Live Chat Icon For mobile
Up arrow icon