[zbrongMember]

thank u
but in our practice, “selectedValue” is more usefull than “selectedIndex”.

[zbrongMember]

in ff15 it work fine.

[zbrongMember]

and the popup window can’t be drag

[zbrongMember]

Hi Peter:
I’v just test your popup editing sample in oper 12, the “cancel” button dosn’t act the cancel editing .

[zbrongMember]

I found jqxNumberInput is not work with KO’s “with binding”, following is my page sample, note:I’m using observable data!

In order to enter in edit mode, click any of the ‘Edit’ buttons. To save the changes, click the ‘Save’ button in the popup dialog. To cancel the changes
click the ‘Cancel’ button in the popup dialog.

$(document).ready(function () {
var theme = “”;
var data = generateObservableArray(200);
var source = {
localdata: ko.observableArray(data),
datatype: “array”,
updaterow: function (rowid, rowdata) {
// synchronize with the server – send update command
}
};
source.selectedRow = ko.observable(data[0]);

// initialize the input fields.
$(“#firstName”).addClass(‘jqx-input’);
$(“#lastName”).addClass(‘jqx-input’);
$(“#product”).addClass(‘jqx-input’);
$(“#firstName”).width(150);
$(“#firstName”).height(23);
$(“#lastName”).width(150);
$(“#lastName”).height(23);
$(“#product”).width(150);
$(“#product”).height(23);

if (theme.length > 0) {
$(“#firstName”).addClass(‘jqx-input-‘ + theme);
$(“#lastName”).addClass(‘jqx-input-‘ + theme);
$(“#product”).addClass(‘jqx-input-‘ + theme);
}

//$(“#quantity”).jqxNumberInput({ width: 150, height: 23, theme: theme, decimalDigits: 0, spinButtons: true });
$(“#price”).jqxNumberInput({ width: 150, height: 23, promptChar: “#”, digits: 3, decimalDigits: 1, spinButtons: true, theme: theme });

var dataAdapter = new $.jqx.dataAdapter(source);
var editrow = -1;

// initialize jqxGrid
$(“#jqxgrid”).jqxGrid({
width: 670,
source: dataAdapter,
theme: theme,
filterable: true,
pageable: true,
pagesizeoptions: [’10’, ’20’, ’30’],
autoheight: true,
columns: [
{ text: ‘First Name’, datafield: ‘firstname’, width: 100 },
{ text: ‘Product’, datafield: ‘productname’, width: 190 },
{ text: ‘Quantity’, datafield: ‘quantity’, width: 90, cellsalign: ‘right’ },
{ text: ‘Price’, datafield: ‘price’, width: 90, cellsalign: ‘right’, cellsformat: ‘c2’ },
{ 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) + 40} });

// 取得该行数据的id值。
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);
var recordID = parseInt(dataRecord.id);
//根据id在表格的数据源中找到该行原始数据。
var theItem = ko.utils.arrayFirst(data, function (item) {
return parseInt(item.id()) === recordID;
});
source.selectedRow(theItem);
// show the popup window.
$(“#popupWindow”).jqxWindow(‘show’);
}
},
]
});
// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({ width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01 });
$(“#Cancel”).jqxButton({ theme: theme });
$(“#Save”).jqxButton({ theme: theme });

// update the edited row when the user clicks the ‘Save’ button.
$(“#Save”).click(function () {
if (editrow >= 0) {
$(“#popupWindow”).jqxWindow(‘hide’);
}
});

ko.applyBindings(source);

});

Edit

First Name:
Last Name:
Product:
Quantity:
Price:

[zbrongMember]

thank u Peter !
waiting for use.

[zbrongMember]

till now , only tow widgets (datetimeinput and numberinput) can do two way bind. hurry up guys!!!

[zbrongMember]

Hi Peter:
When will your team make all of the widgets integrate to Knockoutjs ? I like your widgets, and I like Knockoutjs too, I hope they will be a great combination!

[zbrongMember]

thank u dimitar!

[zbrongMember]

Hi jensor123!
I’v try your solution in popup model, when click “save” button , the data is still not updated ,the popup winndow can not close automaticly.

[zbrongMember]

that’s my wrong, thank u very much!

may u make me a sample about grid popup editing with knockoutjs’s observable data ?

[Author]

Posts