Sorting a grid

[Bernd Schuhmacher]

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:

model	max. load
M1	101.0
M2	10.8
M3	9.2
M4	98.5
M5	81.5

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

model	max. load
M2	10.8
M1	101.0
M5	81.5
M3	9.2
M4	98.5

I would like to get a sorting like this:

model	max. load
M3	9.2
M2	10.8
M5	81.5
M4	98.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

[Seeni Sakthi Kumar Seeni Raj]

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. 

[Bernd Schuhmacher]

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

[Prasanna Kumar Viswanathan]

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> 

Sample: http://www.syncfusion.com/downloads/support/forum/132370/ze/ServerOperations-2063050909 

Refer to the help document for the load event.  

https://help.syncfusion.com/api/js/ejgrid#events:load 

Regards, 

Prasanna Kumar N.S.V 

[Kam Lo]

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. 

[Seeni Sakthi Kumar Seeni Raj]

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.