jQWidgets Forums

Tagged: knockoutjs

This topic contains 0 replies, has 1 voice, and was last updated by hasnainsaad93 8 years ago.

Viewing 1 post (of 1 total)

Author

KnockoutJS, blank table.. Posts
February 23, 2017 at 9:10 pm KnockoutJS, blank table.. #91838

hasnainsaad93
Participant

<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>This example shows how to integrate jqxGrid with Knockout.js.
</title>
<link href=”~/Scripts/jqwidgets/styles/jqx.base.css” rel=”stylesheet” />
<link href=”~/Scripts/jqwidgets/styles/jqx.bootstrap.css” rel=”stylesheet” />
<link href=”~/Scripts/jqwidgets/styles/jqx.web.css” rel=”stylesheet” />
<!– jQuery –>
<script src=”~/Content/js/jquery.min.js”></script>
<script src=”~/Scripts/knockout-3.4.1.js”></script>
<script src=”~/Scripts/knockout.validation.min.js”></script>
<script src=”~/Scripts/jqwidgets/jqxknockout.js”></script>
<script src=”~/Scripts/jqwidgets/jqxcore.js”></script>
<script src=”~/Scripts/jqwidgets/jqxbuttons.js”></script>
<script src=”~/Scripts/jqwidgets/jqxscrollbar.js”></script>
<script src=”~/Scripts/jqwidgets/jqxmenu.js”></script>
<script src=”~/Scripts/jqwidgets/jqxgrid.js”></script>
<script src=”~/Scripts/jqwidgets/jqxgrid.selection.js”></script>
<script src=”~/Scripts/jqwidgets/jqxgrid.columnsresize.js”></script>
<script src=”~/Scripts/jqwidgets/jqxdata.js”></script>
<script src=”~/Scripts/jqwidgets/jqxlistbox.js”></script>
<script src=”~/Scripts/jqwidgets/jqxgrid.filter.js”></script>
<script src=”~/Scripts/jqwidgets/jqxgrid.sort.js”></script>
<script src=”~/Scripts/jqwidgets/jqxgrid.pager.js”></script>
<script src=”~/Scripts/jqwidgets/jqxdropdownbutton.js”></script>
<script src=”~/Scripts/jqwidgets/jqxdropdownlist.js”></script>
<script src=”~/Scripts/jqwidgets/jqxmenu.js”></script>
<script src=”~/Scripts/jqwidgets/jqxpanel.js”></script>
<script src=”~/Scripts/jqwidgets/jqxcalendar.js”></script>
<script src=”~/Scripts/jqwidgets/jqxdatetimeinput.js”></script>
<script src=”~/Scripts/jqwidgets/jqxcheckbox.js”></script>
<script src=”~/Scripts/jqwidgets/globalization/globalize.js”></script>
<script src=”~/Scripts/jqwidgets/jqxprogressbar.js”></script>
<script src=”~/Scripts/app/purchase-order/purchase-order-controller.js”></script>
</head>

<body class=’default’>
<div id=’jqxWidget’>
<div style=”margin-bottom: 10px;”>

</div>
<div data-bind=”jqxGrid: {
source: detail, disabled: disabled, autoheight: true,
editable: true,
selectionmode: ‘singlecell’,
columns: [
{ text: ‘Name’, dataField: ‘ItemName’, width: 200 },
{ text: ‘Sales’, dataField: ‘SizeName’, width: 200, cellsalign: ‘right’ },
{ text: ‘Price’, dataField: ‘QualityName’, width: 200, cellsformat: ‘c2’, cellsalign: ‘right’ }
]
}” id=”jqxgrid”>
</div>
<table style=”margin-top: 20px;”>
<tbody data-bind=”foreach: detail”>
<tr>
<td data-bind=”text: ItemName”></td>
<td data-bind=”text: SizeName”></td>
<td data-bind=”text: QualityName”></td>
</tr>
</tbody>
</table>
</div>
</body>

</html>

<!– My JS File –>
/// <reference path=”../../knockout.validation.min.js” />
/// <reference path=”../../knockout-3.4.1.js” />
$(function () {

setTimeout(function () {

var PODetail = function (detail) {
var self = this;
self.ItemID = ko.observable(detail ? detail.ItemID : 0);
self.ItemName = ko.observable(detail ? detail.ItemName : ”);
self.SizeID = ko.observable(detail ? detail.SizeID : 0);
self.SizeName = ko.observable(detail ? detail.SizeName : ”);
self.QualityID = ko.observable(detail ? detail.QualityID : 0);
self.QualityName = ko.observable(detail ? detail.QualityName : ”);
self.BrandID = ko.observable(detail ? detail.BrandID : 0);
self.BrandName = ko.observable(detail ? detail.BrandName : ”);
self.Packing = ko.observable(detail ? detail.Packing : 0);
self.Pcs = ko.observable(detail ? detail.Pcs : 0);
self.Quantity = ko.observable(detail ? detail.Quantity : 0);
self.Unit = ko.observable(detail ? detail.Unit : 0);
self.Rate = ko.observable(detail ? detail.Rate : 0);
self.Ex_Amount = ko.observable(detail ? detail.Ex_Amount : 0);
self.GST_Perc = ko.observable(detail ? detail.GST_Perc : 0);
self.AST_Perc = ko.observable(detail ? detail.AST_Perc : 0);
self.Tax_Amount = ko.observable(detail ? detail.Tax_Amount : 0);
self.Further_Perc = ko.observable(detail ? detail.Further_Perc : 0);
self.Further_Amount = ko.observable(detail ? detail.Further_Amount : 0);
self.WH_Perc = ko.observable(detail ? detail.WH_Perc : 0);
self.WH_Amount = ko.observable(detail ? detail.WH_Amount : 0);
self.In_Amount = ko.observable(detail ? detail.In_Amount : 0);
self.Location_ID = ko.observable(detail ? detail.Location_ID : 0);

};

var POHeader = function (header) {
var self = this;
self.CompanyID = ko.observable(header ? header.CompanyID : 0);
self.BranchID = ko.observable(header ? header.BranchID : 0);
self.PO_RefNo = ko.observable(header ? header.PO_RefNo : ”);
self.Date = ko.observable(header ? header.Date : ”);
self.BP_ID = ko.observable(header ? header.BP_ID : 0);
self.Inventory_Account = ko.observable(header ? header.Inventory_Account : ”);
self.Sale_Tax_Account = ko.observable(header ? header.Sale_Tax_Account : ”);
self.WH_Tax_Account = ko.observable(header ? header.WH_Tax_Account : ”);
self.In_Amount = ko.observable(header ? header.In_Amount : 0);
self.Ex_Amount = ko.observable(header ? header.Ex_Amount : 0);
self.TotalQty = ko.observable(header ? header.TotalQty : 0);
self.OtherCharges = ko.observable(header ? header.OtherCharges : 0);
self.NetAmount = ko.observable(header ? header.NetAmount : 0);
self.Remarks = ko.observable(header ? header.Remarks : ”);
self.AA_Check = ko.observable(header ? header.AA_Check : false);

self.PODetailDTO = ko.observableArray(header ? header.PODetailDTO : []);

};

var POViewModel = function () {
var self = this;

self.header = ko.observable(new POHeader());

var detail = new PODetail();
detail.ItemName = ‘saad’;
detail.SizeName = ‘saad’;
detail.QualityName = ‘saad’;

self.detail = ko.observableArray([detail]);

self.addDetail = function () {
self.detail.push(detail);
};

};

ko.applyBindings(new POViewModel());
});

});
Author

Posts

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.