trying to render a table as a polymer element
<table>
<thead>
<tr>
<th template repeat='{{ column in columns}}'>
{{column.displayName}}
</th>
</tr>
</thead>
<tbody>
<tr template repeat='{{ row in data}}'>
<td template repeat='{{ column in columns}}'>
{{row[column.name]}}
</td>
</tr>
</tbody>
</table>
the following expression doesn't seem to work as i expected
{{row[column.name]}}
column.name is the property name that i want to access in the row object but it gives the following exception for all properties
NoSuchMethodError: method not found: '[]'
Receiver: Instance of 'Product'
Arguments: ["id"]
is this the right way to access a property by name?
my row model looks like this
class Product extends Observable{
int id;
String name;
String category;
}
One work around which i don't like is overloading the [] in the row class
operator [](String fieldName){
var im = reflect(this);
return im.getField(new Symbol(fieldName)).reflectee;
}
This should work if 'row' is a map.
Related
I'am learning MVC5 & Entity Framework 6, and have accomplished a connection to a SQL Database.
I need to change the class of the <tr> field based on the TicketStatus.StatusID result
For Example If the StatusID =1 then use:
<tr class="ticket even status-new priority-low">
if the statusID = 2 then use:
<tr class="ticket even status-open priority-low">
Etc.. Etc..
This is the current Foreach loop code I have based on the number fields to display in a Bootstrap table.
#foreach (var item in Model)
{
<tr class="ticket even status-new priority-low">
<td class="status"><span>#Html.DisplayFor(modelItem => item.TicketStatus.Status)</span></td>
<td class="number"><ul class="user-dashboard-tickets"><li class="user-dashboard-tickets"><span>#Html.DisplayFor(modelItem => item.TicketID)</span></li></ul></td>
<td class="assigned">#Html.DisplayFor(modelItem => item.TicketOwner.OwnerName)</td>
<td class="title"><h2>#Html.DisplayFor(modelItem => item.Title)</h2></td>
<td class="type">Problem</td>
<td class="assigned">test.user</td>
<td class="age">2 days</td>
</tr>
}
I don't know if you can put another foreach loop inside the loop? or add a query to the <tr> field?
you can put any code inside Razor view, even inside a loop, like this:
var statusClass = "";
switch (TicketStatus.StatusID){
case 1:
statusClass = "status-open";
break;
}
<tr class="ticket even #statusClass priority-low">
I have a single map
.dart
Map<String, String> name = {"title":"Countess","first":"Tommy","last":"Clarke","middle":"Kowan","suffix":"Junior"}
I would like to use angular2 #ngFor directive to construct a table looking like the one below
I can create the table in the conventional way using #ngFor with the Name column forming the table header row and the input column placed as the first table row. The graphic shown was done with the following code:
.html
<table class = "mdl-data-table mdl-js-data-tablemdl-shadow--4dp">
<thead>
<tr>
<th class = "mdl-data-table__cell--non-numeric">Name</th>
<th>Input</th>
</tr>
</thead>
<tbody>
<tr>
<td class = "mdl-data-table__cell--non-numeric">Title</td>
<td>{{name.title}}</td>
</tr>
<tr>
<td class = "mdl-data-table__cell--non-numeric">First</td>
<td>{{name.first}}</td>
</tr>
<tr>
<td class = "mdl-data-table__cell--non-numeric">Middle</td>
<td>{{name.middle}}</td>
</tr>
<tr>
<td class = "mdl-data-table__cell--non-numeric">Last</td>
<td>{{name.last}}</td>
</tr>
<tr>
<td class = "mdl-data-table__cell--non-numeric">Suffix</td>
<td>{{name.suffix}}</td>
</tr>
</tbody>
</table>
How can I crate the table in the graphic using #ngFor directive?
EDIT1 - CONSOLE ERROR WHEN RUN WITH FIRST SOLUTION
>EXCEPTION: Class '_CompactIterable' has no instance method '[]'.
NoSuchMethodError: method not found: '[]'
Receiver: Instance of '_CompactIterable'
Arguments: [null] in [{{names.keys[idx].slice(1,1).toUpperCase()}}{{names.keys[idx].slice(2)}} in NameComponent#148:52]
EXCEPTION: Class '_CompactIterable' has no instance method '[]'.
NoSuchMethodError: method not found: '[]'
Receiver: Instance of '_CompactIterable'
Arguments: [null] in [{{names.keys[idx].slice(1,1).toUpperCase()}}{{names.keys[idx].slice(2)}} in NameComponent#148:52]
(anonymous function)
ORIGINAL EXCEPTION: Class '_CompactIterable' has no instance method '[]'.
.dart (Dart's port of SnareChops answer below) | CORRECT ANSWER
Added a custom pipe to perform the capitalization
///Takes the first letter of [String] key in a [Map], capitalizes it and
///returns the key value as the capitallized word
#Pipe( name: 'capitalize' )
class CapitalizePipe extends PipeTransform {
dynamic transform( String value, List args ) {
StringBuffer buffer = new StringBuffer( );
List<String> list = value.split( '' );
if ( value != null ) {
for ( int i = 0; i < list.length; i++ ) {
if ( i == 0 ) {
buffer.write( list[i].toUpperCase( ) );
continue;
}
buffer.write( list[i] );
}
}
return buffer.toString( );
}
}
<tbody>
<tr *ngFor = "#name of names?.keys">
<td class = "mdl-data-table__cell--non-numeric">{{name | capitalize}}</td>
<td>
{{names[name]}}
</td>
</tr>
</tbody>
Iterate the keys of the Map, use those for the titles, and then you can use the key to access the value in the Map which gives you the value.
<tbody>
<tr *ngFor="#name of names?.keys">
<td class="mdl-data-table__cell--non-numeric">{{name}}</td>
<td>{{names[name]}}</td>
</tr>
</tbody>
I have a Kendo grid on a MVC .cshtml view page:
#model IEnumerable<Models.GetItems>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
sortable: true
});
});
</script>
<table class="table" id="grid">
<thead>
<tr>
<th data-field="Quantity">
Qty
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.ActionLink(item.Quantity.ToString(), "kendo", "Groups", new { ID = item.ID }, null)
</td>
</tr>
}
</tbody>
</table>
It displays the way I want; as a number with a link to a drill down page, but the sorting doesn't work at all.
How can I tell the grid I want the data type to be a number so it can sort it like a number?
(item.Quantity is Int16 from the model, but had to make it a string for the ActionLink to work)
(I'm open to binding the grid differently if I have to (bind to json output from controller and/or use rowTemplate and/or bind to empty div and define columns in JS possibly with template), but not sure at this point if that will matter, seems like a data type issue regardless of binding method???)
I have a table set up like this
<table class="table table-condensed">
<thead>
<tr>
<th>Look</th>
<th>Lease Company</th>
</tr>
</thead>
<tbody data-bind="foreach: leaseApplicationLooks">
<tr>
<td data-bind="text: lookId"></td>
<td><select data-bind="options: $parent.leaseCompanies, optionsText: 'name', optionsValue: 'name', value: leaseCompany" /></td>
</tr>
</tbody>
</table>
My view model:
leaseCompanies(datacontext.lookups.applicationCompanies);
This returns an array with a name, type fields
Depending on the row I want to display different options:
For example:
Row 1, show all Type = 1, 2
Row 2, show all Type = 2
How would I go about doing this?
Set up a different array for each of the types you want. If they are dynamic in length then set up child observable arrays of your leaseApplicationLooks and populate those by iterating through you list of lease companies. It's pretty simple actual, just use plain all javascript loops
getting two arrays from controller and code is --
Sql db = new Sql(dataSource_wldb1) // Create a new instance of groovy.sql.Sql with the DB of the Grails app
def ivrColumns = []
db.eachRow(ivrColumnsQuery) {
rsRow ->
ivrColumns.add(rsRow.name) }
def ivrResults = []
db.eachRow(mssqlQuery) {rows ->
//print rows
ivrResults.add(rows)
}
one has all column names & other has all row data.as below-
return render(view:'xref',model:[ivrcolumns:ivrColumns,ivrresults:ivrResults] )
getting data in below format-
Columns
[ClientKey, Abbr, ConfigKey, Federal, State, DMA, Internal, Wireless, CRssing, CurfewExemption, CampaignID]
Data
[groovy.sql.GroovyResultSetExtension#12f8d75, groovy.sql.GroovyResultSetE
oovy.sql.GroovyResultSetExtension#12f8d75, groovy.sql.GroovyResultSetExtension#1
roovyResultSetExtension#12f8d75, groovy.sql.GroovyResultSetExtension#12f8d75, gr
tSetExtension#12f8d75, groovy.sql.GroovyResultSetExtension#12f8d75, groovy.sql.G
ion#12f8d75, groovy.sql.GroovyResultSetExtension#12f8d75]
view code is---
<g:if test="${ivrcolumns != null }">
<center>Database Location - WLDB1 <br>DB Name - IVR_GUARDIAN </center><br><br>
<table class="table loadTable" >
<thead>
<tr bgcolor="#f0f0f0" >
<g:each in="${ivrcolumns}" status="ii" var="columnivr">
<td nowrap>${columnivr}</td>
</g:each>
</tr>
</thead>
<tbody>
<g:each in="${ivrresults}" status="jj" var="hed">
<tr>
<g:each in="${ivrcolumns}" status="kk" var="col">
<td nowrap>${hed.col}</td> ///please suggest how to do it.
</g:each>
</tr>
</g:each>
</tbody>
</table>
now want to show in GSP page .i am able to display the column but having hard time to display data.not getting how the dot will be used to get correct data to each column.
Will appreciate any help.
thanks
Assuming that's just a sql result, you can just call ${ hed[ col ] } or ${ hed."$col" }