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.
Unfortunately, activation email could not send to your email. Please try again.

Sorting a grid

Thread ID:

Created:

Updated:

Platform:

Replies:

132370 Aug 29,2017 02:02 AM Sep 7,2017 02:54 AM Angular 5
loading
Tags: ejGrid
Bernd Schuhmacher
Asked On August 29, 2017 02:02 AM

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

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On August 30, 2017 07:17 AM

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
Replied On August 31, 2017 02:32 AM

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 [Syncfusion]
Replied On September 1, 2017 06:08 AM

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 


Kam Lo
Replied On September 6, 2017 11:42 AM

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 [Syncfusion]
Replied On September 7, 2017 02:54 AM

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;