I have the following table:
<vaadin-grid id="temp" style=" height:70vh;">
<table>
<colgroup>
<col name="Column1"/>
<col name="ColumnTime"/>
</colgroup>
<thead>
<tr>
<th >Column1</th>
<th >ColumnTime</th>
</tr>
</thead>
</table>
</vaadin-grid>
and my datasource:
{
"Column1": "My Name",
"ColumnTime": "<iron-icon icon='image:timelapse' style='cursor:pointer'></iron-icon>"
}
The problem is that the Vaadin-Grid does not deploy the Iron-Icon:
I have noticed that it is because it is within a SPAN element; Which is automatically added by Vaadin, any idea how to make the Iron-Icon deploy?
You can also use Data Renderers: https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-grid/demo/formatting.html
You could try the HTML Renderer:
grid.getColumn("ColumnTime").setRenderer(new HtmlRenderer());
Please take a look at the upcoming v2.0.0 with actual template support.
https://cdn.vaadin.com/vaadin-grid/2.0.0-alpha1/demo/
Related
I have a web app, front end has a bootstrap table, whose data rendered from Django rest framework.
As the data is rendered using data-field, it only has table header, does not have table column.
I want to make some some column editable but some not, but but failed to do so. The contenteditable='true'/'false' flag does not function on a column level.
How could I make some column editable but some not？
<table contenteditable='true' class="table table-bordered table-sm" width="100%" cellspacing="0" style="font-size: 1.0rem;"
id="bk-table"
data-toggle="table"
data-toolbar="#toolbar"
data-cookie="true"
data-cookie-id-table="materialId"
data-show-columns="true"
data-show-refresh="true"
data-show-fullscreen="true"
data-height="650"
data-click-to-select="true"
data-id-field="id"
data-show-footer="true"
data-url="/api/materials/"
data-query-params="queryParams"
data-remember-order="true"
data-pagination="true"
data-side-pagination="client"
data-total-field="count"
data-data-field="results">
<thead class="thead-dark" >
<tr contenteditable='true'>
<th data-field="state" data-checkbox="true"></th>
<th data-field="type">Course Type</th>
</tr>
</thead>
</table>
use bootstrap table plugin "x-editable" to make a column editable or non-editable use
data-editable="true" data-editable="false" respectively on <tr>
for example
<table id="my_table_id"
<thead>
<tr>
<th class="col-md-1">#</th>
<th class="col-md-4" data-editable="true">Name</th>
<th class="col-md-7" data-editable="false">Description</th>
</tr>
</thead>
</table>
Iv been trying to create an angularJS component for constructing a dynamic html table from a provided array.
The components template includes some ng-transclude directives as 'placeholders'/slots for templates provided by the component consumer.
Is it possible to transclude a <tr> template (with nested <th>), to be used inside the table <thead>?
I have tried using all variations for transclution:
transclude: true, transclude: 'element'
and transclude: { header: 'header'}
(the third option seems as the most suitable, as I will eventually required multiple elements to be transcluded).
Component:
app.component("virtualTable", {
bindings: {
someArray: "<"
},
transclude: {
header: "header"
},
templateUrl: () => {
return "/app/components/virtual-table.component.html";
});
Component Template:
<div>
<table>
<thead>
<tr ng-transclude="header"></tr>
</thead>
<tbody>
<tr ng-repeat="item in vt.someArray">
...another place for transclution...
</tr>
</tbody>
</table>
</div>
Consuming HTML (component declaration):
<virtual-table some-array="vm.personList">
<header>
<th>First Column</th>
<th>Second Column<th>
</header>
</virtual-table>
I excpect the compiled DOM to look like this:
<table>
<thead>
<tr>
<th>First Column</th>
<th>Second Column</th>
</tr>
</thead>
...
But instead I get the innerHTML of the transcluded element (header) as Text:
<table>
<thead>
<tr ng-transclude="header">
<header class="ng-scope">
First Column
Second Column
</tr>
</header>
...
I Suspect the browser (chrome 76) to somehow strip the <tr> tags from the transcluded element before it is being provided to the component (as it illegal us to use <tr> outside of a <table>).
I would like to maintain an html table structure.
Is The Any Way to Solve This?
I am display large set of data content in table using ng-repeat and it contains only one <tr> element. I am trying to display odd row in one color and even row in another color. I am not getting how to display the striped color for single row by making use of ng-repeat. Please let me know where I am going wrong.
HTML:
<thead class="rowhead">
<tr>
<th class="mid">Sl.</th>
<th id="tnm">Name</th>
<th class="mid">Age</th>
<th class="mid">Members</th>
<th class="mid">View-content</th>
<th class="mid">on-going-Process</th>
</tr>
</thead>
<tbody ng-repeat="info in cspinfo">
<tr class="clr">
<td>{{$index+1}}</td>
<td id="bnm">{{info.name}}</td>
<td>{{info.age}}</td>
<td>{{info.member}}</td>
<td>{{info.View-content}}</td>
<td>{{on-going-Process}}</td>
</tr>
</tbody>
You can directly select the odd and even rows of table using the selector in css and apply style you need. You don't have to worry about the applying class to each row you create using ng-repeat.
tr:nth-child(odd){
background-color: #yourcolor
}
tr:nth-child(even){
background-color: #yourcolor
}
Here you can read more about css selectors https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child
In your css define a rule for the style. Then in your html:
<tbody>
<tr class="clr" ng-class="{style-created: $index % 2 === 0}" ng-repeat="info in cspinfo">
<td>{{$index+1}}</td>
<td id="bnm">{{info.name}}</td>
<td>{{info.age}}</td>
<td>{{info.member}}</td>
<td>{{info.View-content}}</td>
<td>{{on-going-Process}}</td>
</tr>
</tbody>
I have a question about XPath and the nodeset repeater (XForms).
As you can see in the following code snippet I want to change an attribute of a specific entry of a list and additionally an attribute in the following entry in the nodeset with a trigger.
The first <xf:action> works fine but the second does not. What I want here is to leave the current nodeset of the processinstance, go to the following one and change the attribute state here. How do I realize that with XPath?
<div>
<xf:model>
<xf:instance xmlns="" id="template">
<project id="">
<name/>
...
<processinstance>
<name>
<state>
</processinstance>
</project>
</xf:instance>
</xf:model>
....
<!-- Process repeat table -->
<div>
<table class="table table-hover">
<thead>
<th width="50%">Processname</th>
<th width="50%">State</th>
<th width="50%">Action</th>
</thead>
<tbody id="process-repeat" xf:repeat-nodeset="//project[index('project-repeat')]/processinstance">
<tr>
<td>
<xf:output ref="name"/>
</td>
<td>
<xf:output ref="state"/>
</td>
<td>
<xf:group ref=".[state eq 'in processing']">
<xf:trigger appearance="minimal">
<xf:label>finish process</xf:label>
<xf:action>
<xf:setvalue ref="state">finished</xf:setvalue>
</xf:action>
<!-- THE FOLLOWING DOES NOT WORK AS I WANT! -->
<xf:action>
<xf:setvalue ref="//project[index('project-repeat')]/processinstance[index(process-repeat)+1]">in process</xf:setvalue>
</xf:action>
</xf:trigger>
</xf:group>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Best regards,
Felix
One thing is that you have a typo:
index(process-repeat)
vs.
index('process-repeat')
In addition, the index() function represents the currently selected, in the UI, repeat iteration. It does not represent the current iteration being evaluated in XPath.
The bottom line is that you cannot use index('process-repeat') to identify the current repeat iteration. It is a common misunderstanding of the index() function.
Some implementations have functions to identify the current repeat iteration. I assume you are using BetterFORM, and I don't know if it has such a function. With Orbeon Forms you could write:
//project[index('project-repeat')]/processinstance[xxf:repeat-position()]
Or better, if betterFORM supports variables, you could use that to avoid repeating yourself with:
<tbody id="process-repeat" xf:repeat-nodeset="//project[index('project-repeat')]/processinstance">
<xf:var name="current-process" value="."/>
<tr>
<td>
<xf:output ref="name"/>
</td>
<td>
<xf:output ref="state"/>
</td>
<td>
<xf:group ref=".[state eq 'in processing']">
<xf:trigger appearance="minimal">
<xf:label>finish process</xf:label>
<xf:action>
<xf:setvalue ref="state">finished</xf:setvalue>
</xf:action>
<xf:action>
<xf:setvalue ref="$current-process">in process</xf:setvalue>
</xf:action>
</xf:trigger>
</xf:group>
</td>
</tr>
</tbody>
Is it possible to apply ng-click in AngularJS to a table column? I tried the following, which doesn't seem to do the trick.
<table>
<colgroup>
<col ng-repeat="item in items" ng-click="myFunction(item)"> </col>
</colgroup>
<thead>
<tr>
<th ng-repeat="item in items"> {{item.title}} </th>
</tr>
</thead>
<tbody>
<tr>
<td ng-repeat="item in items"> {{item.info}} </td>
</tr>
</tbody>
</table>
It is not possible do it in the way you have tried. You may register the ng-click on every td element. Another possibility may be registering the ng-click at the table element and use the original dom event to determin wich column was clicked. You can access the event in this way: ng-click="myFunction($event)" then in the controler:
$scope.myFunction = function(e){
console.log(e);
}
see this post How to find row and col number of a cell in table if you would like to go this way...