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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

how to rebind grid data

Thread ID:





119955 Aug 18,2015 01:48 PM UTC Aug 19,2015 02:30 PM UTC JavaScript 1
Tags: ejGrid
Rakesh Advani
Asked On August 18, 2015 01:48 PM UTC

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

Isuriya Rajan [Syncfusion]
Replied On 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


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.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon 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.Close Icon