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

how to rebind grid data

I want to rebind grid data with json object

I want example with angualr js and mvc

so i want grid with new data instead of old one

1 Reply

IR Isuriya Rajan Syncfusion Team August 19, 2015 02:30 PM UTC

Hi Rakesh,


Thanks for using the syncfusion product,

We can achieve your requirement by using this $scope.data .By using this we can change the grid data dynamically.

Please refer the below code snippets here we are changed the grid data using the button click event.

<body ng-controller="PhoneListCtrl">

//button click event here

<button id="btn" ng-click="click()">DataSourcebutton>

<div id="grid" ej-grid e-datasource="data" e-columns="col" e-allowpaging="true" e-toolbarsettings-showtoolbar='true' e-recorddoubleclick="recordDblClick" e-toolbarclick="toolbarHandler" e-toolbarsettings-toolbaritems='toolbar' e-editsettings-allowdeleting=' true' e-editsettings-allowediting='true' e-editsettings-allowadding='true'>div>

<script type="text/javascript">

angular.module('listCtrl', ['ejangular'])

.controller('PhoneListCtrl', function ($scope) {

//old data

$scope.data = window.gridData2;

// data

var obj = [{ "OrderID": 1, "TestColumn": "Davolio", "CustomerID": "Nancy", }, { "OrderID": 1, "TestColumn": "Davolio", "CustomerID": "Nancy", }, { "OrderID": 1, "TestColumn": "Davolio", "CustomerID": "Nancy", }]

$scope.click = function (args) {

//obj data will bind here

$scope.data = obj;


$scope.toolbar = ["add", "edit", "delete", "update", "cancel"]

$scope.col = [{ "field": "OrderID", "headerText": "OrderID", "textAlign": "right", "isPrimaryKey": true, "width": 90 },

{ "field": "TestColumn", "headerText": "TestColumn", "width": 90 },

{ "field": "CustomerID", "headerText": "CustomerID", "textAlign": "right", "width": 90 }]



Please refer the following sample and help document for more details about Angular support,

Sample: http://www.syncfusion.com/downloads/support/directtrac/119955/Grid-740276359.zip

Help Document:: http://helpjs.syncfusion.com/js/angularjs

Please let me know if you need any further assistance.


  Isuriya R

Live Chat Icon For mobile
Up arrow icon