My data model is a matrix with several rows, some of those rows have detail information that I would like to show using the Clarity Datagrid Expandable Rows. Here is a simple version of what I am trying to build:
<clr-datagrid>
<clr-dg-column>Artifact</clr-dg-column>
<clr-dg-column>Category</clr-dg-column>
<clr-dg-row>
<clr-dg-cell>AAA</clr-dg-cell>
<clr-dg-cell>111</clr-dg-cell>
<ng-container *ngIf="true">
<clr-dg-row-detail *clrIfExpanded>
<clr-dg-cell>BBB</clr-dg-cell>
<clr-dg-cell>222</clr-dg-cell>
</clr-dg-row-detail>
</ng-container>
</clr-dg-row>
<clr-dg-row>
<clr-dg-cell>CCC</clr-dg-cell>
<clr-dg-cell>333</clr-dg-cell>
</clr-dg-row>
</clr-datagrid>
I was expecting to see something like the following:
Unfortunately this is the result that I am getting:
This issue happen when I wrap the clr-dg-row-detail with any element (e.g. div, ng-container etc). I need a wrap element to put a conditional expression because not every row has detail info.
Does anyone has a suggestion to do that?
You need to use ngProjectAs, which is not documented so there wasn't much you could do other than asking.
This is what it looks like:
<ng-container ngProjectAs="clr-dg-row-detail" *ngIf="true">
<clr-dg-row-detail *clrIfExpanded>
<clr-dg-cell>BBB</clr-dg-cell>
<clr-dg-cell>222</clr-dg-cell>
</clr-dg-row-detail>
</ng-container>
Related
Im having problem while testing that correct values are present inside data-table element. Im using Selenium2Library and Robot Framework 3.0 version.
Im using this code to check the values inside element
: FOR ${item} IN #{elements} INFO console=yes
\ Wait Until Keyword Succeeds 10 1 Element Should Be Visible
//th[contains(text(),"${item}")] Header not found: ${item}
#{elements} is just a list of column values. It find first two column values and the last value fine when there is no more than one space between the column value. Other column values has spaces and '-' marks. I tried copying the direct value from Developer Console but it didn't help.
Element structure is:
<table class="data-table">
<thead><tr class="odd"><th class="top-left" id="col1">Number-one</th>
<th id="col2">Second-number-column</th>
<th id="col3">Temporary number y-identification</th>
<th id="col4">Temporary numbertwo identification</th>
<th id="col5">Temporary numberthree identification</th>
<th class="top-right" id="col5">Number four</th>
</tr>
</thead>
</table>
Cant put the real column data there but its constructed like that. Problematic values are:
<th id="col3">Temporary number y-identification</th>
<th id="col4">Temporary numbertwo identification</th>
<th id="col5">Temporary numberthree identification</th>
Try normalizing by space in xpath,
: FOR ${item} IN #{elements} INFO console=yes
\ Wait Until Keyword Succeeds 10 1 Element Should Be Visible
//th[contains(normalize-space(text()),"${item}")] Header not found: ${item}
I am trying to output a table using handlebars.
Right now it loops through the each row, and then through each column, but how can I grab the data from the row based on {{col.name}}?
See here, I need to get COLUMNNAME from {{col.name}}
{{#rows as |row|}}
<tr>
{{#../cols as |col|}}
<td>{{row.COLUMNNAME}}</td>
{{/../cols}}
</tr>
{{/rows}}
In js this would be like row[index][col.name];
Any idea for solutions?
Found the answer, it's the lookup tag.
{{lookup row col.name}}
is equal to
row[col.name]
I have a table where I need to apply two different classes, using expressions.
1st class is applied based on following expression.
{'Up':'class-up', 'Down':'class-down'}[a.status]
and 2nd class is applied based on bold: !a.read
The classes here are class-up, class-down, bold.
So how should be the expression framed? I tried:
<tr ng-repeat="a in all" ng-class="{{'Up':'class-up', 'Down':'class-down'}[a.status],bold: !a.read}">
<tr ng-repeat="a in all" ng-class="{'Up':'class-up', 'Down':'class-down'}[a.status],bold: !a.read">
But I keep getting errors in console. What is the correct format to apply these classes based on the given expressions
With the clarification from your comment:
<tr ng-repeat="a in all" ng-class="{'class-up': a.status=='up', 'class-down': a.status=='down', 'bold': !a.read}">hello world</tr>
reStructuredText has nice support for option lists. For example, rst2html.py translates this RST markup
Options:
--foo does a foo
-b, --bar ABAR bar something
into the following nicely formatted HTML table:
<dt>Options:</dt>
<dd><table class="first last docutils option-list" frame="void" rules="none">
<col class="option" />
<col class="description" />
<tbody valign="top">
<tr><td class="option-group">
<kbd><span class="option">--foo</span></kbd></td>
<td>does a foo</td></tr>
<tr><td class="option-group">
<kbd><span class="option">-b</span>, <span class="option">--bar <var>ABAR</var></span></kbd></td>
<td>bar something</td></tr>
</tbody>
</table>
</dd>
This doesn't seem to extend naturally to positional arguments, however; for example
Arguments:
foo does a foo
bar ABAR bar something
renders as HTML completely lacking a table structure:
<dt>Arguments:</dt>
<dd>foo does a foo
bar ABAR bar something</dd>
Is there some way to produce an options list table for command line arguments that are not prefixed by dashes or slashes?
Yup. The rather limited syntax of option lists is not very well documented here:
http://docutils.sourceforge.net/docs/ref/rst/restructuredtext.html#option-lists
Here's the really irritating thing. Say you are writing up a series of options and some of them fit the syntax of an "option" per the preceding link, but some do not. For example --opt==keyword does (and "keyword" will be italicized whether you want it or not), but --pot=BLACK|KETTLE doesn't. Docutils will put all the ones that fit their syntax into a nice option-list <table> template, but where they don't, it drops out of the table format and codes them as standard <dl>s. So right in the middle of your stack of options are a couple that don't look like the others.
Pardon if this is very basic. I have been trying to traverse each cell including header cells in an array of rows. Is there an OR operator I can use in the Nokogiri CSS selector?
thang= Nokogiri::HTML(IO.read "|cat page.html").css('table[#id="costbasisTable"] tr')
Correctly fetches all rows including a header row (which repeats on subsequent pages):
thang[0].inner_html
=> <th class="tLeft"></th><th>cellA2</th><th>cellA3data</th>
thang[1].inner_html
=> <td>cellB1</td><td>cellB2</td><td>cellB3data</td>
The trouble is with the following, which may return blank if that row contains only th's not td's:
N=0
thang[N].css("td").map{|c| c.text.strip.gsub(/\t.*/,"").delete ",".tr("&/|:;\n","_")}.to_a
What parameter to .css(...) will mean "match any <td> OR <th> cell"?
Is this possible/better done with .xpath() instead for these Nokogiri XML Elements?
You want to use either of the following:
# thang[n] is a Nokogiri <tr> node
cells = thang[n].css('th,td')
cells = thang[n].xpath('./th | ./td')
Note that the CSS version will match any embedded tables (if you had such a horror) while the XPath version will only match direct children of the row.