CODEWITHSUNDEEP
angularjskendo-uidojotelerikkendo-grid
Prabhakaran
Prabhakaran

Reputation: 1544

Sorting is not working properly in Kendo local data binded gird using AngularJS

I am using AngularJs Kendo grid and bind some local data array which is a result of the service request. The grid sort behavior works fine, but when some new data appended to array it gets reflected in the grid but the sort fails to work. I tried a sample in plunker as well as in dojo.telerik.com, the expected behavior works fine. I don't know what is the mistake.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.3.930/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/angular.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
  
<div ng-app="app" ng-controller="MyCtrl">
    <div kendo-grid="grid"
         k-data-source="gridData"
         k-columns="gridColumns"
         k-sortable="true"></div>

    <button kendo-button ng-click="update()">
      Update
    </button>
</div>
<script>
angular.module("app", ["kendo.directives"]).controller("MyCtrl", function($scope) {
  $scope.gridData = [
    { artist: "Pink Floyd", track: "The dark side of the Moon" },
    { artist: "The Beatles", track: "I've just seen a face" },
    { artist: "Queen", track: "Innuendo" }
  ];
  
  $scope.gridColumns = [
    { field: "artist", title: "Artist" },
    { field: "track", title: "Track" }
  ];
  
  $scope.update = function() {
    $scope.gridData.push({
    	artist: "Prabha", track: "ABCDEFGHIJKL"
    });
    $scope.grid.dataSource.read();
  };
});
</script>
</body>
</html>

Upvotes: 1

Views: 1320

Answers (2)

Sujatha
Sujatha

Reputation: 302

Refer here- The "k-sort" is ignored as there is no "sort" as the DropDownList does not have a "sort" configuration option

Upvotes: 2

Prajapati Vikas
Prajapati Vikas

Reputation: 300

Can you please add type:"string" in $scope.gridColumns array and check. Below is the sample.

$scope.gridColumns = [
{ field: "artist", title: "Artist",type:"string" },
{ field: "track", title: "Track",type:"string" }];

Upvotes: 2

Related Questions