I have a table representing data in a database and I'd like there to be checkboxes to the left so that the user can do operations on the selected items (ie delete, modify). My question is, how can I align the checkboxes to be to the left of the table?
<table border="2">
<tr>
<th>A bunch of headers</th>
</tr>
<tr>
<td>A row of items</td>
</tr>
A lot more rows
</table>
Pretty straitforward, I have no idea how to proceed with checkboxes, I tried to put a form around the table but that didn't work.
You can add a column that contains checkboxes only. Using td elements, they will be left-aligned by default.
However, checkboxes should be used to provide a control for selecting or not selecting some parameters, not for triggering actions. Consider using e.g. button elements for actions.
Use CSS to align them.
margin-left:100px;
float:left;
You could just create an "actions" column which you insert as the first column in your table that contains the checkboxes. That way all checkboxes are kept separate from the contents which makes formatting and manipulation via javascript easier.
Alternatively if you must use a form for each row you could do something like:
<td><input type="checkbox" /><span>Data...</span></td>
... but if you go the second route you loose the power of tables** & may as well go for a div only solution.
** for displaying tabular data; before someone shoots me down for table vs div for layouts.
Related
I'm forcing the problem that I have to set up a visualforce page rendered as pdf, which outputs a automatically generated invoice. Because of intern workflows this page has to be set up to the Opportunity object.
Most of the fields used are taken from the Opportunity object itself and work fine.
But I also need access to the OpportunityLineItem fields to display the products on the invoice.
How can this be realized? Do I have to write a controller extension in apex or is it possible without?
As an alternative, would this eventually be possible with cross formula fields referring from Opportunity to OpportunityLineItem? I tried this, but could not find any possibility to select OpportunityLineItem in a formula field in the Opportunity object.
Any help is much appreciated. Thanks!!
Below is a sample page accessing the OpportunityLineItems for a given Opportunity using the standard controller ammended from this doc reference.
<apex:page standardController="Opportunity">
<table border="0" >
<tr>
<th>Description</th><th>Quantity</th>
<th>Unit Price</th><th>Name</th>
</tr>
<apex:repeat var="oli" value="{!Opportunity.OpportunityLineItems}">
<tr>
<td>{!oli.Description}</td>
<td>{!oli.quantity}</td>
<td>{!oli.unitprice}</td>
<td>{!oli.Name}</td>
</tr>
</apex:repeat>
</table>
</apex:page>
With respect to formula fields, you cannot access child fields in a formula on the parent for the simple reason that it is a one to many relationship. The parent Opportunity would not know which of the children to lookup to.
The best you can do is make a regular (text or whatever) field, run a Process Builder triggered by a change to the relevant field(s) on the parent (opportunity) and trigger a Flow to loop over the children (LineItems) and make the changes to the parent based on some condition you specify.
Normally angular material table groups radio buttons column wise, How can I achieve row wise grouping?
As per the angular material documentation on radio groups it states that
Radio-buttons should typically be placed inside of an
<mat-radio-group> unless the DOM structure would make that
impossible (e.g., radio-buttons inside of table cells).
So if you want to have a radio button group per row, then you would just use the name property to group these controls together (exactly how you would for an HTML input type="radio").
<tr>
<td></td>
<td>
<p>Escalation Teams</p>
</td>
<td>
<mat-radio-button value="1" name="escalationTeam"></mat-radio-button>
</td>
<td>
<mat-radio-button value="2" name="escalationTeam"></mat-radio-button>
</td>
</tr>
See my Stackblitz example as shown below:
Notice how for each row you can only check one radio at a time
I don't understand what you want to do. Do you want a column of radio buttons in a single table cell, or multiple rows each with a single radio button in the same column (this doesn't seem likely)? The image shows radio buttons in separate data columns in the same row. You can't have multiple data columns appear in a single view column and and row, so you would need a single data column contain the selected option, and the view for that cell to lay out the various radio options in a vertical format. Here is a stackblitz example.
I am using bootstrap to display and sort a table. I was wondering how/if I could implement a temporary arrow(or something) in each header in the table to indicate which direction it is being sorted.
Yes this is possible. For the header, add the following...
<table>
<thead>
<tr>
<th>Column 1 <span class="glyphicon glyphicon-sort"></th>
...
</tr>
</thead>
</table>
EDIT: I assume you actually want the icon to sort the table, as well.
This is dynamic behavior, so you won't be able to do this in pure HTML/CSS: you will need to use JavaScript. Here are the general steps that you would do to make this happen:
Store all of the table rows inside of a JavaScript variable
Inside the <th>, place another element, like a <span> or <img> that contains your arrow image.
Attach a click handler to the arrow, that sorts the array of table rows
After the array is sorted, use DOM API functions to remove the old table, create a new table, and then insert a new table in its place. Bootstrap usually is used with jQuery, so you can look at some jQuery functions to remove the table, build a new one (by going through the rows), and then render the built table to the page, in place of the old one.
There are a variety of libraries that do this, but you can accomplish it more simply by doing it yourself.
Screent shot is Available in following given screen shot.
I infact want to create the bill in html so user can create bill from view.
How this is possible?
This is very easily doable through bootstrap. Based on the screenshot you provided, you can create the initial 'container' div element within the body. Afterwards you can then create two rows, one for the 'date' 'to' and 'bill no'. This row can have a col-md-3 for the 'date', a col-md-6 for the 'to' and a col-md-3' for the 'bill no'. This will make it responsive and will keep you from ideally having to manually do much padding to get things aligned.
For the table, you can simply add a table element and add a bootstrap class of table, which is 'class="table"'.
Here is a link to the bootstrap grid system for guidance on how to do your rows/columns: http://getbootstrap.com/css/
Here is the link for doing your bootstrap dropdown for the 'to' and the tables: http://getbootstrap.com/components/
You have to insert a textbox inside the cell(column)-
here is the code-
<table>
<tr>
<td><input type="text"></td>
</tr>
</table>
It will insert a textbox inside the cell.
I need to disable (not hide) a single table row in a table with at least two rows. I've been searching for how to do it, but everything I've found tells me how to hide the row. I need to actually disable it so that the result is not submitted.
I'm using a template row and cloning when users add rows. On submit, the hidden template and the rows with actual data are all submitted. The database save fails because the hidden row doesn't pass validation.
<tr class="template" style="display:none">
<!-- This is the row to be copied and unhidden to add to the table -->
<td>company</td>
<td>department</td>
<td>line</td>
<td>account</td>
</tr>
It looks to me like you are going to duplicate the table row over and over again to create the table structure with javascript or something. Options:
You could remove the row from the DOM before submission or
jQuery('tr.template').remove();
you could select all the rows except it to submit
jQuery('table tr').not('tr.template').submit();
I personally do not think it is possible to have a table without rows, perhaps you mean you want to stylise your website without using a table?
If that is the case, then if your not already, set up a css file, with this you can edit and manipulate blocks for your website. ( I would post screenshots but my reputation isn't up yet ^-^ )