Not sure what's up with this, but the visible property does not seem to work using foreach.
This works (displays Testing 2 only):
<tbody data-bind="foreach: people">
<tr>
<td data-bind="text: $data.firstName"></td>
<td data-bind="text: $data.lastName"></td>
<td>
<div data-bind="visible: false">
Testing 1
</div>
<div data-bind="visible: true">
Testing 2
</div>
</td>
</tr>
This doesn't work (displays both):
//boolean values = makeFalse is false and makeTrue is true
<tbody data-bind="foreach: people">
<tr>
<td data-bind="text: $data.firstName"></td>
<td data-bind="text: $data.lastName"></td>
<td>
<div data-bind="visible: $data.makeFalse">
Testing 1
</div>
<div data-bind="visible: $data.makeTrue">
Testing 2
</div>
</td>
</tr>
Any ideas on how to get it to work?
I remember getting stuck on something like this. Try using ().
<div data-bind="visible: $data.makeFalse()"></div>
<div data-bind="visible: $data.makeTrue()"></div>
Related
I am trying to expand/collapse the following row if row with class='sector' is clicked
This same code seems to work for many people as per other stackoverflow answers but it is not working for me and I wonder why? I do not know much jquery but this seems to me to be workable but still does not work.
Kindly give a simple solution
$(document).ready(function() {
$("td[colspan=2]").hide();
$("tr.sector").click(function() {
$(this).next().toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive">
<table class="table">
<tr>
<td scope="col">Sector</th>
<td scope="col">Total Qty</th>
</tr>
<tr class="sector">
<td>Sector no. 2</td>
<td>
M : 1, </td>
</tr>
<tr>
<td colspan="2">
<p>
<div>
<div class="row">
<div class="col-4">Plot no. 5 | NPSC Apartment</div>
<div class="col-4">1 Packets</div>
<div class="col-4">Details</div>
</div>
</div>
</p>
</td>
</tr>
<tr class="sector">
<td>Sector no. 3</td>
<td>
M : 2, MJ : 1, </td>
</tr>
<tr>
<td colspan="2">
<p>
<div>
<div class="row">
<div class="col-4">Plot no. 1 | Heritage Tower (Sawan CGHS)</div>
<div class="col-4">1 Packets</div>
<div class="col-4">Details</div>
</div>
<div class="row">
<div class="col-4">Plot no. 8 | Himachali Apartment</div>
<div class="col-4">2 Packets</div>
<div class="col-4">Details</div>
</div>
</div>
</p>
</td>
</tr>
</table>
</div>
</div>
You are hiding the td[colspan=2] inside tr and trying to toggle that same tr without actuality showing the td you have hidden in first place.
So you need to use next to get next tr sibling and find inside td[colspan=2] you have hidden and toggle that.
Please read documentation on Jquery Tree Traversal and next time watch for your HTML tree. Its all well documented and explained on link provided.
$(document).ready(function() {
$("tr > td[colspan=2]").hide();
$("tr.sector").click(function() {
$(this).next().find("td[colspan=2]").toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive">
<table class="table">
<tr>
<td scope="col">Sector</th>
<td scope="col">Total Qty</th>
</tr>
<tr class="sector">
<td>Sector no. 2</td>
<td>
M : 1, </td>
</tr>
<tr>
<td colspan="2">
<p>
<div>
<div class="row">
<div class="col-4">Plot no. 5 | NPSC Apartment</div>
<div class="col-4">1 Packets</div>
<div class="col-4">Details</div>
</div>
</div>
</p>
</td>
</tr>
<tr class="sector">
<td>Sector no. 3</td>
<td>
M : 2, MJ : 1, </td>
</tr>
<tr>
<td colspan="2">
<p>
<div>
<div class="row">
<div class="col-4">Plot no. 1 | Heritage Tower (Sawan CGHS)</div>
<div class="col-4">1 Packets</div>
<div class="col-4">Details</div>
</div>
<div class="row">
<div class="col-4">Plot no. 8 | Himachali Apartment</div>
<div class="col-4">2 Packets</div>
<div class="col-4">Details</div>
</div>
</div>
</p>
</td>
</tr>
</table>
</div>
</div>
I'm pretty new in Knockout JS binding and I have this table which is supposed to be a row with a single column with the button if the Confirmed text is empty and two separate columns in other way.
Here is what I've tried so far,
<table class="table" id="Mytable" style="table-layout: fixed;">
<tbody data-bind="foreach: info">
<tr>
<td style="vertical-align:middle;">
<button type="button" class="btn2 btn-default" data-bind="click:$root.getClick, trimText:shortName, trimTextLength: 5, css: Confirmed == '' ? colspan='2' : ''">22</button>
</td>
<td style="vertical-align:middle">
<span style="color:green" data-bind="text: Confirmed, visible: Confirmed != ''">10</span>
</td>
</tr>
</tbody>
</table>
but it seems that it doesn't display the info correctly and I don't know what am I doing wrong.
Please be gentle with me, I'm trying to learn from mistakes.
colspan is an attribute, which you set using the attr binding:
data-bind="attr: { 'colspan': Confirmed() ? 1 : 2 }"
In your specific case, I'd use a virtual if binding to switch between the two cases:
<table>
<tbody data-bind="foreach: info">
<tr>
<!-- ko if: Confirmed -->
<td colspan="2">
<button type="button"
data-bind="click:$root.getClick, trimText:shortName, trimTextLength: 5">22</button>
</td>
<!-- /ko -->
<!-- ko ifnot: Confirmed -->
<td></td>
<td>
<span data-bind="text: Confirmed"></span>
</td>
<!-- /ko -->
</tr>
</tbody>
</table>
I have the below table structure
<table style="width: 100%;">
<tr>
<td><b>Fund Value:</b></td>
<td data-bind="text: ItemDetails().FundValue"></td>
<td><b>Fund Code:</b></td>
<td data-bind="text: ItemDetails().FundCode"></td>
<td><b>Fund Desc:</b></td>
<td data-bind="text: ItemDetails().FundDesc"></td>
</tr>
<tr data-bind="foreach: ItemDetails().PriceRebates">
<td><b>Rebate Value:</b></td>
<td data-bind="text: RebateValue"></td>
<td><b>Rebate Code:</b></td>
<td data-bind="text: RebateCode"></td>
<td><b>Rebate Desc:</b></td>
<td data-bind="text: RebateDesc"></td>
</tr>
</table>
It's bound to the knockout viewmodel. The issue I am having is that the tr is bound to the foreach loop and so it is creating multiple td for the ItemDetails().PriceRebates knockout data which I do not want. I want multiple tr to be created for the ItemDetails().PriceRebates data. Can someone please tell me how I can achieve that.
Thanks
You can use foreach without a container element:
<!-- ko foreach: ItemDetails().PriceRebates -->
<tr>
<td><b>Rebate Value:</b></td>
<td data-bind="text: RebateValue"></td>
<td><b>Rebate Code:</b></td>
<td data-bind="text: RebateCode"></td>
<td><b>Rebate Desc:</b></td>
<td data-bind="text: RebateDesc"></td>
</tr>
<!-- /ko -->
Here is the page source
<div class="col-xs-12">
<br />
<div class="panel panel-primary">
<div class="panel-heading">
Collection Info
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active">
<table class="table" >
<tr>
<th>Vendor</th>
<th>Claim Amount</th>
<th>Amount Received</th>
<th>Type</th>
</tr>
<tr>
<th>Date</th>
<th>Rep</th>
<th>Notes</th>
</tr>
<tr>
<td>
Difference in State Check
</td>
<td>
0.00
</td>
<td>
-382.19
</td>
<td>
<select class="form-control" data-val="true" data-val-required="The Value field is required." id="item_Type_Value" name="item.Type.Value">
<option selected="selected" value="c6edd5bc-c5ef-4a56-8db2-17905d98c823">--None--</option>
<option value="0b4a44d0-7241-422d-935b-d0606b9c5ce1">Attn</option>
<option value="a1341e3c-afb7-4c47-8040-d33bdf82493b">$$$</option>
</select>
<p />
<div class="col-xs-12" style="text-align: right;">
<div class="form-group">
<label class="col-xs-5 control-label"></label>
<div class="col-xs-7">
<input type="submit" value=" Update " style="height:35px;width:75px;" />
</div>
</div>
</div>
</td>
<td>
0.00
</td>
<td>
</td>
<td>
999-999-9999
</td>
</tr>
<tr>
<td>
<textarea cols="80" htmlAttributes="{ class = form-control }" id="Notes" name="Notes" rows="6">
</textarea>
</td>
</tr>
</table>
I'm using bootstrap and below is the picture of my page.
My question is: How can I have Vendor, Claim Amount, Amount Received, Type with-in the div of Collection Info?
so I'm rendering this page using two loops
the first loop generates - vendor, claim amount, amount received, type
the second loop generates - date,rep,notes
and the reason my page is messed up is due to my textarea
here is my html page looks like:
<div class="col-xs-12">
<br />
<div class="panel panel-primary">
<div class="panel-heading">
Collection Info
</div>
<br />
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active">
<table class="table" >
<tr>
<th>Vendor</th>
<th>Claim Amount</th>
<th>Amount Received</th>
<th>Type</th>
</tr>
<tr>
<th>Date</th>
<th>Rep</th>
<th>Notes</th>
</tr>
#foreach (var item in Model)
{
<tr><td>#item.vendor</td></tr>
<tr>#item.claimamount</td></tr>
<tr>#item.amountreceived</td></tr>
<tr>#item.type</td></tr>
foreach (var item1 in item.DetailViewModel)
{
<tr>
<td>
#item1.Date
</td>
<td>
#item1.Rep
</td>
<td>
#item1.Notes
</td>
</tr>
}
<tr>
<td>
#Html.TextArea("Notes", "", 6, 80)
</td>
</tr>
}
</table>
</div>
</div>
</div>
</div>
</div>
I'm trying to achieve something like this:
[This solution takes into consideration the generated code from the edit]
As I told you in the comment, just by fixing the different colspan in the table, it already looks a lot better (and closer to what you show in your picture): http://jsfiddle.net/wnqLpsv9/
For example, if the rows have 7 columns, make all the rows have 7 columns (or occupy the space of 7 columns using colspan), or the result will depend on how the browser decides to display the table.
Still, you need to look at the source, because this is a mess of unnecessary <tr> and closing </td> without opening <td>, that won't generate valid code:
#foreach (var item in Model)
{
<tr><td>#item.vendor</td></tr>
<tr>#item.claimamount</td></tr>
<tr>#item.amountreceived</td></tr>
<tr>#item.type</td></tr>
foreach (var item1 in item.DetailViewModel)
{
<tr>
<td>
#item1.Date
</td>
<td>
#item1.Rep
</td>
<td>
#item1.Notes
</td>
</tr>
}
<tr>
<td>
#Html.TextArea("Notes", "", 6, 80)
</td>
</tr>
}
From what you show in the picture, it would need to be something more in this line (and notice that I don't claim this is correct, but more of a guideline on how to fix it):
#foreach (var item in Model)
{
<tr>
<td>#item.vendor</td>
<td>#item.claimamount</td>
<td>#item.amountreceived</td>
<td>#item.type</td>
</tr>
foreach (var item1 in item.DetailViewModel)
{
<tr>
<td>
#item1.Date
</td>
<td>
#item1.Rep
</td>
<td colspan="2">
#item1.Notes
</td>
</tr>
}
<tr>
<td colspan="2"></td>
<td colspan="2">
#Html.TextArea("Notes", "", 6, 80)
</td>
</tr>
}
<div id="horizontalContainerTile">
<div id="horizontalContainerTile_1">
<table class="horizontalContainerTable">
<tbody>
<tr>
<td id="horizontalTile0">
<div id="genericFormTile">
<div id="genericFormTile_0">
<table class="layout" id="genericFormTable">
<tbody>
<tr id="distributorId">
<td class="formFieldLabel" id="formCellLeft">Comfort Stylist ID:</td>
<td id="leftLabel"></td>
<td class="formField" id="formCellRight">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
<td id="horizontalTile1">
<div id="genericFormTile">
<div id="genericFormTile_1">
<table class="layout" id="genericFormTable">
<tbody>
<tr id="individualFirstName">
<td class="formFieldLabel" id="formCellLeft">First Name:</td>
<td id="leftLabel"></td>
<td class="formField" id="formCellRight">
</td>
</tr>
</tbody>
</table>
<input type="hidden" name="resultsPerPage" value="100"><!-- check if the value for field comes from bundle --><input
type="hidden" name="pageNumber" value="1">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Currently this produce a format like this:
Comfort Stylist ID: <textbox> First Name: <textbox>
And what I want on mobile device is:
Comfort Stylist ID: <textbox>
First Name: <textbox>
Please tell me, if I can do this using media query.
And I am not able to post my existing CSS code, I hope that will not be the issue.
I found it's solution and this we can achieve simply by changing your #media query CSS.
table,tbody,td{
display:block;
}
And other for positions or styling elements you can apply different CSS.
Thanks All!