I want to give link to an entire row.
I searched several examples but they all have given link to a single <td>.
Here is what I have tried:
<table class="table">
<thead>
<tr>
<th>Leave Type</th>
<th>Approved Leaves</th>
<th>Balance Leaves</th>
</tr>
</thead>
<tbody>
{{#each}}
<tr>
<td>{{#link-to 'pastrequests' this}}{{leavetypes}}{{/link-to}}</td>
<td>{{approvedleaves}}</td>
<td>{{balanceleaves}}</td>
</tr>
{{/each}}
</tbody>
</table>
You should place the link on the tr element. Don't forget to specify the tagName:
<tbody>
{{#each}}
{{#link-to 'pastrequests' this tagName='tr'}}
<td>{{leavetypes}}</td>
<td>{{approvedleaves}}</td>
<td>{{balanceleaves}}</td>
{{/link-to}}
{{/each}}
</tbody>
{{#link-to 'pastrequests' this}}
should be on the 'tr' not on 'td.
Related
I want to display table with basic informations about products, and add hyperlink to cells in column "Product name" after clicking which you will be redirected to more detailed description of product with possibility to edtiing, deleting it etc.
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">Product name</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
{% for element in object %}
<tr>
<td><div class="btn active"><i class="fa fa-check"></i></div></td>
<td>
<a href="{% url 'prod_desc' pk:element.pk %}">
{{element.name|lower|capfirst}}
</a>
</td>
<td>
{{element.price}}
</td>
</tr>
{% endfor %}
</tbody>
</table>
How can I connect hiperlink with product name in table?
In case is there any walk-around solution ?
Is there any restriction about inserting hyperlink in html in general or it's a "Django thing" ?
The problem was in passing primary key of element I used ":" like in dictionary key:value instead of "="
<a href="{% url 'prod_desc' pk=element.pk %}">
{{element.name|lower|capfirst}}
</a>
I would like to test the sortable table with Cypress.io
I follow their page instruction: https://docs.cypress.io/api/commands/trigger.html#Mouse-Events
and it doesn't work...
First: it doesn't move the element
Second: when I see the step by step test on the left side, mouse down and mouse move are located in the same position...
my test
cy.get('.resource-filter-table')
.trigger('mousedown', {witch:1, pageX:188, pageY:196})
.trigger('mousemove', {witch:1, pageX:188, pageY:261})
.trigger('mouseup')
my html
<table class="table table-borderless resource-filter-table">
<thead>
<th scope="col"><input type="checkbox" checked=True class="resourceFilterElementAll" onchange="checkAllResources(this)"></th>
<th scope="col">Line</th>
</thead>
<tbody>
{% for linija in user_lines %}
<tr>
<th><input type="checkbox" checked=True class="resourceFilterElement" onchange="filterOfResources()" id="{{linija.pk}}"></th>
<th class="filter-list-element">{{ linija.line_name}} <i class="filter-list-icon material-icons">drag_handle</i></th>
</tr>
{% endfor %}
</tbody>
</table>
I am forming a Table dynamically using Ember
How can i use nested if while forming the table
Something like this
{{#if ismorethanone && model.hasSize}}
<td> Hai </td>
{{else}}
<td> Bye </td>
{{/if}}
My code
<script type="text/x-handlebars" data-template-name="index">
<table class="table table-striped table-condensed">
<thead>
<tr>
<th>Participant</th>
</tr>
</thead>
<tbody id="ParticipantList">
{{#each person in model}}
<tr>
<td> {{person.name}}</td>
<td> {{person.city}}</td>
{{#if ismorethanone}}
<td><img src="image.jpg" alt="Remove" {{action "removeUser" person.name}}></td>
{{/if}}
</tr>
{{/each}}
</tbody>
</table>
</script>
http://jsfiddle.net/6Evrq/1937/
Either use ember-truth-helpers:
{{#if (and ismorethanone && model.hasSize)}}
foo
{{else}}
bar
{{/if}
or just nest the ifs:
{{#if foo}}
{{#if bar}}
one
{{else}}
two
{{/if}}
{{/if}}
I have the following Ember template;
{{#with model}}
<h2>Order #{{id}}</h2>
<table>
<thead>
<tr>
<th>Outlet</th>
<th>Date</th>
<th>Link</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{outlet}}</td>
<td>{{date}}</td>
<td>{{#link-to 'next-route' this}}Go{{/link-to}}</td>
</tr>
</tbody>
</table>
{{/with}}
<hr>
{{outlet}}
How to do I keep Ember from using the first {{outlet}} (which is just the property's name) to add the next view I'm transitioning to?
outlet is a reserved word, that being said, if you fully qualify it it will work.
In your case, with the with block you can't fully qualify it, but if you remove the with block it will work.
Personally I'd avoid using it, it's analogous to having a variable named for or if
<h2>Order #{{id}}</h2>
<table>
<thead>
<tr>
<th>Outlet</th>
<th>Date</th>
<th>Link</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{model.outlet}}</td>
<td>{{date}}</td>
<td>{{#link-to 'next-route' this}}Go{{/link-to}}</td>
</tr>
</tbody>
</table>
<hr>
{{outlet}}
I understand the restriction in dart webui and <template> items.
I.E: one can get around this restriction to use templates for tables thusly:
<table>
<tbody iterate="row in rows">
<tr iterate="cell in row">
<td> {{cell}} </td>
</tr>
</tbody>
</table>
However. How is one supposed to use templates when the table should have mutiple tbody sections (e.g: http://jsfiddle.net/umRJr/ )
I.E:
<table>
<thead><tr><td>title</td></tr></thead>
<template iterate="section in sections"> <!-- can't do this... :-( -->
<tbody iterate="row in section">
<tr iterate="cell in row">
<td> {{cell}} </td>
</tr>
</tbody>
</template>
</table>
Because we want something like
<table>
<thead> ... some headers here </thead>
<tbody> .. content1 .. </tbody>
<tbody> .. content2 .. </tbody>
...
<tbody> .. content N .. </tbody>
</table>
?
To officially answer, "soon". :) See https://github.com/dart-lang/html5lib/issues/46