I am working with the vaadin-grid element (the polymer web component, not the java grid). I see that I can set the number of rows displayed on the grid via the visible-rows attribute. But I can't find a way to get the grid to take up all the available space, i.e. to dynamically set the rows to just what is need to fill the page. The documentation implies this is possible. And the demo expenses app seems to do this as well, though I can't figure out where.
Here is a very simple example that will display 10 rows always, no matter page size.
<head>
<script src="https://cdn.vaadin.com/vaadin-elements/latest/webcomponentsjs/webcomponents-lite.js"></script>
<link href="https://cdn.vaadin.com/vaadin-elements/latest/vaadin-grid/vaadin-grid.html" rel="import">
</head>
<body>
<vaadin-grid>
<table>
<colgroup>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Value</th>
<th>Progress</th>
</tr>
</thead>
<tbody>
<tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
<tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
<tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
<tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
<tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
<tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
<tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
<tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
<tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
<tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
<tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
<tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
<tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
</tbody>
</table>
</vaadin-grid>
</body>
</html>
In addition to using visible-rows attribute, you can use plain CSS to set the height property directly.
You can also use flex like done in the Expense Manager demo.
I've modified your code a bit to give an example how you can use flex property.
<head>
<script src="https://cdn.vaadin.com/vaadin-elements/latest/webcomponentsjs/webcomponents-lite.js"></script>
<link href="https://cdn.vaadin.com/vaadin-elements/latest/vaadin-grid/vaadin-grid.html" rel="import">
</head>
<body style="display: flex; flex-direction: column">
<div id="content" style="flex: 1">
Some Content Here
</div>
<div id="container" style="flex: 3; display: flex">
<vaadin-grid style="flex: 1">
<table>
<colgroup>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Value</th>
<th>Progress</th>
</tr>
</thead>
<tbody>
<tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
<tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
<tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
<tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
<tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
<tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
<tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
<tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
<tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
<tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
<tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
<tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
<tr><td>Project A</td><td>10000</td><td>0.8</td></tr>
</tbody>
</table>
</vaadin-grid>
</div>
</body>
</html>
You can try it live on jsbin here: http://jsbin.com/kigonu/edit?html,css,output
Related
The template is calling the getMaxUnit() function and this renders time. How can assign the value to a variable and subscribe to it a change using setting service observables? I am not able to found a solution for that
public getMaxUnit():Observable<string>{
return of(MaxUnits.Dollars);
}
<div style="display: flex;">
<table style="width:100%;">
<thead>
<tr>
<th>Max</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let maxValue of maxValueTable">
<td> {{ maxValue | numberFormatter: (getMaxUnit() | async)}}</td>
</tr>
</tbody>
</table>
</div>
I have a dynamic data where they have the same floornumber, so i wanna do is every data have a same number will be under a row on their floor. I want to make every row theirs a row, and then under all of that is their units. Is their any library for that? Thanks
const data = [
{floornumber: 1, unitname: '101', unitype: 'basic'},
{floornumber: 1, unitname: '102', unitype: 'basic'},
{floornumber: 1, unitname: '103', unitype: 'basic'},
{floornumber: 2, unitname: '203', unitype: 'basic'},
{floornumber: 2, unitname: '203', unitype: 'basic'}
]
<table>
<thead>
<th>
Floor
</th>
<th>
Unit Name
</th>
<th>
Unit Type
</th>
</thead>
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>blank</td>
<td>101</td>
<td>Basic</td>
</tr>
<tr>
<td>blank</td>
<td>102</td>
<td>Basic</td>
</tr>
<tr>
<td>blank</td>
<td>103</td>
<td>Basic</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>blank</td>
<td>203</td>
<td>Basic</td>
</tr>
<tr>
<td>blank</td>
<td>203</td>
<td>Basic</td>
</tr>
</tbody>
</table>
I don't think there is a library for this because it is a very unique way to present the data.
You must make sure, your data is sorted by floor number. Then I would read the first line and create row set a:
<tr>
<td>1</td>
</tr>
<tr>
<td>blank</td>
<td>101</td>
<td>Basic</td>
</tr>
loop through your data and create row set b:
<tr>
<td>blank</td>
<td>102</td>
<td>Basic</td>
</tr>
until the floor number changes. In this case create row set a again and so on until you are at the end of the data.
I have a table in in an rst file I am hosting on readthedocs that I would like to remove the borders from. Trouble is, nothing I try in the CSS file seems to work. I've looked at several other solutions SO and haven't yet had success.
Here is a (shortened) example of the table in rst (note i've split the columns in the last three rows to create a nesting effect, unsure if this could be causing any complications).
+------------------+-----------------------------+------------+-------------------------------------+
| Parameter | Description | Type | Notes |
+==================+=============================+============+=====================================+
| patrolID | ID of the submitted patrol. | int | Assigned automatically by the patrol|
| | | | app. |
+------------------+-----------------------------+------------+-------------------------------------+
| date | Date the patrol | string | Format is YYYY-MM-DD. |
| | occurred. | | |
+------------------+-----------------------------+------------+-------------------------------------+
| userID | The alias of the individual | string | Matches the user’s Vanguard email |
| | who submitted the patrol. | | alias (For example, MScott). |
+------------------+-----------------------------+------------+-------------------------------------+
| patrolStart | Time the patrol started. | int | Format is 24-hour (Ex: 0700 |
| | | | or 1400). |
+------------------+-----------------------------+------------+-------------------------------------+
| patrolEnd | Time the patrol ended. | int | Format is 24-hour (Ex: 0700 |
| | | | or 1400). |
+------------------+-----------------------------+------------+-------------------------------------+
|perimeterFence | Patrol area. | object | |
+----+-------------+-----------------------------+------------+-------------------------------------+
| |time | Time the area was patrolled.| int | Format is 24-hour (Ex: 0700 |
| | | | | or 1400). |
+----+-------------+-----------------------------+------------+-------------------------------------+
| |incident | Indicates whether anything | boolean | Default value is false. |
| | | unusual was encountered | | |
| | | during the patrol. | | |
+----+-------------+-----------------------------+------------+-------------------------------------+
| |details | Summary of area patrol. | string | When incident is false, the default |
| | | | | value will be "Nothing to report." |
+----+-------------+-----------------------------+------------+-------------------------------------+
Screenshot of how the table looks on readthedocs:
HTML code for the table (I'm unable to change class name or elements with RTD so WYSWG)
<div class="section" id="submit-a-patrol">
<h2><a class="toc-backref" href="#id1">Submit a patrol</a><a class="headerlink" href="#submit-a-patrol" title="Permalink to this headline">¶</a></h2>
<p>URL: POST <a class="reference external" href="https://api.vanguard.com/patrol">https://api.vanguard.com/patrol</a>/{PatrolID}</p>
<p>Adds a patrol report. A successful response requires all listed parameters be included with appropriate values.</p>
<table border="1" class="docutils">
<colgroup>
<col width="4%" />
<col width="14%" />
<col width="31%" />
<col width="13%" />
<col width="39%" />
</colgroup>
<thead valign="bottom">
<tr class="row-odd"><th class="head" colspan="2">Parameter</th>
<th class="head">Description</th>
<th class="head">Type</th>
<th class="head">Notes</th>
</tr>
</thead>
<tbody valign="top">
<tr class="row-even"><td colspan="2">patrolID</td>
<td>ID of the submitted patrol.</td>
<td>int</td>
<td>Assigned automatically by the patrol
app.</td>
</tr>
<tr class="row-odd"><td colspan="2">date</td>
<td>Date the patrol
occurred.</td>
<td>string</td>
<td>Format is YYYY-MM-DD.</td>
</tr>
<tr class="row-even"><td colspan="2">userID</td>
<td>The alias of the individual
who submitted the patrol.</td>
<td>string</td>
<td>Matches the user’s Vanguard email
alias (For example, MScott).</td>
</tr>
<tr class="row-odd"><td colspan="2">patrolStart</td>
<td>Time the patrol started.</td>
<td>int</td>
<td>Format is 24-hour (Ex: 0700
or 1400).</td>
</tr>
<tr class="row-even"><td colspan="2">patrolEnd</td>
<td>Time the patrol ended.</td>
<td>int</td>
<td>Format is 24-hour (Ex: 0700
or 1400).</td>
</tr>
<tr class="row-odd"><td colspan="2">perimeterFence</td>
<td>Patrol area.</td>
<td>object</td>
<td> </td>
</tr>
<tr class="row-even"><td> </td>
<td>time</td>
<td>Time the area was patrolled.</td>
<td>int</td>
<td>Format is 24-hour (Ex: 0700
or 1400).</td>
</tr>
<tr class="row-odd"><td> </td>
<td>incident</td>
<td>Indicates whether anything
unusual was encountered
during the patrol.</td>
<td>boolean</td>
<td>Default value is false.</td>
</tr>
<tr class="row-even"><td> </td>
<td>details</td>
<td>Summary of area patrol.</td>
<td>string</td>
<td>When incident is false, the default
value will be “Nothing to report.”</td>
</tr>
<tr class="row-odd"><td colspan="2">facilityExterior</td>
<td>Patrol area.</td>
<td>object</td>
<td> </td>
</tr>
<tr class="row-even"><td> </td>
<td>time</td>
<td>Time the area was patrolled.</td>
<td>int</td>
<td>Format is 24-hour (Ex: 0700
or 1400).</td>
</tr>
<tr class="row-odd"><td> </td>
<td>incident</td>
<td>Indicates whether anything
unusual was encountered
during the patrol.</td>
<td>boolean</td>
<td>Default value is false.</td>
</tr>
<tr class="row-even"><td> </td>
<td>details</td>
<td>Summary of area patrol.</td>
<td>string</td>
<td>When incident is false, the default
value will be “Nothing to report.”</td>
</tr>
<tr class="row-odd"><td colspan="2">facilityInterior</td>
<td>Patrol area.</td>
<td>object</td>
<td> </td>
</tr>
<tr class="row-even"><td> </td>
<td>time</td>
<td>Time the area was patrolled.</td>
<td>int</td>
<td>Format is 24-hour (Ex: 0700
or 1400).</td>
</tr>
<tr class="row-odd"><td> </td>
<td>incident</td>
<td>Indicates whether anything
unusual was encountered
during the patrol.</td>
<td>boolean</td>
<td>Default value is false.</td>
</tr>
<tr class="row-even"><td> </td>
<td>details</td>
<td>Summary of area patrol.</td>
<td>string</td>
<td>When incident is false, the default
value will be “Nothing to report.”</td>
</tr>
</tbody>
</table>
<p><strong>Responses</strong></p>
<table border="1" class="docutils">
<colgroup>
<col width="21%" />
<col width="79%" />
</colgroup>
<thead valign="bottom">
<tr class="row-odd"><th class="head">Code</th>
<th class="head">Description</th>
</tr>
</thead>
<tbody valign="top">
<tr class="row-even"><td>200</td>
<td>Successful operation.</td>
</tr>
</tbody>
</table>
Finally the CSS I currently have.
div.section table, td
{
white-space: normal !important;
}
div.section tbody, tr, td
{
border: none;
}
div.section thead, th
{
color: #FFFFFF;
background-color: #4472C4;
}
div.section tr.row-odd
{
background-color: #D9E2F3;
}
I've tried targeting table, tbody, .docutils, and other permutation and haven't been able to do anything to effect the border, though all the other CSS entries do what they're supposed to. Any ideas would be welcome.
I cannot replicate the issue in this JSFiddle.
I suspect you have not added your custom CSS file to conf.py.
conf.py
# These folders are copied to the documentation's HTML output
html_static_path = ['_static']
# These paths are either relative to html_static_path
# or fully qualified paths (eg. https://...)
html_css_files = [
'css/custom.css',
]
div.section table, td
{
white-space: normal !important;
}
div.section tbody, tr, td
{
// border: none;
}
div.section thead, th
{
color: #FFFFFF;
background-color: #4472C4;
}
div.section tr.row-odd
{
background-color: #D9E2F3;
}
<div class="section" id="submit-a-patrol">
<h2><a class="toc-backref" href="#id1">Submit a patrol</a><a class="headerlink" href="#submit-a-patrol" title="Permalink to this headline">¶</a></h2>
<p>URL: POST <a class="reference external" href="https://api.vanguard.com/patrol">https://api.vanguard.com/patrol</a>/{PatrolID}</p>
<p>Adds a patrol report. A successful response requires all listed parameters be included with appropriate values.</p>
<table border="1" class="docutils">
<colgroup>
<col width="4%" />
<col width="14%" />
<col width="31%" />
<col width="13%" />
<col width="39%" />
</colgroup>
<thead valign="bottom">
<tr class="row-odd"><th class="head" colspan="2">Parameter</th>
<th class="head">Description</th>
<th class="head">Type</th>
<th class="head">Notes</th>
</tr>
</thead>
<tbody valign="top">
<tr class="row-even"><td colspan="2">patrolID</td>
<td>ID of the submitted patrol.</td>
<td>int</td>
<td>Assigned automatically by the patrol
app.</td>
</tr>
<tr class="row-odd"><td colspan="2">date</td>
<td>Date the patrol
occurred.</td>
<td>string</td>
<td>Format is YYYY-MM-DD.</td>
</tr>
<tr class="row-even"><td colspan="2">userID</td>
<td>The alias of the individual
who submitted the patrol.</td>
<td>string</td>
<td>Matches the user’s Vanguard email
alias (For example, MScott).</td>
</tr>
<tr class="row-odd"><td colspan="2">patrolStart</td>
<td>Time the patrol started.</td>
<td>int</td>
<td>Format is 24-hour (Ex: 0700
or 1400).</td>
</tr>
<tr class="row-even"><td colspan="2">patrolEnd</td>
<td>Time the patrol ended.</td>
<td>int</td>
<td>Format is 24-hour (Ex: 0700
or 1400).</td>
</tr>
<tr class="row-odd"><td colspan="2">perimeterFence</td>
<td>Patrol area.</td>
<td>object</td>
<td> </td>
</tr>
<tr class="row-even"><td> </td>
<td>time</td>
<td>Time the area was patrolled.</td>
<td>int</td>
<td>Format is 24-hour (Ex: 0700
or 1400).</td>
</tr>
<tr class="row-odd"><td> </td>
<td>incident</td>
<td>Indicates whether anything
unusual was encountered
during the patrol.</td>
<td>boolean</td>
<td>Default value is false.</td>
</tr>
<tr class="row-even"><td> </td>
<td>details</td>
<td>Summary of area patrol.</td>
<td>string</td>
<td>When incident is false, the default
value will be “Nothing to report.”</td>
</tr>
<tr class="row-odd"><td colspan="2">facilityExterior</td>
<td>Patrol area.</td>
<td>object</td>
<td> </td>
</tr>
<tr class="row-even"><td> </td>
<td>time</td>
<td>Time the area was patrolled.</td>
<td>int</td>
<td>Format is 24-hour (Ex: 0700
or 1400).</td>
</tr>
<tr class="row-odd"><td> </td>
<td>incident</td>
<td>Indicates whether anything
unusual was encountered
during the patrol.</td>
<td>boolean</td>
<td>Default value is false.</td>
</tr>
<tr class="row-even"><td> </td>
<td>details</td>
<td>Summary of area patrol.</td>
<td>string</td>
<td>When incident is false, the default
value will be “Nothing to report.”</td>
</tr>
<tr class="row-odd"><td colspan="2">facilityInterior</td>
<td>Patrol area.</td>
<td>object</td>
<td> </td>
</tr>
<tr class="row-even"><td> </td>
<td>time</td>
<td>Time the area was patrolled.</td>
<td>int</td>
<td>Format is 24-hour (Ex: 0700
or 1400).</td>
</tr>
<tr class="row-odd"><td> </td>
<td>incident</td>
<td>Indicates whether anything
unusual was encountered
during the patrol.</td>
<td>boolean</td>
<td>Default value is false.</td>
</tr>
<tr class="row-even"><td> </td>
<td>details</td>
<td>Summary of area patrol.</td>
<td>string</td>
<td>When incident is false, the default
value will be “Nothing to report.”</td>
</tr>
</tbody>
</table>
<p><strong>Responses</strong></p>
<table border="1" class="docutils">
<colgroup>
<col width="21%" />
<col width="79%" />
</colgroup>
<thead valign="bottom">
<tr class="row-odd"><th class="head">Code</th>
<th class="head">Description</th>
</tr>
</thead>
<tbody valign="top">
<tr class="row-even"><td>200</td>
<td>Successful operation.</td>
</tr>
</tbody>
</table>
I have a WCF service and and we had to generate a records of clients who have consumed free credit.
I have generated that records but now clients with same login ID's are repeating in the records.
I dnt want to display the login ID again but want to display all the numbers they have called.
Here is the code of my view
#model IEnumerable<MyYello.Admin.Models.CallHistory>
#{ViewBag.Title = "UsersWhoHaveConsumedFreeCredit";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Users Who Have Consumed Free Credit</h2>
<table class="table table-striped table-bordered tablesorter" style="display: block">
<thead>
<tr>
<th>Login</th>
<th>FirstName</th>
<th>LastName</th>
<th>Email</th>
<th>Country</th>
<th>Phone</th>
<th>TarrifDesc</th>
<th>CalledNum</th>
<th>CallStart</th>
<th>CallEnd</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>#item.Login</td>
<td>#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.Email</td>
<td>#item.Country</td>
<td>#item.Phone</td>
<td>#item.TariffDescription</td>
</tr>
}
#if (!Model.Any())
{
<tr>
<td colspan="14">No Record Found</td>
</tr>
}
</tbody>
</table>
Just need an idea how
You should group by user login first then. Here's an example:
#foreach (var group in Model.GroupBy(history => history.Login))
{
var item = group.First();
<tr>
<td>#item.Login</td>
<td>#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.Email</td>
<td>#item.Country</td>
<td>#string.Join(" - ", group.Select(history => history.Phone))</td>
<td>#item.TariffDescription</td>
</tr>
}
I've got an HTML table of which I cannot depend on how many rows and/or columns it will contain - so using index numbers is not possible. Here is an example of the table:
|Name|Description|Credit|Balance|
|Bob | Rent |400.00|1000.00|
|Jim | Car |100.00|4000.00|
Here is the HTML:
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Credit</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bob</td>
<td>Rent</td>
<td>400.00</td>
<td>1000.00</td>
</tr>
<tr>
<td>Jim</td>
<td>Car</td>
<td>100.00</td>
<td>4000.00</td>
</tr>
</tbody>
</table>
I need to get the credit amount for which ever name I need.
Got it:
//tr[td[.="Jim"]]/td[count(ancestor::table/thead/tr/th[.="Credit"]/preceding-sibling::*)+1]