JSON Sorting

by bryanb

HTML

<script src="http://cdn.kendostatic.com/2011.2.804/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.2.804/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.2.804/styles/kendo.kendo.min.css">
<div id="grid"></div>

<button id="refresh">refresh</button>
<br />
<textarea id="data"></textarea>

CSS

#data {width:400px;height:150px}

JavaScript

function sortJSON(data, key) {
    return data.sort(function(a, b) {
        var x = a[key]; var y = b[key];
        return ((x < y) ? -1 : ((x > y) ? 1 : 0));
    });
}

$(document).ready(function(){
     //simulate request to retrieve columns info
   $.ajax({
             url: "http://services.odata.org/Northwind/Northwind.svc/Orders?$format=json&$callback=callback&$top=1",
             dataType: "jsonp",
             jsonpCallback: "callback",
             jsonp: false,
             success: function(data){
                 var columns = [], items = [],
                     name, idx = 0;
                 for(name in data.d[0]) {
                     items.push(name);
                     if(name != "__metadata" && idx++ < 3) {
                         columns.push(name);
                     }
                 }    
                 buildGrid(columns);
                 $("#data").val(sortJSON(data.d[0],'name'));
             }
        });
    });
    function buildGrid(profile) {        
        $("#grid").kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: "http://services.odata.org/Northwind/Northwind.svc/Orders"
                },
                pageSize: 10,
                serverPaging: true
            },
            pageable: true,
            sortable: true,
            columns: profile
        });
    }