dimanche 15 février 2015

Issue when Editing/Updating row values of jqxGrid bound with a Knockout observable array, replace observable object edited with a javascript object


How prevent this behavior of changing object in observableArray when user modified or edit a row in jqxGrid. I have a knockout observable array of Users, where each User have all is properties as observables,then I bound that observable array to a jqxGrid (from jqWidgets). And when I updated in the grid a User value, then in the observable array that item is replaced with an object containing the values of the observables of this User.


Below is my code:

HTML Section:



<div class="container">
<div id="jqxGrid"
data-bind="jqxGrid: {
source: Users,
editable: true,
width: '100%',
selectionmode: 'singlecell',
columns: [
{ text: 'IsChecked', columntype: 'checkbox', dataField: 'IsChecked', width: '10%' },
{ text: 'FirstName', dataField: 'FirstName', width: '40%', editable: false, sortable: true },
{ text: 'LastName', dataField: 'LastName', width: '40%', editable: true, sortable: true }
]
}">
</div>
</div>


Javascript code: (Creation of Users array, ViewModel initialization, ko.applyBindings invocation.)



function UserModel (user) {

var self = this;

self.IsChecked = ko.observable(false); // later I will use this proerty in other place
self.Username = ko.observable(user.Username);
self.FirstName = ko.observable(user.FirstName);
self.LastName = ko.observable(user.LastName);

// I want to put a isDirty property here
}

var initialUsers = [
new UserModel({ Username: 'JohnMicrosoft', FirstName: 'John', LastName: 'Microsoft' }),
new UserModel({ Username: 'JohnGoogle', FirstName: 'John', LastName: 'Google' }),
new UserModel({ Username: 'JohnApple', FirstName: 'John', LastName: 'Apple' }),

];

var viewModel = null;
$(document).ready(function () {

viewModel = new UserViewModel(initialUsers);
ko.applyBindings(viewModel);

});

function UserViewModel(initialUsers) {
var self = this;

self.Users = ko.observableArray(initialUsers);
};


This images show how the values changes after I click in the first row in IsChecked checkbox.


See Users observable array, item 0 values are observables


Result of clicking IsChecked checbox of first row in jqxGrid enter image description here


The problem is that I want to add some functions to UserModel object and I want to keep the observables because I want to use them in other part of my page. I have een working in this for days and dont know what to do any help will be appreciated. Thanks.





Aucun commentaire:

Enregistrer un commentaire