Anyone have an example of popediting with KO and json?

[delebashParticipant]

I am using the knockout examples gird with json, but I am having trouble getting popupedit to work with KO binding, does anyone have an example?

I am not sure but in the you are applying the binding at the end of the doc.ready function you are applying the bindings like ko.applyBindings(model); but does this really do anything since it doesn’t seem to me that you are using KO to actually bind to the grid since I can remove ko.applyBindings(model); and the grid still works. So if this is the case then I need to somehow get a new GridModel when I click Edit for my row grid, but I am not sure how to set this up. See this fiddle with ko.applyBindings(model); removed. Some help updating this fiddle to allow for popup editing and binding to KO would be appreciated. Note this fiddle is not using remote data but in my app I am using an ajax call like this


var GridModel = function(items, myAjaxCallback) {
this.items = ko.observableArray(items);
var me = this;
$.ajax({
datatype : 'json',
url : "http://127.0.0.1:8081/cors/Contact/?$expand=ContactType"
}).done(function(data, textStatus, jqXHR) {
var jsonData = $.parseJSON(data);
me.items(jsonData.__ENTITIES);
myAjaxCallback(me);
}).fail(function(data, textStatus, jqXHR) {
alert("error");
}).always(function(data, textStatus, jqXHR) {
alert("complete");
})
this.addItem = function() {
// add a new item.
// if (this.items().length < 20) {
// this.items.push({ name: "New item", sales: Math.round(Math.random() * 100), price: Math.round(Math.random() * 100) });
// }
};
this.removeItem = function() {
// remove the last item.
// this.items.pop();
};
this.updateItem = function() {
// update the first item.
// var item = {};
// item.name = initialData[Math.floor(Math.random() * initialData.length)].name;
// item.sales = Math.floor(Math.random() * 500);
// item.price = Math.floor(Math.random() * 200);
// this.items.replace(this.items()[0], item);
};
};


Then my main page that calls GridModel


var model = new GridModel(null,myAjaxCallback);
function myAjaxCallback(myViewModel) {
// Now you can use the data, resume flow from here
debugger;
// var myModel = myViewModel.items.peek().__ENTITIES
var myDataAdapter = getDataAdapter(myViewModel, 'Contact', 'Wakanda')
var editrow = -1;
// initialize jqxGrid
$("#jqxgrid").jqxGrid({
pageable : true,
width : '100%',
autorowheight : true,
autoheight : true,
altrows : true,
autoresizecolumns : true,
theme : 'ui-redmond',
source : myDataAdapter,
columns : [{
text : 'ID',
datafield : 'ID'
}, {
text : 'First Name',
datafield : 'firstName'
}, {
text : 'Middle Name',
datafield : 'middleName'
}, {
text : 'Last Name',
datafield : 'lastName'
}, {
text : 'Contact Type',
datafield : 'ContactType'
}, {
text : 'Edit',
datafield : 'Edit',
columntype : 'button',
cellsrenderer : function() {
return "Edit";
},
buttonclick : function(row) {
// open the popup window when the user clicks a button.
editrow = row;
var offset = $("#jqxgrid").offset();
$("#popupWindow").jqxWindow({
position : {
x : parseInt(offset.left) + 60,
y : parseInt(offset.top) + 60
}
});
// get the clicked row's data and initialize the input fields.
// ko.applyBindings(model);
var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
debugger;
//ko.applyBindings(dataRecord);
//$("#firstName").val(dataRecord.firstName);
//$("#middleName").val(dataRecord.middleName);
//$("#lastName").val(dataRecord.lastName);
// show the popup window.
$("#popupWindow").jqxWindow('show');
}
}]
});

// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({
width : 250,
resizable : false,
theme : ‘ui-redmond’,
isModal : true,
autoOpen : false,
cancelButton : $(“#Cancel”),
modalOpacity : 0.01
});
$(“#Cancel”).jqxButton({
theme : ‘ui-redmond’
});
$(“#Save”).jqxButton({
theme : ‘ui-redmond’
});

}

Edit

First Name:
Middle Name:
Last Name:
Last Name:

Thanks,

Dan

[Author]

Posts