events binding in Nested For each using knockout ks
51 views
Skip to first unread message
jai ganesh
Mar 14, 2017, 4:19:34 AM3/14/17
to KnockoutJS
For each Product i have reviews array which is shown using popup. I need to Show 2 radio button which i call it as FreeText and the another one is Field. I have a Property called FieldType mapped to the 2 radio buttons using knockoutjs. I have two div tags in the sample which i need to display based on the radiobutton selection.
Problem is i am not able to check the radio button based on value i set to the Property - FieldType. 2nd Problem is when i change the selection of radio button i need to display only one div tag. this modal popup is generic however it has to behave based on the value in the "reviews" array for each Product. If i change any values in reviews array for Product 1 then i should be able to view the changes in the modal popup of Product 1.if i change any values in reviews array for Product 2 then i should be able to view the changes in the modal popup of Product2.
How ever i am not getting this expected behaviour. Based i am trying to show / hide div tags based on the selection of the radio button and check box.
I am to set the value for checkbox, but it is not working for radio button I need to write a event handler for the radio button which need to work the corresponding product for the popup which it is invoked.
%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestApplication.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-3.1.1.js">
</script>
<script type="text/javascript" src="Scripts/knockout-3.4.2.js"></script>
<script src="Scripts/bootstrap.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
<script type="text/javascript">
function ProductVM() {
self = this;
self.Products = ko.observableArray([]);
self.show = ko.observable(false);
function addProduct(productId, productName, reviews) {
return {
ProductId: ko.observable(productId),
ProductName: ko.observable(productName),
Reviews: ko.observableArray([reviews])
}
}
function addReviews(stock, page, visibleStock, visibleOutStock, visiblePage, show) {
return {
FieldType: ko.observable(stock),
PageType: ko.observable(page),
VisibleText: ko.observable(visibleStock),
VisibleField: ko.observable(visibleOutStock),
VisiblePage: ko.observable(visiblePage),
Show :ko.observable(show)
}
}
var data = {
Products: [
{
"ProductId": 1,
"ProductName": "Guitar",
"Reviews": [{
"FieldType": true,
"PageType": true,
"VisibleText": 3,
"VisibleField": true,
"VisiblePage": true,
"show" : true
}]
},
{
"ProductId": 2,
"ProductName": "Paino",
"Reviews": [{
"FieldType": false,
"PageType": false,
"VisibleText": true,
"VisibleField": false,
"VisiblePage": false,
"show" : true
}]
}
]
}
console.log(data);
for (var i = 0; i < data.Products.length; i++) {
var p1 = data.Products[i].ProductId;
var p2 = data.Products[i].ProductName;
var r3 = data.Products[i].Reviews;
var reviewObj = [];
for (j = 0; j < r3.length; j++) {
reviewObj = new addReviews(r3[j].FieldType, r3[j].PageType, r3[j].VisibleText, r3[j].VisibleField, r3[j].VisiblePage, r3[j].show);
}
self.Products.push(new addProduct(p1, p2, reviewObj));
}
console.log(self.Products())
}
self.FreeTypeChanged = function () {
self.VisibleText(true);
self.VisibleField(false);
};
self.FieldTypeChanged = function () {
self.VisibleField(true);
self.VisibleText(false);
};
self.pageSelectionChanged = function () {
var result = $('#checkPage').prop('checked');
if (result == true) {
self.VisiblePage(true);
}
else {
self.VisiblePage(false);
}
};
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<thead></thead>
<tbody data-bind="foreach: Products">
<tr>
<td><span data-bind="text: ProductId"></span></td>
<td><span data-bind="text: ProductName"></span></td>
<td><a id="openModal" class="btn btn-primary" data-toggle="modal" data-target="#testModal">
<span class="fa fa-folder-o">Open Modal</span>
</a></td>
<td>
<table>
<tbody data-bind="foreach: Reviews">
<tr>
<td>
<div class="modal fade" id="testModal" tabindex="-1" role="dialog" data-bind="enable: Show" >
<div class="modal-dialog" role="document" style="width: 100%; align-self: center;">
<div class="modal-content">
<div class="modal-header" style="text-align: left">
Select Field Value
</div>
<div class="modal-body" id="selectorViewBody">
<div class="container">
<div class="form-group">
<label class="radio-inline">
<input type="radio" class="radio" value="FreeText" data-bind="checked: FieldType, event: { change: FreeTypeChanged }"
name="modelSelection" />
FreeText
</label>
<label class="radio-inline">
<input type="radio" class="radio" value="Field" data-bind="checked: FieldType, event: { change: FieldTypeChanged }"
name="modelSelection" />
Field</label>
</div>
<div class="form-group" data-bind="visible: VisibleText">
<input type="text" id="txtFreeTextName" class="form-control" />
</div>
<div class="form-group" data-bind="visible: VisibleField" >
<div class="row">
<div class="col-md-4">
<label for="ddlModuleNames" class="control-label">Domain (Module) :</label>
<select class="form-control" name="ddlModuleNames" data-bind="options: '1 2 3 4', optionsCaption: '--Select Table Names --'"></select>
</div>
<div class="col-md-4">
<label for="ddlModuleNames" class="control-label">Field Name :</label>
<select class="form-control" name="ddlFieldNames" data-bind="options:'1 2 3 4', optionsCaption: '--Select Table Names --'"></select>
</div>
</div>
<div class="row">
<div class="col-md-8">
<label>
<input type="checkbox" class="check" id="checkPage" data-bind="checked: PageType, event: { change: pageSelectionChanged }"
name="pageSelection" />
Show Page/Row</label>
</div>
</div>
</div>
<div class="form-group" data-bind="visible: VisiblePage">
<div class="row">
<div class="col-md-4">
<label for="txtPage" class="control-label">Page</label>
<input type="text" id="txtPage" class="form-control" />
</div>
<div class="col-md-4">
<label for="txtRow" class="control-label">Row</label>
<input type="text" id="txtRow" class="form-control" />
</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary " type="submit">Submit</button>
<button class="btn btn-primary " type="submit">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function () {
ko.applyBindings(new ProductVM());
})
</script>
</form>
</body>
</html>Reply all
Reply to author
Forward
0 new messages