So I have a SQL Server database that stores product information. One of the columns in my products table is DateRetired. The user can search in the front-end for a product via its name and this automatically returns any product matching the searched item which is currently being sold (not retired). The table produced when it is populated does not contain DateRetired column. However when a checkbox is clicked then the user can search an item in the retired products. In this case I would like a new column to be added to the displayed table which will display the retired date. Is this possible?
This is what I have:
#if (foundProducts.Count == 0)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Description</th>
<th scope="col">Additional Information</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
#foreach (var system in foundProducts)
{
<tr>
<td>#product.SystemName</td>
<td>#product.SystemDescription</td>
<td>#product.AdditionalInformation</td>
<td>#product.Price</td>
#if (product.DateRetired != null)
{
<thead>
<tr>
<th scope="col">DateRetired</th>
</tr>
</thead>
<td>#product.DateRetired</td>
}
</tr>
}
</tbody>
</table>
I believe you can achieve what you want if you make two changes to your current code:
The show/hide condition. You claim that when a checkbox is clicked then the user can search an item in the retired products. This suggests that the show/hide condition relies on the state of that checkbox.
The placement of the header element. If I am not mistaken, you want to show a column for Date Retired in the same table that you already have. If that is the case, you will need to conditionally display the header element (<th>) inside the already existing <thead> element.
If your checkbox is bound to a field named displayDateRetiredColumn, you should be able to display the header element (<th>) and the data element (<td>) conditionally as follows:
<table>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Description</th>
<th scope="col">Additional Information</th>
<th scope="col">Price</th>
#if (displayDateRetiredColumn)
{
<th scope="col">Date Retired</th>
}
</tr>
</thead>
<tbody>
#foreach (var system in foundProducts)
{
<tr>
<td>#product.SystemName</td>
<td>#product.SystemDescription</td>
<td>#product.AdditionalInformation</td>
<td>#product.Price</td>
#if (displayDateRetiredColumn)
{
<td>#product.DateRetired</td>
}
</tr>
}
</tbody>
</table>
Related
I have a table with a for each loop that displays a number of products:
<table id="myTable" class="table table-bordered">
<thead class="thead-green">
<tr>
<th>Product Name</th>
<th>Product Model</th>
<th>Description</th>
<th>Price</th>
<th>Add Service</th>
</tr>
</thead>
<tbody>
#if (Products.Any())
{
#foreach (var product in Products)
{
<tr>
<td>#product.Name</td>
<td>#product.Model</td>
<td>#product.Description</td>
<td>#product.Price</td>
<td><button style="background-color:#0275d8;" class="btn btn-primary btn-medium" #onclick="#( () => add(product))">Add</button></td>
</tr>
}
}
else
{
<tr><td colspan="6"><strong>No products available</strong></td></tr>
}
</tbody>
</table>
I would like to add a Search bar at the top of it and be able to search the items inside the table
I was wondering if it is possible to create a table with pages in C# razor? I want to make a page for every 5 workitems so that the table doesn't get too long.
My table looks like so:
<table class="Table">
<thead>
<tr>
<th>Id</th>
<th>Title</th>
<th>Item Type</th>
</tr>
</thead>
<tbody>
#foreach(var workItem in workItemList)
{
<tr #onclick="#(() => WorkItemSelected(workItem))">
<td>#workItem.Id</td>
<td>#workItem.Title</td>
<td>#workItem.ItemType</td>
</tr>
}
</tbody>
</table>
I have a Blazor application and implemented a filter feature on my bootstrap table similar to the following link: https://timheuer.com/blog/filtering-data-table-with-blazor/
This works fine and exactly how the link explains it. However, I would like to add an extra step into the code which allows me to enter multiple things into the filter and it filter on all these items. For example: Warm 22 and it filters on the summary column and Temp(F). So if you enter multiple strings in this filter it looks at each string and finds anything related to that in any column?
<div class="form-group">
<input class="form-control" type="text" placeholder="Filter..."
#bind="Filter"
#bind:event="oninput">
</div>
<table class="table table-striped">
...
</table>
public bool IsVisible(WeatherForecast forecast)
{
if (string.IsNullOrEmpty(Filter))
return true;
if (forecast.Summary.Contains(Filter, StringComparison.OrdinalIgnoreCase))
return true;
if (forecast.TemperatureC.ToString().StartsWith(Filter) || forecast.TemperatureF.ToString().StartsWith(Filter))
return true;
return false;
}
<table class="table table-striped">
<thead class="thead-light">
<tr>
<th scope="col">Date</th>
<th scope="col">Temp. (C)</th>
<th scope="col">Temp. (F)</th>
<th scope="col">Summary</th>
</tr>
</thead>
<tbody>
#foreach (var forecast in forecasts)
{
if (!IsVisible(forecast))
continue;
<tr>
<td>#forecast.Date.ToShortDateString()</td>
<td>#forecast.TemperatureC</td>
<td>#forecast.TemperatureF</td>
<td>#forecast.Summary</td>
</tr>
}
</tbody>
</table>
Currently my IsVisible() method looks at specific columns rather than checking all columns. I tried to put the text entered into the input in an array and loop through this but couldnt get it working and dont think its the best way.
I'm getting the JSON value and populating in the table, but I need to change the horizontal style to vertical when displaying the table. I'm m using an MVC controller and updating the model, and assigning the model data to table.unble to get serial number in my first column.
I want to show the table like this:
name deviceid time location status
1 123 10.50 kolkata 23
2 2332 11.11 hyderabad 44
3 333 04.54 chennai 11
but im getting the table format like this
name deviceid time location status
1 123 10.50 kolkata 23
1 2332 11.11 hyderabad 44
1 333 04.54 chennai 11
<table class="table table-striped">
<thead>
<tr class="success">
<th>Bin id</th>
<th>device id</th>
<th>filled in %</th>
<th>Updated time</th>
<th>Area</th>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr> <td class="success">1</td>
<td class="success">#item.deviceid</td>
<td class="danger">#item.Filled.ToString("N2") %</td>
<td class="info">#item.UpdatedTime</td>
<td class="warning">#item.Area</td>
</tr>
}
</tbody>
</table>
<table class="table table-striped">
<thead>
<tr class="success">
<th>Bin id</th>
<th>device id</th>
<th>filled in %</th>
<th>Updated time</th>
<th>Area</th>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td class="success">#item.deviceid</td>
<td class="danger">#item.Filled.ToString("N2") %</td>
<td class="info">#item.UpdatedTime</td>
<td class="warning">#item.Area</td>
</tr>
}
</tbody>
</table>
The <th> tag defines a header cell in an HTML table.
An HTML table has two kinds of cells:
Header cells - contains header information (created with the <th> element)
Standard cells - contains data (created with the <td> element)
The text in <th> elements are bold and centered by default.
The text in <td> elements are regular and left-aligned by default.
You'll get the table view as expected. I couldn't figure out why you've added the css. so add your column css accordingly!
Hope this helps!
You can loop the columns in a single row <tr> only
<table class="table table-striped">
<thead>
<tr class="success">
<th class="success">Bin Id</th>
<th>device id</th>
<th>filled in %</th>
<th>Updated time</th>
<th>Area</th>
</tr>
</thead>
<tbody>
// here you need the index values for the name column so i am giving i value to first column
#foreach (var item in Model.Select((value,i) => new {i, value}))
{
<tr class="warning">
<td class="success">#item.i</td>
<td>#item.value.deviceid</td>
<td>#item.value.Filled.ToString("N2") %</td>
<td>#item.value.UpdatedTime</td>
<td>#item.value.Area</td>
</tr>
}
</tbody>
</table>
I have been searching for quite some time to create the following table through code-behind using C#. I am finding difficulty in adding a <tr> to <thead> and <tr> to <tbody>. This is how the table should look like:
<table id="mytable" border="1" cellpadding="10" cellspacing="0" >
<caption>myCaption</caption>
<thead>
<tr>
<td> </td>
<th scope="col">myHeader1</th>
<th scope="col">myHeader2</th>
<th scope="col">myHeader3</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>3</td>
<td>1</td>
</tr>
</tbody>
</table>
Any help is appreciated.
Create a strongly typed view with a list of whatever you're binding, and use the #foreach loop:
#model List<MyClass>
<table id="mytable" border="1" cellpadding="10" cellspacing="0" >
<caption>myCaption</caption>
<thead>
<tr>
<td> </td>
<th scope="col">myHeader1</th>
<th scope="col">myHeader2</th>
<th scope="col">myHeader3</th>
</tr>
</thead>
<tbody>
#foreach(var m in Model)
{
<tr>
<td>#m.MyProp1</td>
<td>#m.MyProp2</td>
<td>#m.MyProp3</td>
</tr>
}
</tbody>
I have done similar thing using C# MVC. Here is a sample code. Hope this will help to get an idea.
#{int count = Model.HeadingsList.Count;}
<table>
<thead>
<tr>
#foreach (string heading in Model.HeadingsList)
{
<th>#heading</th>
}
</tr>
</thead>
<tbody>
#foreach (string row in Model.rowsList)
{
string[] cellValues = Array.ConvertAll(row.Split(','), p => p.Trim());
if (count != cellValues.Count()) { return; }
<tr>
#for (int i = 0; i < #count; i++)
{
<td>#cellValues[i]</td>
}
</tr>
}
</tbody>
</table>
I had a list of rows like below.
Array[0]['cell1','cell2','cell3'...]
Array[1]['cell1','cell2','cell3'...]