Knockout Integration

[richard.tiongMember]

Hi Peter,

Please show us how to integrate jqxMenu, jqxTree, & jqxGrid with Knockout as the primary framework on the client side and (WCF) ASP.NET MVC3 on the server side?

Best regards,

Richard

[Peter StoevKeymaster]

Hi Richard,

jqxTree and jqxMenu are still not integrated with Knockout. For integration with ASP .NET MVC, take a look at the ASP .NET Integration help topics in our documentation: jqwidgets documentation.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[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]

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

[Peter StoevKeymaster]

Our future plans are posted here: http://www.jqwidgets.com/roadmap/. As soon as we plan to update the integration with Knockout, we will add an item in the Roadmap, too.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[zbrongMember]

thank u Peter !
waiting for use.

[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:

[Peter StoevKeymaster]

Hi zbrong,

jqxNumberInput has online sample about its integration with Knockout. I suggest you to take a look at this: knockoutjs.htm. In the sample, the jqxNumberInput is bound to observable data.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts