I have a a ViewData with 8 rows. The ForEach loop works fine, but I need to extract the very first row before the foreach.
I need to extract only the first row to inject the default video in the iframe.
<iframe name="myFrame" width="800" height="500" src="#item.ID?wmode=transparent" allowfullscreen="True"></iframe>
Here is the foreach that works 100%
#foreach (var item in (List<VideoModel>)ViewData["Videos"])
{
<tr class="sep">
<td>#item.DisplayNumber</td>
<td>
#Html.ActionLink("Play Video", "IframeRedirect", "Home", new { ContentID = item.ID }, new { target = "someFrame", #class = "cbutton" })
</td>
<td>#item.Time #item.Hd</td>
<td><b>#item.Title</b><br />#item.Description</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><b>Author:</b> #item.Author <br />Subscribe to youtube channel</td>
</tr>
}
you can get the first row like following:
var firstRow = ((List<VideoModel>)ViewData["Videos"]).First();
If your model is a IEnumerable
You can get the first like following:
var first = Model.First();
Related
I am developing a spring boot service to manage a REST server.
The service displays a reactive list on one of the forms.
It is very simple code.
Table in thymeleaf template
<table>
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td>Alive</td>
</tr>
</thead>
<tbody>
<tr th:each="item : ${items}">
<td th:text="${item.counterpartID}" />
<td th:text="${item.counterpartName}" />
<td th:text="${item.alive}"/>
</tr>
</tbody>
</table>
Controller
#GetMapping("/counterparties")
public String init(Model model) {
IReactiveDataDriverContextVariable reactiveDataDrivenMode =
new ReactiveDataDriverContextVariable(
webClient
.get()
.uri(uriBuilder -> uriBuilder
.path("/findAllCounterpart")
.build())
.retrieve()
.bodyToFlux(Counterpart.class)
, 1);
model.addAttribute("items", reactiveDataDrivenMode);
return "counterparties.html";
}
Now I want to display collection size (numbers of rows in table).
I added to the html temlate tag
<label th:text="'total rows: ' + ${#lists.size(items)}">rows number in table</label>
And I got an unexpected result
total rows: 1
How to display the real number of rows in a reactive collection ?
Thanks.
I decided to use javascript.
<script language="JavaScript">
function countLoadedRows() {
var table = document.getElementById('tableId');
var tbodyRowCount = table.tBodies[0].rows.length;
console.log('total rows: ' + tbodyRowCount);
document.getElementById('totalRowsId').textContent = tbodyRowCount
}
document.addEventListener('readystatechange', countLoadedRows)
</script>
and html tags is
<input type = "button" onclick = "countLoadedRows()" value = "Total rows: "><label id="totalRowsId">???</label>
<table id="tableId">
...
</table>
I have a table header that looks like this:
I'm trying to recreate this table in bootstrap-vue. The raw HTML looks like this (simplified):
<table>
<thead>
<tr>
<th></th>
<th colspan="4">Group 1</th>
<th colspan="4">Group 2</th>
<!--etc-->
</tr>
<tr>
<th>Field</th>
<th>Median</th>
<!-- etc -->
</tr>
</thead>
<tbody><!-- actual data --></tbody>
</table>
The core b-table code will create the 2nd row easily/automatically. I'm trying to figure out how to jam the 1st row in there. As a little kicker, I need to be able to control the contents of the two group names (i.e. if they change a control somewhere, "Group 1" becomes "Group Foo").
I made a playground for anyone that needs a starting point for helping figure this out: https://codesandbox.io/s/p56y3y2lnx The goal in there would be to programmically add a 1st row that includes the group1name and spans the width of the table in one colspan.
As of version v2.0.0-rc.14 (released 2019-03-08) you can now add additional rows above the header using the slot thead-top.
For your example, you would place the following code inside of the b-table tag:
<template slot="thead-top" slot-scope="data">
<tr>
<th></th>
<th colspan="3">Group 1</th>
<th colspan="4">Group 2</th>
<th colspan="4"></th>
</tr>
</template>
Here's a reference to the new feature: https://bootstrap-vue.js.org/docs/components/table/#adding-additional-rows-to-the-header
I was unable to find a clean way to achieve the results I wanted, so I ended up with something more hacky.
On b-table you can add an input event, so I did that to know when the table was finished loading.
HTML:
<b-table #input="tableLoaded" ref="table"></b-table>
then in my methods:
tableLoaded() {
if (!this.$refs.table) {
return;
}
var headers = this.$refs.table.$el.querySelectorAll('thead tr');
if (headers.length > 1) {
return;//nothing to do, header row already created
}
var topHeader = document.createElement('tr');
topHeader.innerHTML =
'<th></th>'+
'<th colspan="3">Group 1</th>'+
'<th colspan="4">Group 2</th>'+
'<th colspan="4"></th>';
headers[0].parentNode.insertBefore(topHeader, headers[0]);
}
I'd be happy to accept a cleaner solution.
I'm trying to replicate a one rowed table with a form, such that when I press the '+' button - I would like another table form to drop down below it exactly the way it is - however, when I do that and add the same element as the table with the HTML code, I get something different...
I got screenshot images to the form below and after that I got the code indented -
The code for the above images is listed below - the first being the forms and the second being the Javascript function
<body>
<form>
<div id="container1">
<table border="1" cellspacing="0" style="margin-top:12px width="900"">
<colgroup>
<col span="1">
</colgroup>
<tr>
<td valign="top">
<label for="company" size="3">Company:</label> <input type="text" id="company" name="company" maxlength="15" size="15">
</td>
<td valign="top">
<label for="position1" size="3">Position:</label> <input type="text" id="position1" name="position1" maxlength="20" size="12"> </td> <td valign="top"><label for="tasks" size="3"> Tasks: </label></td><td> <textarea id="tasks" name="tasks" maxlength="1000" cols="25" rows="1"></textarea></td>
<td valign="top"><label for="from1" size="3"> From: </label><input type="text" id="from1" name="from1" size="4" ></td> <td valign="top">To: <input type="text" id="to1" name="to1" size="4"> <td valign="top"><label for="location" size="3">Work Location: </label><input type="text" id="location" name="location" size="20" maxlength="25"> + <br></td>
</tr>
</table><br>
</div>
</form>
</body>
the javascipt code is posted below:
function aFields1(){
var container1 = document.getElementById("container1");
var table = document.createElement("table");
table.border=1;
table.cellspacing=0;
var tr = document.createElement("tr");
var td = document.createElement("td");
td.valign = "top";
var label = document.createElement("label");
label.for = "company";
label.size = 3;
container1.appendChild(document.createTextNode("Company: "));
container1.appendChild(label);
var company = document.createElement("input");
company.type = "text";
company.id = "company";
company.name = "company";
company.size = 15;
company.maxlenth = 15;
//append the company input element to the td element
td.appendChild(company);
tr.appendChild(td);
table.appendChild(tr);
//append the td element to the container1 element
//container1.appendChild(tr);
container1.appendChild(table);
Can anyone please tell me why the table is not showing up?
There should be a border with at least one cell with the company label and input bar INSIDE it - but as you can see from the image the Company label is on the top and the input bar with the border is below it...
where'd I go wrong? and why are the borders for the cell much much more different from what came out of the HTML code?
Part of the problem is that you're appending the label element to the DIV directly instead of appending it to the new td. This is why it's showing up outside of the Table.
From your last comment, it seems like what you really want to do is just append a cloned TR to the existing table. Ok, there are multiple ways to do this. You can completely re-build a duplicate tr in javascript, OR you can just clone the first table row and append it to the table. This is trivial with jQuery, but can be done with pure javascript.
First, let's add an id attribute to the table element. like so:
<table id="my_table" border="1" cellspacing="0" style="margin-top:12px;width:900px">
.....snip rest of your table....
</table>
Then your javascript cloning can work like this (note: code is untested):
function aFields1() {
var table, tr, cloned_row, inputs_to_clear;
// find the table
table = document.getElementById('my_table');
// find the first tr element
tr = table.querySelectorAll('tr')[0];
// clone the first tr using deep = true option to copy all children
tr_cloned = tr.cloneNode(true);
// NOTE: the values in the cloned row will already be prefilled, so you probably want to clear input-field values as well
inputs_to_clear = tr_cloned.querySelectorAll('input');
foreach (var input in inputs_to_clear) {
inputs_to_clear[input].value = '';
}
// append the new row
table.appendChild(cloned_row);
}
So I need to get all the values from a bunch of rows using Telerik Test Studio.
I basically recorded a test to go to a certain page on a web app, and I have a row called Session ID with a few randomly generated rows below it and I want to get the values from those rows, to use with code or whatever.
How would I go about doing it?
Here is a picture of what I mean:
This can be achieved in a coded step.
Let's say you have a few rows in a html table and you want to get their values. You need to collect all rows in a collection and then just take the value of each member of the collection.
Here is an example:
HTML:
<table id="table">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
</table>
The code of the coded step in C#:
HtmlTable myTable = ActiveBrowser.Find.ById<HtmlTable>("table"); //Locate the table
IList<HtmlTableRow> myList = myTable.Find.AllByTagName<HtmlTableRow>("tr");//Collect all rows.
foreach (HtmlTableRow rows in myList)
{
Log.WriteLine(rows.InnerText.ToString());
}
Here is a video demonstration.
Hope I could help.
You can find the ID or any other attribute in the HTML structure of the application (e.g. in Chrome/IE by pressing F12).
Here is a sample code against Telerik ASP gridview page. Here I am retrieving the first row and then only the first column:
HtmlTable myTable = ActiveBrowser.Find.ById<HtmlTable>("ctl00_ContentPlaceHolder1_RadGrid1_ctl00");
IList<HtmlTableRow> myList = myTable.Find.AllByTagName<HtmlTableRow>("tr");
//First row
Log.WriteLine(myList[11].InnerText.ToString());
//First column
for (int i = 11; i < myList.Count; i++)
{
Log.WriteLine(myList[i].Cells[1].InnerText.ToString());
}
I also recorded another video for a demonstration.
I have a grid that populates from a search event and I'd like the option of being able to close the grid by simply adding an X in the top right corner, similar to how you close any browser or window. I thought it would be as easy as adding the X, styling it to my liking and then creating an onclick event that would close or hide the grid... but I can't seem to get that working. Any help would be appreciated.
My JS is:
dojo.require("dojox.grid.DataGrid"); //FindTask
dojo.require("dojo.data.ItemFileReadStore"); //FindTask
dojo.require("esri.tasks.find"); //FindTask
var findTask, findParams;
var grid, store;
var searchExtent;
function doFind() {
//Show datagrid onclick of search button and resize the map div.
esri.show(datagrid);
dojo.style(dojo.byId("content"), "height", "83%");
searchExtent = new esri.geometry.Extent ({
"xmin":-9196258.30121186,"ymin":3361222.57748752,"xmax":-9073959.055955742,"ymax":3442169.390441412,"spatialReference":{"wkid":102100}
});
map.setExtent(searchExtent);
//Set the search text to the value in the box
findParams.searchText = dojo.byId("parcel").value;
grid.showMessage("Loading..."); //Shows the Loading Message until search results are returned.
findTask.execute(findParams,showResults);
}
function showResults(results) {
//This function works with an array of FindResult that the task returns
map.graphics.clear();
var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([98,194,204]), 2), new dojo.Color([98,194,204,0.5]));
//create array of attributes
var items = dojo.map(results,function(result){
var graphic = result.feature;
graphic.setSymbol(symbol);
map.graphics.add(graphic);
return result.feature.attributes;
});
//Create data object to be used in store
var data = {
identifier: "Parcel Identification Number", //This field needs to have unique values. USES THE ALIAS!!!
label: "PARCELID", //Name field for display. Not pertinent to a grid but may be used elsewhere.
items: items
};
//Create data store and bind to grid.
store = new dojo.data.ItemFileReadStore({ data:data });
var grid = dijit.byId('grid');
grid.setStore(store);
//Zoom back to the initial map extent
map.setExtent(searchExtent);
}
//Zoom to the parcel when the user clicks a row
function onRowClickHandler(evt){
var clickedTaxLotId = grid.getItem(evt.rowIndex).PARCELID;
var selectedTaxLot;
dojo.forEach(map.graphics.graphics,function(graphic){
if((graphic.attributes) && graphic.attributes.PARCELID === clickedTaxLotId){
selectedTaxLot = graphic;
return;
}
});
var taxLotExtent = selectedTaxLot.geometry.getExtent();
map.setExtent(taxLotExtent);
}
and my HTML is:
<div id ="datagrid" data-dojo-type="dijit.layout.AccordionPane" splitter="true" region="bottom"
style="width:100%; height:125px;">
<table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="grid" id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
<thead>
<tr>
<th field="Parcel Identification Number" width="10%">
Parcel ID
</th>
<th field="Assessing Neighbornood Code" width ="20%">
Neighborhood Code
</th>
<th field="Property Class Code" width="10%">
Property Class
</th>
<th field="Site Address" width="100%">
Address
</th>
</tr>
</thead>
</table>
</div>
This is my best guess at what to add:
<tr>
<td align="right">
<div class="divOk" onclick="dijit.byId('tocDiv').hide();">
OK</div>
</td>
</tr>
I wound up creating a work around for what I want by creating a new column and putting a close icon within the header. I connected it to an function so that when I click it, the grid closes and the map resizes:
function closeGrid() {
esri.hide(datagrid);
dojo.style("map", {"height": "100%"});
}
HTML
<th field="" width="2%"> <div class="GridCloseIcon" title="Close Grid" onclick="closeGrid();"></div>
How about this?
(assuming the OK line actually appears)
HTML
<tr>
<td align="right">
<div class="divOk" onclick="hideGrid();">OK</div>
</td>
</tr>
JS
function hideGrid() {
var widget = dijit.byId('datagrid');
dojo.fadeOut({
node: widget.domNode
}).play();
dojo.style(widget.domNode, 'display', 'none');
}