Hi can somebody tell me if it is possible to set the visibility of a basic html element by using a property of the particular row item of the table it is contained within?
Here's some basic psuedo code to give yout some idea of what I'm trying to do.
foreach (var item in group) {
<tr>
<td>
<span if(item.IsApprovedToSayHi) then style="display:none">Hi</span>
foreach (var item in group) {
var displayStyle = item.IsApprovedToSayHi?'display:none':'display:inline';
'<tr>
<td>
<span then style='+displayStyle+'>Hi</span>'
This is how I prefer to do it -- or put a class on it and do it on page load (which may be annoying in some cases).
foreach (var item in group) {
<tr>
<td>
<span <%: (item.IsApprovedToSayHi) ? " style=\"display: none;\" : string.Empty %>>Hi</span>
If you're using the Razor view engine, try this:
foreach (var item in group) {
<tr>
<td>
<span #( item.IsApprovedToSayHi ? " style=\"display: none;\" : string.Empty )>Hi</span>
#foreach (var item in group) {
<tr>
<td>
#if(item.IsApprovedToSayHi) {
<span style="display:none">
} else {
<span>
}
Hi</span>
Related
I'm trying to build a dynamic table in Angular with add, edit, delete functionality. Both my edit/delete buttons exist as their own column on every single one of the table rows. The edit button (onclick) is designed to make each of the 3 text data fields (in the same row as the edit button itself) turn into input fields whose user-entered text can then be saved.
<table id="thetable" align="center">
<tr>
<th>Application ID</th>
<th>Description</th>
<th>API Key</th>
<th>EDIT/DELETE</th>
</tr>
<tr id="newtablerow" ng-app="tblRowApp" *ngFor="let prov of providers; let i = index">
<td id="tablevalues" *ngFor="let col of columns">
<span id="columnText" ng-init="getRowIndex(i)" *ngIf="!editing">{{prov[col]}}</span>
<span class="editfield" *ngIf="editing">
<input id="changeText" ng-init="getChangeTextCol(col)" type="text" style="margin-right: 10px" placeholder="{{prov[col]}}">
<button ngOnload="getChangeTextCol(col)" (click)="save(changeText.value); !editing">Save</button>
</span>
</td>
<td id="editdelete">
<button class="edit" name="editButton" (click)="editToggle(i)">/</button>
<button class="delete" (click)="deleteRow(i)">x</button>
</td>
</tr>
public editing: boolean = false;
editToggle(event) {
var table = (<HTMLTableElement>document.getElementById("thetable"));
var getTextFields = table.getElementsByClassName("columnText");
for (var i = 0; i < getTextFields.length; i++) {
if (getTextFields[i].getRowIndex(event) == event) {
getTextFields[i].editing = !getTextFields[i].editing;
}
}
}
getRowIndex(event) {
console.log("row index = " + event);
return event;
}
getChangeTextCol(event) {
return event;
}
deleteRow(event) {
this.providers.splice(event, 1);
}
editToggle() is activated on edit button click and finds the current row index of itself by variable i specified by *ngFor. However, I also need to tell angular the row index of the span element containing the html input field to be shown, but I get an error saying property 'getRowIndex' does not exist on type 'Element'. This works for other functions in HTML elements like deleteRow(i), for instance.
<div class="kalender">
<table *ngIf="datoer">
<tr>
<td *ngFor="let cell of ukeEn()"
[attr.title]="cell.id">{{cell.text}}</td>
</div>
</tr>
</table>
</div>
I would like to check if attr.title (or cell.id) == any of the element's .dato attribute (an element is a type element called Cell, with the attribute dato) in an array called datoer, which is defined in my component. So I need to check the attr.title up against every value in the datoer array. Then I want to add an element (for ex. div or p) in the td if this condition is true.
Is this possible?
If you need more code samle to understand my problem, just ask.
<div class="kalender">
<table *ngIf="datoer">
<tr>
<td *ngFor="let cell of ukeEn()" [attr.title]="cell.id">
<div *ngIf="datoerContains(cell)">{{cell.text}}</div>
</td>
</tr>
</table>
</div>
In your component put this:
datoerContains(cell:any):boolean {
for(let i = 0; i < this.datoer.length; i++) {
if (this.datoer[i].dato == cell.dato) {
return true;
}
}
return false;
}
Basically I am creating a data grid that displays data from different tables in database.I am using ASP.NET MVC4 for this.
Following is how my part of my code looks:
<table class="myTable">
<tbody>
#foreach (var item in Model.sets)
{
<tr class="parent" data-level="0">
<td>
#item.setName
#* Here my logic would go*#
</td>
</tr>
}
So after displaying the rows of name of sets,in the next column I would want to display the elements that belong to that set.So I wrote another for loop in <td></td> that would loop through the Model.elements and check if it belongs to that set and display it.But I am getting "Element td cannot be nested within element td " validation error.
So how can I add data into rows of the next column?
Put your logic below the first end td tags instead. You can't put td tags inside other td tags; a series of sibling td tags make up a row.
If you want each separate piece of data in its own column:
#foreach (var item in Model.sets)
{
<tr class="parent" data-level="0">
<td>
#item.setName
</td>
#foreach (var element in Model.elements)
{
<td>
#*logic here*#
</td>
}
</tr>
If you want all your content inside the same cell, then you want:
#foreach (var item in Model.sets)
{
<tr class="parent" data-level="0">
<td>
#item.setName
</td>
<td>
#foreach (var element in Model.elements)
{
#*logic here*#
}
</td>
</tr>
}
I have an asp.net-mvc website. In my viewmodel I have a collection of cars that I want to display on an HTML table.
I want to show 5 cars per row, so I started something like this:
<table>
#foreach (var car in Model.Cars) {
if (counter == 0) {
<tr>
}
<td>#car.Name</td>
counter++;
if (counter == 5) {
</tr>
}
}
</table>
The issues are I feel like the code above is a little hacky and also what if I have 7 cars, should I put 3 blank <td>s in the last row or cut it off (again even more hacky code)?
I wanted to see if there was a cleaner way in an asp.net-mvc to display a collection in a table with a specific number of entries in the table on a row.
If you want to stick to tables, this looks the least hacky to me
#{
var colSize = 5;
var rows = (int)(Model.Cars.Count() / colSize);
}
<table>
#for (var row = 0; row <= rows ; row++){
<tr>
#foreach(var car in Model.Cars.Skip(row * colSize).Take(colSize))
{
<td>#car.Name</td>
}
</tr>
}
</table>
if you want to fill out the last row with <td> elements, you can put this in front of the <tr>:
#if (row == rows)
{
for(var i=0;i<colSize -( Model.Cars.Count() % colSize); i++){
<td></td>
}
}
You could make this slightly cleaner with something along these lines:
<table>
<tr>
#foreach (var car in Model.Cars) {
<td>#car.Name</td>
<!-- If we've output a fifth cell, break to a new row -->
if (++counter % 5 == 4)
{
</tr><tr>
}
}
</tr>
</table>
However it would probably be better to instead output block-level elements with a fixed width and float them left, like this (excuse the inline styles ;-)):
<div style="width: 300px;">
#foreach (var car in Model.Cars) {
<div style="float: left; width: 55px;">#car.Name</div>
}
</div>
Is there a way I could limit the tds to 4 or any number in the following set up ..please see code below. Right now, its displaying all model items in one single row (as it should according to the code). If the items are a dozen, they are all displayed one single row.. I would like a way to display this four in each row instead of all in one row... (am I talking about table inside a table?) can this be done?
<table>
<tr>
#foreach (var item in Model)
{
<td>
#Html.DisplayFor(modelItem => item.fld1)
#Html.DisplayFor(modelItem => item.fld2)
</td>
}
</tr>
</table>
You could group them:
#{
var chunkSize = 4;
var groupedResult =
from i in Model.Select((value, index) => new { Value = value, Index = index })
group i.Value by i.Index / chunkSize into g
select g;
}
<table>
#foreach (var result in groupedResult)
{
<tr>
#foreach (var item in result)
{
<td>
#Html.DisplayFor(modelItem => item.fld1)
#Html.DisplayFor(modelItem => item.fld2)
</td>
}
</tr>
}
</table>
Obviously the fact that you need to do this means that your view model is not adapted to this view. So adapt it and perform this grouping inside your controller action. Then your view will become simple and readable and not resemble some spaghetti code.