I have a table that is bound to an knockout observableArray:
<table class="table table-hover table-condensed">
<tbody data-bind="foreach: screens">
<tr data-toggle="collapse" href="#collapse"> // how can i bind the individual id?
<td><span data-bind="text: computerName"></span>
<!-- ko if: supporter -->
<span class="label label-primary">S</span>
<!-- /ko -->
</td>
<td data-bind="text: computerKennung"></td>
<td data-bind="text: nummer"></td>
<tr>
<tr data-bind="attr: { id: 'collapse' + oid}" class="collapse">
<td colspan="3">
<button class="btn btn-primary" data-bind="click: edit">Edit</button>
<button class="btn btn-primary" data-bind="click: delete">Delete</button>
</td>
</tr>
</tbody>
</table>
Every row should be clickable and collapse an additional row below, where i have buttons for actions. According to the bootstrap samples i need an id, which is called in the href-Target. But every row has a different oid and i don't know how many items are in the array.
Can i bind the href-Target via Knockout in any way? Is there a better way for collapsing a table row with unknown ids?
You can bind the href in the same manner as you're binding the id on the second row using the attr binding:
<tr data-toggle="collapse" data-bind="attr: { href: '#collapse' + oid }">
Related
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'm attempting to return two tr elements from a single component v-design-row. I know vue requires the template elements to be wrapped in a div, but I cannot wrap them in a div because of the tag structure html tables require. When I add the second tr in the v-design-row component then vue doesn't render anything.
Can anyone suggest the best method for accomplishing this?
main.vue
<table class="table">
<thead>
<th>Image</th>
<th>Name</th>
<th>Description</th>
<th>Status</th>
<th>Order</th>
<th>Edit</th>
<th>Delete</th>
</thead>
<tbody v-for="catagory in catagories">
<v-catagory-row :catagory="catagory"></v-catagory-row>
<v-design-row v-for="design in catagory.designs" :design="design"></v-design-row>
</tbody>
</table>
v-design-row.vue
<template>
<tr>
<td><img :src="design.image_directory" :alt="design.name"></td>
<td>{{ design.name }}</td>
<td>
<button class="btn btn-secondary" type="button" data-toggle="collapse" :data-target="'#' + design.identifier" aria-expanded="false" :aria-controls="design.identifier">
<i class="fa fa-plus" aria-hidden="true"></i> Show
</button>
</td>
<td>
<div class="switch">
<input :id="'active'+design.id" v-model="design.active" class="btn-toggle btn-toggle-round-flat" type="checkbox">
<label :for="'active'+design.id"></label>
</div>
</td>
<td>
<button class="btn btn-secondary" type="button">
<i class="fa fa-caret-up" aria-hidden="true"></i>
</button>
<button class="btn btn-secondary" type="button">
<i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
{{ design.sort_order }}
</td>
<td>
<button class="btn btn-secondary" type="button">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
</td>
<td>
<button class="btn btn-secondary" type="button">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
</td>
</tr>
<tr>
<td class="p-0" colspan="7">
<div class="collapse" :id="design.identifier">
<div class="p-3">
{{ design.description }}
</div>
</div>
</td>
</tr>
</template>
You are allowed to group row using multiple <tbody> sections like this:
<table>
<thead>
<tr> ... </tr>
</thead>
<tbody>
<tr> ... </tr>
<tr> ... </tr>
</tbody>
<tbody>
<tr> ... </tr>
<tr> ... </tr>
</tbody>
</table>
You can use this in templates by using a <tbody> as the root element:
<template>
<tbody>
<tr> ... </tr>
<tr> ... </tr>
</tbody>
</template>
Since second tr in your v-design-row contains description of design, I'd suggest that this is whole element and it should occupy one row and have its own layout.
Alternatively, you can have a description separately and all other data in component.
Also, statement
vue requires the template elements to be wrapped in a div
is not quite correct. Template can have any root element while it is a single element. So you can have
<template>
<tr>
</tr>
</template>
or even
<template>
<tr v-if="condition == 1">
</tr>
<tr v-else-if="condition == 2">
</tr>
<tr v-else>
</tr>
</template>
You can use vue-fragment library. It allows you to have wrapper that wont actually be rendered.
https://www.npmjs.com/package/vue-fragment
I already have some html code for an expandable/collapsible table that I am trying to put into a meteor application. code here
My main problem that I am having is that when I am populating the table in the meteor application, it is not creating a new expandable row for each new item in my collection (like the example above). Currently it is only populating one row with all the data from within the collection. (as seen in the picture below)
Here is my meteor code:
<template name="adminPage">
<div class="container">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">Students Waiting</div>
<div class="panel-body">
<table class="table table-condensed table-striped" id="outer-table">
<thead id="top-heading">
<tr>
<th></th>
<th >Name</th>
<th >Phone Number</th>
<th >VIP ID/USC ID</th>
<th >Current Status</th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">
<td>
{{> expandButton}}
</td>
<td>
{{> listName}}
</td>
<td>
{{> listNumber}}
</td>
<td>
{{> listVIP}}
</td>
<td> waiting</td>
</tr>
<tr>
<td colspan="12" class="hiddenRow">
<div class="accordian-body collapse" id="demo1">
<table class="table table-striped">
<thead id="innter-table">
<tr class="info">
<th id="inner-heading">Reason for Visit</th>
<th id="inner-heading">Current Major</th>
<th id="inner-heading">Intended Major</th>
<th id="inner-heading">Comments</th>
<th id="inner-heading"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
{{> listReason}}
</td>
<td>
{{> listCurrent}}
</td>
<td>
{{> listIntended}}
</td>
<td>
{{> listComments}}
</td>
<td>
{{> listDisclaimer}}
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<template name="expandButton">
<button class="btn btn-default btn-xs btn-circle">
<span id="plus" class="glyphicon glyphicon-plus"></span>
</button>
<template name="listName">
{{#each student_name}}
{{Name}}
<br>
{{/each}}
<template name="listNumber">
{{#each student_number}}
{{PhoneNumber}}
<br>
{{/each}}
<template name="listVIP">
{{#each student_ID}}
{{VipID}}
<br>
{{/each}}
<template name="listReason">
{{#each student_Reason}}
{{ReasonForVisit}}
<br>
{{/each}}
<template name="listCurrent">
{{#each student_Current}}
{{CurrentMajor}}
<br>
{{/each}}
<template name="listIntended">
{{#each student_Intended}}
{{IntendedMajor}}
<br>
{{/each}}
<template name="listComments">
{{#each student_Comments}}
{{Comments}}
<br>
{{/each}}
<template name="listDisclaimer">
{{#each student_Disclaimer}}
<button class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal" contenteditable="false">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-trash"></span>
</button>
<br>
{{/each}}
So my main question is how do I go about getting the data from each item in the collection to populate in a new row so that each row is expandable with just the information from that one item?
Also how would I go about setting the data-target and id to a unique value for each item in the collection so that the row only expands for it's corresponding data?
For example:
<tr data-toggle="collapse" data-target="#demo1" class="accordian toggle">
and
<div class="accordian-body collapse" id="demo1">
using something like
<tr data-toggle="collapse" data-target="#(persons id number)" class="accordian toggle">
and
<div class="accordian-body collapse" id="(persons id number)">
Thanks!
You haven't structured your blaze in the right way. What you need to be doing is repeating each row of the table, with the appropriate data in it. Instead what you are doing is repeating each key within the table (which is only printing once).
It looks like you have made a lot of different helpers (student_name, student_number , student_ID, student_Reason, etc.) that each return a different set of student data?
What you want to do is create a single helper that returns the entire student object, then you can access the data within that object in the correct places. An example would be
<tbody>
{{#each student in students}}
<tr data-target="{{student._id}}">
<td>
{{student.name}}
</td>
<td>
{{student.reason}}
</td>
<td>
{{student.number}}
</td>
<td>
{{student.current}}
</td>
</tr>
{{/each}}
</tbody>
The code above is repeating the entire table row (<tr>) for each student object in the array of students that the helper is returning. You are then able to access any part of the student object by using dot notation. Using the structure above you should be able to solve the second half of your problem too.
I am trying to make table in which there are two show/hide buttons for two columns say A and B.. button a and b separately are functioning properly but If i use both in table ... only one of them functions properly other doesn't do anything.. pls hlp me i am new to this
<table datatable="ng" class="row-border hover table table-condensed no-margin">
<thead>
<tr>
<th>#</th>
<th>Username</th>>
<th>Profile</th>
<th>Points</th>
<th>Forcasts Won/Lost</th>
<th>Invites</th>
<th>Referrals</th>
<th>Activity</th>
<th>Most Used Redeemption Gateway</th>
<th>Most Read FAQ</th>
<th>Promo Codes used</th>
<th>Suspend/Unsuspend</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="person in showCase.persons">
<td>{{person.id}}</td>
<td>{{person.uname}}</td>
<td>
<button type="button" class="btn btn-primary" ng-if="person.Profexpanded" ng-click="person.Profexpanded = false;person.Invexpanded=false">Hide</button>
<button type="button" class="btn btn-primary" ng-if="!person.Profexpanded" ng-click="person.Profexpanded = true;person.Invexpanded=false">Show</button>
</td>
<td>{{person.points}}</td>
<td>{{person.forcasts}}</td>
<td style="padding:5px">
<table><tbody>
<tr><td><b>sent: </b></td> <td>{{person.invites[0].sent}}</td></tr>
<tr><td><b>accepted:</b></td> <td>{{person.invites[0].accepted}}</td></tr>
</tbody></table>
</td>
<td>{{person.referrals}}</td>
<td>
<button type="button" class="btn btn-primary" ng-if="person.Invexpanded" ng-click="person.Invexpanded = false;person.Profexpanded = false">Hide</button>
<button type="button" class="btn btn-primary" ng-if="!person.Invexpanded" ng-click="person.Invexpanded = true;person.Profexpanded = false">Show</button>
</td>
<td>{{person.muredempt}}</td>
<td>{{person.mfaq}}</td>
<td>{{person.promocodes}}</td>
<td>{{person.isSuspended}}</td>
</tr>
<tr ng-if="person.Profexpanded" ng-repeat-end="">
<td class = "profile" colspan="5">
Hello A
</td>
</tr>
<tr ng-if="person.Invexpanded" ng-repeat-end="">
<td>Hello B</td>
</tr>
</tbody>
</table>
<!--end .card-body -->
</div>`
Maybe try ng-show instead ng-if <tr ng-show="person.Invexpanded" ng-repeat-end="">
Use
<tr ng-if="person.Profexpanded">
instead of
<tr ng-if="person.Profexpanded" ng-repeat-end="">
I have a table with list elements that I want to be able to skip through using arrow keys. Right now I have to click on the table element border before I can use the arrow keys. If I set tabindex on one of the elements in the loop, it doesn't work. So, how can I focus tabindex on a table element when it is clicked?
<section ng-controller="PlaylistCtrl" >
<table class="table table-striped table-hover " ng-keyup="keyPress($event.keyCode, $index)" tabindex="1">
<thead>
<tr>
<th>
<button type="button" ng-click="toSubmit()" class="btn btn-default">Add resource
</button>
</th>
</tr>
</thead>
<tbody ui-sortable ng-model="result">
<tr ng-repeat="resource in result">
<td ng-class="isSelected(resource)">
<div ng-click="showResource(resource, $index)">
{{resource.name}}
</div>
</td>
<td ng-class="isSelected(resource)" style="width: 15px;"><span class="glyphicon glyphicon-remove" id="sidebarEdit" ng-click="removeResource(resource, $index)"></span></td>
</tr>
</tbody>
</table>
</section>
document.getElementById('table_id').focus();