I have table in my angular application. How to iterate through the table headers and compare the headings in it?
Following is sample html code.
<table>
<tbody>
<th>
<td>head1</td>
<td>head2</td>
<td>head2</td>
</th>
<tr>
<td>row1Col1</td>
<td>row1Col2</td>
<td>row1Col3</td>
</tr>
<tr>
<td>row2Col1</td>
<td>row3Col2</td>
<td>row4Col3</td>
</tr>
<tr>
<td>row3Col1</td>
<td>row3Col2</td>
<td>row3Col3</td>
</tr>
</tbody>
</table>
How to loop through the number of columns(headers).
Method 1
var expectHeaders = ['head1', 'head2', 'head3'];
var headers = element.all(by.css('table > tbody > th > td'));
expect(headers.getText()).toEqual(expectHeaders);
//or do assertion in then()
headers.getText().then(function(actualHeaders){
expect(actualHeaders).toEqual(expectHeaders);
// or compare header one by one in loop
expectHeaders.forEach(function(expectHeader, index){
expect(actualHeaders[index]).toEqual(expectHeader);
})
})
Method 2
if you prefer to iterate through each header
var expectedHeaders = ['head1', 'head2', 'head3'];
var headers = element.all(by.css('table > tbody > th > td'));
expectedHeaders.forEach(function(header, index){
expect(headers.get(index).getText()).toEqual(header);
// or compare in then()
headers.get(index).getText().then(function(actual){
expect(actual).toEqual(header)
})
});
Related
I need to dynamically poplulate a table like this. The problem is, it is not a simple table. It has the "rowspan" characteristics.
For a single entry there are multiple fields entries which are being stored in separate rows.
This is a little tricky to populate with Wicket. Any help , advises, suggestions would be great.
This is what the table looks like on the HTML page:
https://jsfiddle.net/sayrandhri/4ktmy6cn/2/
<table>
<tr>
<th>Name</th>
<th>Role</th>
<th>Company</th>
<th>Request</th>
<th>Change</th>
</tr>
<tr>
<td rowspan=2>ABC</td>
<td rowspan=2>User</td>
<td>Y</td>
<td>True</td>
<td>False</td>
</tr>
<tr>
<td>Telecom</td>
<td>True</td>
<td>False</td>
</tr>
<tr>
<td rowspan=3>XYZ </td>
<td rowspan=3>User</td>
<td>O </td>
<td>False</td>
<td>False</td>
</tr>
<tr>
<td>Q</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>R</td>
<td>False</td>
<td>False</td>
</tr>
</table>
You can try following approach:
HTML:
<table>
<tr>
<th>Name</th>
<th>Role</th>
<th>Company</th>
<th>Request</th>
<th>Change</th>
</tr>
<tbody wicket:id="userList">
<tr wicket:id="providerList">
<td wicket:id="userName"></td>
<td wicket:id="roleName"></td>
<td wicket:id="provider"></td>
<td wicket:id="request"></td>
<td wicket:id="change"></td>
</tr>
</tbody>
</table>
Java:
add(new ListView<User>("userList", new PropertyModel<>(this, "users")) {
#Override
protected void populateItem(ListItem<User> listItem) {
final User user = listItem.getModelObject();
listItem.add(new ListView<Provider>("providerList", user.getProviders()) {
#Override
protected void populateItem(ListItem<Provider> listItem) {
final Provider provider = listItem.getModelObject();
Label nameLabel = new Label("userName", user.getName());
Label roleNameLabel = new Label("roleName", user.getRoleName());
listItem.add(nameLabel);
listItem.add(roleNameLabel);
if (user.getProviders().indexOf(provider) == 0) {
AttributeAppender attributeAppender =
AttributeAppender.append("rowspan", user.getProviders().size());
nameLabel.add(attributeAppender);
roleNameLabel.add(attributeAppender);
} else {
nameLabel.setVisible(false);
roleNameLabel.setVisibilityAllowed(false);
}
listItem.add(new Label("provider", provider.getName()));
listItem.add(new Label("request", provider.isRequest()));
listItem.add(new Label("change", provider.isChange()));
}
});
}
});
Be advised that this way user without any providers wont show up on the list at all.
wicket:container solves this problem.
Your html file would look like this:
<wicket:container wicket:id="doubleRow">
<tr>
...
First Row components
...
</tr>
<tr>
...
Second Row components
...
</tr>
</wicket:container>
Assuming you are using a DataTable with Columns:
In the cell that spans several rows you set the rowspan Attribute with a Model. The value in that model will be increased as long as the value of that cell is not changing.
Once you detect a change in the content, you create a new Model with a rowspan value of 1 and assign that again to the current cell.
Something like this might do it, but I cannot test it at the moment:
private IModel<Integer> currentRowSpanModel = new Model<>(0);
...
new AbstractColumn<Object, String>(new Model<>("ColumnWithRowSpan")) {
#Override
public void populateItem(Item<ICellPopulator<Object>> cellItem, String componentId, IModel<Object> rowModel) {
if (/*Content of cell has changed compared to last row*/) {
// write the content to the cell and add the rowspan Attribute
cellItem.add(new Label(componentId, "Content"));
currentRowSpanModel = new Model<>(1);
cellItem.add(AttributeModifier.replace("rowspan", currentRowSpanModel));
} else {
// Hide cell with same content and instead increase rowspan
cellItem.add(new WebMarkupContainer(componentId));
cellItem.setVisible(false);
currentRowSpanModel.setObject(currentRowSpanModel.getObject()+1);
}
}
}
I have a table with rows generated via a loop. Each TR has a unique ID.
How do I select that ID when I click span with .clickMe class?
<tr id="244">
<td>...</td>
<td><span class="clickMe"</td>
</tr>
<tr id="4554">
<td>...</td>
<td><span class="clickMe"</td>
</tr>
IF the structure is always going to be the same you could just do:
var theId = this.parentNode.parentNode.id
If its not always going to be the same then you could do:
var theId = $(this).closest('tr').attr('id');
So putting it all together:
$('.clickMe').click(function(){
var theId = $(this).closest('tr').attr('id'); // or the standard DOM approach
// other stuff
});
Also your Id's should not begin with numbers as per the spec.
I have a table structure as follows. Now I need to sort these nested tables separately. Forexample: sorting chapter's row will only update chapters order in a separate table. Whereas, sorting items will update their order in another table.
I managed to setup the code and sorting. However, when I drag the items from chapter 4, it pass on the order of the items in from chapter 1 since they come before chapter 4???
Could someone help me with sorting only relevant items??
NOTE: This list is dynamic coming from database. So I am interested in one jquery code covering all the ordering bits.
<table id=subsortsortable>
<tbody class=content>
<tr id="chapter_1"><td>Chapter one</td></tr>
<tr id="chapter_2"><td>Chapter two</td></tr>
<tr id="chapter_3">
<td>
<table>
<tbody class=subcontent>
<tr id="item_31"><td>three.one</td></tr>
<tr id="item_32"><td>three.two</td></tr>
</tbody>
</table>
</td>
</tr>
<tr id="chapter_4">
<td>
<table>
<tbody class=subcontent>
<tr id="item_41"><td>four.one</td></tr>
<tr id="item_42"><td>four.two</td></tr>
<tr id="item_43"><td>four.three</td></tr>
<tr id="item_44"><td>four.four</td></tr>
<tr id="item_45"><td>four.five</td></tr>
</tbody>
</table>
</td>
</tr>
<tr id="chapter_4"><td>Chapter Four</td></tr>
</tbody>
</table>
The code I am using is as follows:
//for sorting chapters - which is outer table
$("#subsortable tbody.content").sortable({
opacity: 0.7,
cursor: 'move',
placeholder: "ui-state-highlight",
forcePlaceholderSize: true,
update: function(){
var order = $('#subsortable tbody.content').sortable('serialize') + '&action=updateChaptersOrder';
$.post("/admin/ajax/ajax_calls.php", order, function(theResponse){
});
}
});
// For sorting and updating items within a specific chapter - which is nested tbody
$("tbody.sortItems").subcontent({
opacity: 0.7,
cursor: 'move',
placeholder: "ui-state-highlight",
forcePlaceholderSize: true,
update: function(){
var order = $('tbody.subcontent').sortable('serialize');// + '&action=updateListings';
$.post("/admin/ajax/ajax_calls.php", order, function(theResponse){
});
}
});
I have got the answer to my own question.. In case someone else encounter the same problem. I have changed the following code inside the internal table:
var order = $('tbody.subcontent').sortable('serialize');
to
var order = $(this).sortable('serialize');
I have this table structure:
<table class="x-toolbar-ct">
<tbody>
<tr>
<td>col1</td>
<td>col2</td>
</tr>
</tbody>
</table>
No luck with this code:
var row = Ext.select('.x-toolbar-ct').select('tbody').select('tr');
row.appendChild('<td>col3</td>');
So how to append new <td> element? Thank you.
We have to use createChild(), and use first() to return the first element.
var row = Ext.select(".x-toolbar-ct").first().first().first();
row.createChild("<td>col3</td>");
everyone, I encounter a problem when I try to filter the drop down list.
The situation is I wish to filter the Agent dropdown list by using the Company dropdown list in same view/form. Since I need to display the Agents that only belong to the selected Company. But I have no idea to do that.
Any solution, please?
First add Method in Controller as follows
MvcApplication2.Models.MySampleDBEntities db = new Models.MySampleDBEntities();
public ActionResult SearchNames(string ddlcontent)
{
var list = new List<string>();
var nameqry = from n in db.Images
select n.PlayerName;
list.AddRange(nameqry.Distinct());
ViewBag.ddlcontent = new SelectList(list);
var names = from m in db.Images
select m;
if (string.IsNullOrEmpty(ddlcontent))
return View(names);
else//Filter content basedon dropdownlist selected item
return View(names.Where(s => s.PlayerName.Contains(ddlcontent)));
}
then bind it to view as follows
#model IEnumerable<MvcApplication2.Models.Image>
#{
ViewBag.Title = “SearchNames”;
}
<h2>SearchNames</h2>
#using (#Html.BeginForm(“SearchNames”, “Names”, FormMethod.Get))
{
#Html.DropDownList(“ddlcontent”, “All”)<input type=”submit” value=”Filter” />;
}
<table border=”4″ style=”border: medium dashed #FF0000″>
<tr>
<th>
PlayerName
</th>
<th>
Play
</th>
<th>
CountryName
</th>
<th>
Image
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.PlayerName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Play)
</td>
<td>
#Html.DisplayFor(modelItem => item.CountryName)
</td>
<td>
<img src=”#item.ImagePath” height=”100″ width=”100″/>
</td>
</tr>
}
</table>
2 options really...either split the server-based form post into multiple steps, or use jquery to handle this behavior JIT