I have a WCF service and and we had to generate a records of clients who have consumed free credit.
I have generated that records but now clients with same login ID's are repeating in the records.
I dnt want to display the login ID again but want to display all the numbers they have called.
Here is the code of my view
#model IEnumerable<MyYello.Admin.Models.CallHistory>
#{ViewBag.Title = "UsersWhoHaveConsumedFreeCredit";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Users Who Have Consumed Free Credit</h2>
<table class="table table-striped table-bordered tablesorter" style="display: block">
<thead>
<tr>
<th>Login</th>
<th>FirstName</th>
<th>LastName</th>
<th>Email</th>
<th>Country</th>
<th>Phone</th>
<th>TarrifDesc</th>
<th>CalledNum</th>
<th>CallStart</th>
<th>CallEnd</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>#item.Login</td>
<td>#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.Email</td>
<td>#item.Country</td>
<td>#item.Phone</td>
<td>#item.TariffDescription</td>
</tr>
}
#if (!Model.Any())
{
<tr>
<td colspan="14">No Record Found</td>
</tr>
}
</tbody>
</table>
Just need an idea how
You should group by user login first then. Here's an example:
#foreach (var group in Model.GroupBy(history => history.Login))
{
var item = group.First();
<tr>
<td>#item.Login</td>
<td>#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.Email</td>
<td>#item.Country</td>
<td>#string.Join(" - ", group.Select(history => history.Phone))</td>
<td>#item.TariffDescription</td>
</tr>
}
Related
I want to create a table that its data is a Map< String, List < Object> >.
So the table has one header that and the rows should have the exact data.
Map.key
Object.item1
Object.item2
Object.item3
So since it is a List of Object i want one row for every Object of the List and the Map.key to be repeated.
So i need to iterate through keys like
<table>
<thead>
<tr>
<th>Code</th>
<th>Status</th>
<th>Flag</th>
<th>Message</th>
</tr>
</thead>
<tbody>
<tr th:each= "result : ${myMap}">
<td th:text="${result.key}"></td>
<td><table>
<tr th:each="obj: ${result.value}">
<td th:text="${not #lists.isEmpty(obj.errorList)}?'Error':'Warning'"></td>
<td th:text="${obj.flag}==true?'YES':'NO'"></td>
<td th:text="${not #lists.isEmpty(obj.errorList)}?${obj.warningList}:${obj.errorList}"></td>
</tr>
</table></td>
</tr>
</tbody>
</table>
but this solution places a table in a table. I want to use one header and iterate the lists and place the variables in the main table .
I think you're looking for a structure like this:
<table>
<thead>
<tr>
<th>Code</th>
<th>Status</th>
<th>Flag</th>
<th>Message</th>
</tr>
</thead>
<tbody>
<th:block th:each= "result : ${myMap}">
<tr th:each="obj: ${result.value}">
<td th:text="${result.key}" />
<td th:text="${not #lists.isEmpty(obj.errorList)}?'Error':'Warning'" />
<td th:text="${obj.flag}==true?'YES':'NO'" />
<td th:text="${not #lists.isEmpty(obj.errorList)}?${obj.warningList}:${obj.errorList}" />
</tr>
</th:block>
</tbody>
</table>
I am trying to update my array of contacts type on DOM. However I am getting every value when I am calling that array in a function but that value of array is not getting updated in DOM.
import {Component} from 'angular2/core';
#Component({
selector:'contacts',
templateUrl:'./dev/RouteComponents/contacts.component.html'
})
export class ContactsComponent{
checking=false;
contacts=[
{firstname:'vishu',lastname:'handa',contactno:'12654',gender:'male'},
{firstname:'lalit',lastname:'gupta',contactno:'56489',gender:'male'},
{firstname:'aman',lastname:'singh',contactno:'48984',gender:'male'},
{firstname:'gaurav',lastname:'gupta',contactno:'5485',gender:'male'}
];
addContactToContactList(firstname,lastname,contact,gender)
{
console.log(firstname.value+"--"+lastname.value+"--"+contact.value+"--"+gender.value);
this.contacts.push({firstname:firstname.value,lastname:lastname.value,contactno:contact.value,gender:gender.value});
this.run();
}
run()
{
console.log(this.contacts.length);
this.checking = true;
}
}
<p *ngIf="checking">checking</p>
<table class="table table-bordered table-hover table-condensed">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Contact Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr *ngFor="#contact of contacts">
<td>{{contact.firstname}}</td>
<td>{{contact.lastname}}</td>
<td>{{contact.contactno}}</td>
<td>{{contact.gender}}</td>
</tr>
</tbody>
</table>
Value is not getting updated in DOM
Change your table rows tr tag for *ngfor as below and check it again :
<tr *ngFor="let contact of contacts">
<td>{{contact.firstname}}</td>
<td>{{contact.lastname}}</td>
<td>{{contact.contactno}}</td>
<td>{{contact.gender}}</td>
</tr>
I am using knockout binding to bind some data into html tables. My knockout view Model had multiple products and each product will have multiple chars. I want to display the products in one table and when i select the link "show chars" it should display the corresponding chars in below table.
This is my View Model
var ProductViewModel = function(items) {
this.items = ko.observableArray(items);
this.itemToAdd = ko.observable("");
this.addItem = function() {
if (this.itemToAdd() != "") {
this.items.push(this.itemToAdd());
this.itemToAdd("");
}
}.bind(this);
};
And this is my html tables
<div id="productTable">
<table class="ui-responsive table">
<thead>
<tr>
<th >Product Name</th>
<th >Description</th>
<th >Parent?</th>
</tr>
</thead>
<tbody id="pBody" data-bind="foreach: items">
<tr class="success" >
<td><span data-bind="text: name"></span>
</td>
<td><span data-bind="text: desc"></span>
</td>
<td>show chars</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="productChars">
<div id="productCharTable">
<table class="ui-responsive table">
<thead>
<tr>
<th >Char Name</th>
<th >Description</th>
<th >Length</th>
<th >Type</th>
</tr>
</thead>
<tbody id="pBody" data-bind="foreach: $data['chars']">
<tr class="success">
<td><span data-bind="text: name"></span>
</td>
<td>asdf asdfasdf</td>
<td>10</td>
<td>String</td>
</tr>
</tbody>
</table>
</div>
I am able to bind the products into first table. But for characteristics i am not sure how to achieve the same.
Could someone please help me in figuring out how to achieve the same.
Here is the jsfiddle
https://jsfiddle.net/sirisha_k/0Ln7h2bo/7/
As #supercool pointed out you can use "data-bind='with selectedItem'" to populate the second table with chars data. For that you need to add one more item into your model called selectedItem and every time you select or add a row, you point the selectedItem to that elementdata. And use "data-bind='with selecteItem'" for second table.
var ProductViewModel = function(items) {
this.items = ko.observableArray(items);
this.selectedItem = ko.observableArray();
this.itemToAdd = ko.observable("");
this.addItem = function() {
if (this.itemToAdd() != "") {
this.items.push(this.itemToAdd());
this.itemToAdd("");
}
}.bind(this);
};
and on row select call some function selectedItem($data) where $data refers to the current item.
then set that data to selectedItem in model.
function selectedItem(prod){
ProductViewModel.selectedItem(prod);
}
I have a bit of a unique situation, I am hoping knockout js provides a way to accomplish this.
I have the following structure:
Order = function() {
var self = this;
self.Name = 'default';
}
Customer = function() {
var self = this;
self.Name = 'default';
self.Orders = [];
}
I have the following table
<table>
<thead>
<tr>
<th>Customer Name</th>
</tr>
</thead>
<tbody data-bind="foreach: CustomerArray">
<tr>
<td data-bind="text: Name"></td>
</tr>
</tbody>
</table>
So this is great, it gives me a list of all my customer names.
Now for step two, I MUST format the table in a way that it lists. Order Name, then Customer Name at the bottom:
Customer Name (TH LABEL)
Order1
Order2
Order3
Smith, Frank
I came up with the idea of nesting my order array by including a tbody inside of each customer iteration, but I don't like this approach since the column width's from order to customer won't align since they are different tables.
Does anyone have any good ways to solve my unusual problem?
Thank you!
You could use "containerless control flow syntax" (Note 4 on the foreach docs) to render a TD for each order, then the customer, without a containing element:
<table>
<thead>
<tr>
<th>Customer Name</th>
</tr>
</thead>
<tbody data-bind="foreach: CustomerArray">
<!-- ko foreach: Orders -->
<tr>
<td data-bind="text: OrderDetails"></td>
</tr>
<!-- /ko -->
<tr>
<td data-bind="text: Name"></td>
</tr>
</tbody>
</table>
The commented block creates a binding scope just like the one on TBODY, but without the containing element.
This should work :
<table>
<thead>
<tr>
<th>Customer Name</th>
</tr>
</thead>
<tbody data-bind="foreach: CustomerArray">
<!-- ko foreach: Orders -->
<tr>
<td data-bind="text: Name"></td>
</tr>
<!-- /ko -->
<tr>
<td data-bind="text: Name"></td>
</tr>
</tbody>
</table>
I hope it helps.
I am trying to display a table using Wicket. I am using Panel to create the table and PropertyColumns to add the columns.
How do I group few of the columns into one single column.
It seems that you are using a DataTable or descendant. For your case i would use a ListView where you can easier control the output HTML.
In HTML:
<table>
<thead>
<tr>
<th rowspan="2">Product</th>
<th colspan="2">Unit tests</th>
</tr>
<tr>
<th>Passed</th>
<th>Failed</th>
</tr>
</thead>
<tbody>
<tr wicket:id="listView">
<td wicket:id="productComponent">Product</td>
<td wicket:id="passedComponent">PassedColumn</td>
<td wicket:id="failedComponent">FailedColumn</td>
</tr>
</tbody>
In Java:
add(new ListView<SomeDetails>("listView", listData)
{
public void populateItem(final ListItem<SomeDetails> item)
{
final SomeDetails data= item.getModelObject();
item.add(new Label("productComponent", data.getProduct()));
item.add(new Label("passedComponent", data.getPassed()));
item.add(new Label("failedComponent", !data.getPassed()));
}
});