I am using the following code to try and use nested repeaters in WinJS:
<table class="grid" id="rptCustomerHistory" data-win-control="WinJS.UI.Repeater">
<thead>
<tr>
<th colspan="4" class="groupHeader" data-win-bind="textContent: GroupDate.DateTime BindingConverter.toYearMonthDate"></th>
</tr>
</thead>
<tbody data-win-control="WinJS.UI.Repeater" data-win-bind="winControl.data: ch">
<tr>
<td data-win-bind="textContent: ContactDate.DateTime BindingConverter.toshortdate"></td>
<td data-win-bind="textContext: SalesPerson"></td>
<td data-win-bind="textContext: ContactMethod"></td>
<td><span class="symbol"></span></td>
</tr>
</tbody>
</table>
However, it is not rendering any results for the 2nd repeater.
When I use the same data source and similar markup using DIVs, it works:
<div id="rptCustomerHistory" data-win-control="WinJS.UI.Repeater">
<div>
<div data-win-bind="textContent: GroupDate.DateTime BindingConverter.toYearMonthDate"></div>
<div data-win-control="WinJS.UI.Repeater" data-win-bind="winControl.data: ch">
<span data-win-bind="textContent: ContactMethod"></span>
</div>
</div>
</div>
I don't really want to use Divs as this is tabular data. Any idea why using table tags behaves differently?
Did you assign give data to your outer repeater?
The following works in a blank project for me:
<script>
window.list = new WinJS.Binding.List([
new WinJS.Binding.List([1, 2, 3]),
new WinJS.Binding.List([4, 5, 6]),
]);
</script>
<div data-win-control="WinJS.UI.Repeater" data-win-options="{ data: list }">
<span data-win-control="WinJS.UI.Repeater" data-win-bind="winControl.data : this"></span>
</div>
Try replacing
data-win-bind="winControl.data: ch"
with:
data-win-options="{data: ch}"
Related
I just want to ask, I want to display the searched value in my table?
Below code displays Memb_ID in div.
div>
<div class="search-wrapper">
<input type="text" v-model="search" placeholder="Search title..">
<label>Search title:</label>
</div>
<div v-for="cust in filteredList" :key="cust.id">{{ cust.Memb_ID }}</div>
<div class="myTable table-responsive">
<table class="table">
<thead class="thead-dark">
<tr>
<th>Member ID</th>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
<th>Address</th>
<!-- <th>URL</th> -->
</tr>
</thead>
<tbody>
<tr v-for="result in results" :key="result.id">
<td>{{result.Memb_ID}}</td>
<th>{{result.First_Name}}</th>
<th>{{result.Middle_Name}}</th>
<th>{{result.Last_Name}}</th>
<th>{{result.Address}}</th>
<!-- <th>{{user.url}}</th> -->
</tr>
</tbody>
</table>
</div>
This is the output of my code.
I want something like this
I got the code from this question but couldn't implement on my own. Thanks for help!
So I thought I solved my problem by looping in the table body.
There's a bug in here. Every time I reload the page it doesn't load the vue file lol. I thought it was okay after refreshing the page it didn't display the table.
I don't know the bug
<div>
<input type="text" v-model="search" placeholder="Search title..">
</div>
<div class="myTable table-responsive">
<table class="table">
<thead class="thead-dark">
<tr>
<th>Member ID</th>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr v-for="result in filteredList" :key="result.id">
<td>{{result.Memb_ID}}</td>
<th>{{result.First_Name}}</th>
<th>{{result.Middle_Name}}</th>
<th>{{result.Last_Name}}</th>
<th>{{result.Address}}</th>
</tr>
</tbody>
</table>
</div>
and in script
computed: {
filteredList() {
return this.results.filter(customer => {
customer.Memb_ID.toLowerCase().includes(this.search.toLowerCase());
});
}
},
Using Bootstrap 4 I can create a list of list-items. Each list-item contains a text and a button with an icon. The icon is taken from Fontello.
On mobile screens (XS media) sometimes the button does not take the icon as button-content. The result is a very small button that does not contain the icon. This looks like on a mobile device:
On Chrome on my Desktop (F12, XS device) the result is as expected.
A diagnosis is: When I add a number of rows, then vertical size of the list-item gets smaller. Adding 10 items, and the list-item is just a few mm high! So, the size of the list-item gets less high, the button gets less high. Has this to do with 'flexbox'?
Why is this so? I know that when you omit to put anything (or any text) in the button, the button will remain very small. How to repair this?
The code for the button (inside Angular 6)
<ul class="list-group" id="cachesOnHikeList">
<li class="list-group-item d-flex flex-row" *ngFor="let cacheonhike of cachesonhike">
<div class="flex-grow-1">{{ cacheonhike.name| slice:0:22 }}</div>
<button type="button" class="btn btn-warning btn-sm" (click)="removeGeocache( cacheonhike.gcid)"><i class="icon-cancel-circled"></i></button>
</li>
</ul>
The 'cachesOnHikeList' CSS class is:
#cachesOnHikeList {
/*max-height: 250px;*/
max-height:35vh;
overflow:auto;
overflow-y:scroll;
}
Plan-B does not work either. This code (with 2 characters added as button text) produces the same results:
<button type="button" class="btn btn-warning btn-sm px-1"
(click)="removeGeocache( cacheonhike.gcid)"> <i class="icon-cancel-circled"></i> </button>
Plan-C: Adding a 'real' character as button text does not help. The 'X' is shown below the small button. The button is similar to the ones on the screenshot.
<button type="button" class="btn btn-warning btn-sm px-1 font-weight-bold"
(click)="removeGeocache( cacheonhike.gcid)">X</button>
The problem of the small buttons may be caused by (my/the) use of flexbox in combination with a scrollable list-groups
Solution 1:
Replace the flexbox solution with the BS4 grid.
<ul class="list-group" id="cachesOnHikeList">
<li class="list-group-item" *ngFor="let cacheonhike of cachesonhike">
<div class="row">
<div class="mr-auto">{{ cacheonhike.naam | slice:0:22 }}</div>
<button type="button" class="btn btn-warning btn-sm font-weight-bold col-2 col-sm-1 px-1" (click)="removeGeocache( cacheonhike.gcid)">X</button>
</div>
</li>
</ul>
Solution 2: responsive BS4 table
Using a Bootstrap 4 table that is Responsive. In this case the width of the columns is determine automatically by Bootstrap.
<div class="row mt-2">
<div class="listMaxEntries">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>GcId</th>
<th>Naam</th>
<th class="d-none d-sm-table-cell">Type</th>
<th class="d-none d-md-table-cell">Actief</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let geocache of geocachesPage.geocaches"
(click)="saveGeocacheInApplicationDataAndEditIt( geocache)">
<td>{{ geocache.gcid | slice:0:9 }}</td>
<td>{{ geocache.naam }}</td>
<td class="d-none d-sm-table-cell">{{ geocache.type }}</td>
<td class="d-none d-md-table-cell">{{ geocache.actief }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Solution 3: BS4 table with Flexbox.
Using this solution you can specify the column widths. In this case the row height is good!
<div class="row mt-2">
<div class="listMaxEntries">
<table id="productSizes" class="table">
<thead>
<tr class="d-flex">
<th class="col-3 col-md-2">GcId</th>
<th class="col-9 col-sm-7 col-md-5">Name</th>
<th class="col-sm-3 d-none d-sm-table-cell">Type</th>
<th class="col-md-2 d-none d-md-table-cell">Actief</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let geocache of geocachesPage.geocaches" class="d-flex"
(click)="saveGeocacheInApplicationDataAndEditIt( geocache)">
<td class="col-3 col-md-2">{{ geocache.gcid | slice:0:9 }}</td>
<td class="col-9 col-sm-7 col-md-5">{{ geocache.naam }}</td>
<td class="col-sm-3 d-none d-sm-table-cell">{{ geocache.type }}</td>
<td class="col-md-2 d-none d-md-table-cell">{{ geocache.actief }}</td>
</tr>
</tbody>
</table>
</div>
</div>
Enjoy Bootstrap 4 -- what a very nice package!
Given the HTML snippet below how can I, using page-object field accessors, get the second input field, the one with id="333:".
I can't use the id to identify the field as it's auto-generated.
Using page-object accessors I can get the embedded table and the correct cell but the cell object is a PageObject::Elements::TableCell which doesn't seem to have any methods that allow access to the embedded span and input field.
I can get the input field using native Watir accessors - i.e., browser.div( ... etc ...) but would prefer to use just page-object accessors if possible.
If not possible then I'll live with native Watir. Thanks
<div class="modalContent">
<table role="presentation" id="324:_layoutTbl" class="axial">
<tbody>
<tr>
<td>
<input id="326:" name="" value="" onchange="juic.fire("326:","_change",event);" onfocus="juic.fire("326:","_focus",event);" onblur="juic.fire("326:","_blur",event);" type="text">
</td>
</tr>
<tr>
<td class="sfTH">
<label for="332:">Users:</label>
</td>
<td>
<table class="noborder" role="presentation">
<tbody>
<tr>
<th>
<label id="336:" class="rcmFormLabel">Hiring Manager</label>
<label id="337:" for="333:" class="rcmFormLabe">Users, Hiring Manager</label>
</th>
<td><span class="autocompspan ">
<input class="autocompinput" id="333:" name="333:" onfocus="juic.fire("333:","_focus",event);" size="20" value="Bill Murray" role="combobox" type="text">
<input value="111111" id="333:_hidden" name="333:_hidden" type="hidden">
</span>
<div id="335:" style="display:none"><img alt="" class="globalFloatLeft">
<div id="335:_error" style="color:#ff0000">undefined is required</div>
<div style="clear:both;"></div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
After more experimenting I found the answer to my question. I declared the table accessor, e.g., div(:my_table, :class => 'modalContent').table.table then in the code, to get the input field in the first row I did my_text_field = my_table_element[0].text_field_element which returned the PageObject::TextField object in column 2 of row 1
Imagine situation when you need to have output like this
<table>
<tr class="row">
<td class="cell">First resource</td>
<td class="cell">Second resource</td>
</tr>
<tr class="row">
<td class="cell">Third resource</td>
<td class="cell">Fourth resource</td>
</tr>
<tr class="row">
<td class="cell">Fifth resource</td>
<td class="cell">Sixth resource</td>
</tr>
</table>
or like this
<div class="container">
<div class="row"><!--groups-->
<div class="col-md-6">
First resource
</div>
<div class="col-md-6">
Second resource
</div>
<div class="clearfix"> </div>
</div>
<div class="row"><!--group-->
<div class="col-md-6">
Third resource
</div>
<div class="col-md-6">
Fourth resource
</div>
<div class="clearfix"> </div>
</div>
<div><!--group-->
...
</div>
...
...
</div>
As for me this structures are similar for my purpose. I was looking for examples of the usage of placeholders, but do not get it. Please write the example with getResources or PDOTools or similar.
[[pdoResources?
&parents=`0`
&depth=`1`
&tplFirst=`tplFirst`
&tpl=`tpl`
&tplOdd=`tplOdd`
&tplLast=`tplLast`
&tplWrapper=`tplWrapper`
]]
tplFirst
<tr class="row">
<td class="cell">[[+pagetitle]]</td>
tpl
<td class="cell">[[+pagetitle]]</td>
tplOdd
<td class="cell">[[+pagetitle]]</td>
</tr>
<tr class="row">
tplLast
<td class="cell">[[+pagetitle]]</td>
</tr>
tplWrapper
<table>
[[+output]]
</table>
So I'm creating website for a sports team. I have a "Results" page, where their scores for every round will be posted in form of table. Above the table I need to have two options, one that says "Season 2014/2015" and the other "Season 2015/2016", and I want two different tables displayed for each one of them? How do I do that?
You can do this by simply using jquery.Here is an example.
HTML
<div id="foo">
<span id="table1-btn">Table 1</span>
<span id="table2-btn">Table 2</span>
</div>
<table id="table1">
<tr>
<td>Table 1</td><td>Table 1</td>
</tr>
<tr>
<td>Table 1</td><td>Table 1</td>
</tr>
</table>
<table id="table2">
<tr>
<td>Table 2</td><td>Table 2</td>
</tr>
<tr>
<td>Table 2</td><td>Table 2</td>
</tr>
</table>
css
#foo{
width:200px;
height:auto;
padding:5px;
}
#table1-btn,
#table2-btn{
width:100px;
height:auto;
padding:5px;
background-color:#e3e3e3;
cursor:pointer;
}
jQuery
$(document).ready(function () {
$('#table2').hide();
$('#table1-btn').click(function () {
$('#table2').hide();
$('#table1').show();
});
$('#table2-btn').click(function () {
$('#table1').hide();
$('#table2').show();
});
});
Find jsfiddle code Here
If you are using bootstrap, you could look into tabs: http://getbootstrap.com/javascript/#tabs
Have your tables in a tab 2014/2015 and the other tables in a tab 2015/2016