jQWidgets Forums
jQuery UI Widgets › Forums › Plugins › AngularJS › jqxGrid: Problem updating JSON data
Tagged: angular grid, angularjs, ng-model
This topic contains 3 replies, has 3 voices, and was last updated by Peter Stoev 9 years, 7 months ago.
-
Author
-
Hello,
I’m having problems trying to get the jqxGrid to update the underlying scope data. I originally try to update data received from Breeze.js. I then tested the code with just a simple JSON array but it also failed. In the attached example, if you update the first name in the first row, you will see the data in the scope data and once it has been committed you see that the data hasn’t changed. Is there something I’m doing wrong?
Thanks
<!DOCTYPE html>
<html ng-app=”demoApp”>
<head>
<title id=”Description”>jqxGrid directive for AngularJS</title><link rel=”stylesheet” type=”text/css” href=”../../jqwidgets/styles/jqx.base.css” />
<script type=”text/javascript” src=”../../scripts/angular.min.js”></script>
<script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxangular.js”></script>
<script type=”text/javascript” src=”../../scripts/demos.js”></script><script type=”text/javascript”>
var demoApp = angular.module(“demoApp”, [“jqwidgets”]);demoApp.controller(“demoController”, function ($scope) {
// Grid data.
var data = new Array();
var firstNames = [“Nancy”, “Andrew”, “Janet”, “Margaret”, “Steven”, “Michael”, “Robert”, “Laura”, “Anne”];
var lastNames = [“Davolio”, “Fuller”, “Leverling”, “Peacock”, “Buchanan”, “Suyama”, “King”, “Callahan”, “Dodsworth”];
var titles = [“Sales Representative”, “Vice President, Sales”, “Sales Representative”, “Sales Representative”, “Sales Manager”, “Sales Representative”, “Sales Representative”, “Inside Sales Coordinator”, “Sales Representative”];
var city = [“Seattle”, “Tacoma”, “Kirkland”, “Redmond”, “London”, “London”, “London”, “Seattle”, “London”];
var country = [“USA”, “USA”, “USA”, “USA”, “UK”, “UK”, “UK”, “USA”, “UK”];$scope.grid = {};
$scope.grid_src = {
datatype: “json”,
localdata: [],datafields:
[
{ name: “firstname”, type: “string” },
{ name: “lastname”, type: “string” },
{ name: “title”, type: “string” },
{ name: “city”, type: “string” },
{ name: “country”, type: “string” }
],
addrow: function (rowid, rowdata, position, commit) {
commit(true);
},
deleterow: function (rowid, commit) {
commit(true);
},
updaterow: function (rowid, newdata, commit) {
alert(“Existing: ” + $scope.people[0].firstname);
alert(“Changed: ” + newdata.firstname);
commit(true);
alert(“Updated: ” + $scope.people[0].firstname);
}
};for (var i = 0; i < firstNames.length; i++) {
var row = {};
row[“firstname”] = firstNames[i];
row[“lastname”] = lastNames[i];
row[“title”] = titles[i];
row[“city”] = city[i];
row[“country”] = country[i];
data[i] = row;
}$scope.people = data;
$scope.myVar = “text”;
$scope.bindingCompleted = “”;
$scope.settings =
{
altrows: true,
width: 800,
height: 200,
showstatusbar: true,
editable: true,
ready: function () {
$scope.settings.apply(‘selectrow’, 1);
},
sortable: true,
renderstatusbar: function (statusbar) {
var myVar = $(“#myVar”).detach();
statusbar.append(myVar);
},
source: [],
columns: [
{ text: ‘First Name’, datafield: ‘firstname’, width: 150 },
{ text: ‘Last Name’, datafield: ‘lastname’, width: 150 },
{ text: ‘Title’, datafield: ‘title’, width: 150 },
{ text: ‘City’, datafield: ‘city’, width: 150 },
{ text: ‘Country’, datafield: ‘country’ }
],
bindingcomplete: function (event) {
$scope.bindingCompleted = “binding is completed”;
}
}$scope.grid_src.localdata = $scope.people;
$scope.settings.source = new $.jqx.dataAdapter($scope.grid_src);
});
</script>
</head>
<body>
<div ng-controller=”demoController”>
<jqx-grid jqx-instance=”grid” jqx-settings=”settings”></jqx-grid>
<br />
<span id=”myVar”>{{myVar}}</span>
{{bindingCompleted}}
</div>
</body>
</html>Hi mathi.sekaran,
We do not change your data source’s data. We raise callback functions like “updaterow” when something changes. There, we pass what’s changed and if you wish you can sync it with your data source.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi,
1. I thought one of the advantage of Angular is “two-way” binding. It means we do not need write extra code to update the variable if the value in the view change.
2. I follow your “solution” but triggering the updaterow event:
In the view: <jqx-grid jqx-on-cellValueChanged=”updateRow()”></jqx-grid>In the controller:
scope.updateRow = function(event)
{
var args = event.args;
var value = args.value;
var oldValue = args.oldValue;
var row = args.row;
var index = args.index;
var boundIndex = args.boundIndex;
var rowKey = args.key;
var dataField = args.dataField;
}However, only value give me the current value of the cell. All other variables (oldValue, row, index…) return undefined.
Am I missing something? ng-model doesn’t work with jqx-grid either?
Thanks,
Tan
Hi Tan,
ng-model is not supposed to work with jqxGrid because it is not Input. Also, the updaterow should be defined in the source object. See the Grid’s demos for more details.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.