I am using knockout and when I have binded a click event on my table row. However, when I click on the row, it displays the following error:
function d(){if(0<arguments.length){if(!d.equalityComparer||!d.equalityComparer(c,arguments[0]))d.H(),c=arguments[0],d.G();return this}b.r.Wa(d);return c}
does anyone know why I am getting this error?
Here's my view for the table:
<tbody data-bind="foreach: customers">
<tr data-bind="click: $root.doSomething">
<td data-bind="text: date"></td>
<td data-bind="text:staff"></td>
<td data-bind="text: ftype"></td>
<td data-bind="text: value"></td>
<td data-bind="text: message"></td>
</td>
</tr>
</tbody>
Here's my viewmodel:
doSomething: function(data) {
var self = this;
self.date(data.date);
self.staff(data.staff);
self.ftype(data.ftype);
self.value(data.value);
self.message(data.message);
}
Does this do the trick?
<tbody data-bind="foreach: customers">
<tr data-bind="click: function() {$root.doSomething($data);}">
Related
What would be the best way to dynamically add an HTML element, such as another column onto a basic HTML table?
I want to have a button below the table, and if the user were to click the button, the event would add the same amount of rows already in the table and add another column. I would want to support about 5 extra columns being added to the table.
Here's my HTML table as of right now:
<table>
<thead>
<tr>
<th id="row-tag"></th>
<th id="option-column">Option 1</th>
</tr>
</thead>
<tbody>
<tr>
<td id="row-tag">P</td>
<td id="option-column">{{ p }}</td>
</tr>
<tr id="row-tag">
<td>
<app-a-p (saveButtonClick)="toggleAP($event)"
[modModalValues]="modModalValues">
</app-a-p>
</td>
<td id="option-column">
<div class="input-group input-group-sm">
$<input
*ngIf="toggleAP==true"
type="text"
name="aP"
size="10"
disabled
value=""
/>
<input
*ngIf="toggleAP==false"
type="text"
name="aP"
size="10"
[ngModel]="con.pA"
(ngModelChange)="con.pA = $event" appFormatP
(blur)="checkAP($event.target.value);
inputTracker.addModifiedValue('Option 1', $event.target.value)"
/>
</div>
</td>
</tr>
<tr>
<td id="row-tag">L</td>
<td id="option-column">${{l}}</td>
</tr>
<tr>
<td id="row-tag">R</td>
<td id="option-column">${{r}}</td>
</tr>
</tbody>
</table>
I think in Angular, you define table based on your data. for example, you have fields array defining columns, and data array defines the what's actually in the table.
<table >
<thead>
<tr>
<th *ngFor='let key of this.fields'>{{key}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor='let row of this.data ' >
<td scope="row" *ngFor='let key of this.fields'> {{row[key]}} </td>
</tr>
</tbody>
</table>
when you need a new column, just push a new field into fields. like
fields.push('newcolumn');
when you need a new row, just do:
data.push({col1: '', col2:'', newcolumn: ''});
Look into the insertRow() and insertCell() functions in JavaScript. This alongside an onClick function that you write will let you edit the table.
A good way of generating a table on UI when using angular would be to use 2D-array (row*column) use can have a button using which you can dynamically add values to this array and have another row/column to the table.
I am displaying table data using NgTableParams in angularjs. I was trying to show NO DATA EXISTS in the table when the data is not available or length is zero, but my code doesn't seems to work.
Demo : http://plnkr.co/edit/nEbjQE1NQW7VF8dlZvyy?p=preview
sample code:
<table ng-table="tableParams" class="table" show-filter="true">
<tbody ng-repeat="user in $data">
<tr ng-show="$data.length > 0">
<td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
{{user.name}}</td>
<td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
{{user.age}}</td>
</tr>
<tr ng-show="$data.length === 0">
<td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
NO DATA FOUND</td>
<td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
</td>
</tr>
</tbody>
js code:
app.controller('MainCtrl', function($scope, NgTableParams) {
$scope.data1 = [];
console.log(" $scope.data1 length " + $scope.data1.length);
$scope.tableParams = new NgTableParams({}, { dataset: $scope.data1});
});
Tried as below too , but it is not displaying the table header and filter for the columns..
Demo : http://plnkr.co/edit/XAOO5tPALVOkQW9hhJCs?p=preview:
<tbody ng-show="!$data.length">
<tr>
<td>
NO DATA FOUND
</td>
</tr>
</tbody>
<tbody ng-repeat="user in $data">
<tr ng-show="$data.length > 0">
....
</tbody>
There are two issues here
The first one is that your ng-repeat directive is in your tbody this will cause your table body to be rendered for every single element in your array.
The second one is that your "NO DATA FOUND" message is inside of your ng-repeat block, no element will be rendered if $data is empty.
The solution would be to move the ng-repeat from your tbody to the actual element that you want to repeat for every item in your array, in this case, the tr that contains the data to be displayed.
<table ng-table="tableParams" class="table" show-filter="true">
<tbody>
<tr ng-repeat="user in $data" ng-show="$data.length > 0">
<td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
{{user.name}}</td>
<td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
{{user.age}}</td>
</tr>
<tr ng-show="$data.length === 0">
<td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
NO DATA FOUND</td>
<td title="'Age'" filter="{ age: 'number'}" sortable="'age'"></td>
</tr>
</tbody>
</table>
Hope it helps!
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 have a question about data binding using knockout.
Here's the problem: I have a table, I what I would like to do is that when a row in table is clicked, I want the values of the row to appear in the input fileds which are located above the table.
so here'
<tbody data-bind="foreach: customers">
<tr data-bind="click: doSomething">
<td data-bind="text: date"></td>
<td data-bind="text:staff"></td>
<td data-bind="text: ftype"></td>
<td data-bind="text: value"></td>
<td data-bind="text: message"></td>
</td>
</tr>
</tbody>
In my viewmodel, I have the following function:
doSomething: function(data) {
var self = this;
self.date(data.date);
self.staff(data.staff);
self.ftype(data.ftype);
self.value(data.value);
self.message(data.message);
}
Here's the error I am getting:
["Unable to parse bindings.↵Message: ReferenceError:… is not defined;↵Bindings value: click: doSomething", "views/myView/index", Object]
0: "Unable to parse bindings.↵Message: ReferenceError: doSomething is not defined;↵Bindings value: click: doSomething"
1: "views/myView/index"
2: Object
length: 3
__proto__: Array[0]
Let me know if I need to provide any more details. I will appreciate your help fplks!
A very basic pattern for this type of thing is to have an array of items and a selectedItem observable that you populate when selecting a row.
Then, you can use the with binding around a section to create your editor.
<table>
<tbody data-bind="foreach: customers">
<tr data-bind="click: $root.selectedCustomer">
<td data-bind="text: name"></td>
</tr>
</tbody>
</table>
<hr/>
<div data-bind="with: selectedCustomer">
<input data-bind="value: name" />
</div>
Sample: http://jsfiddle.net/rniemeyer/Z6VPV/
You need to bind your model to the view
var currentViewModel = function(){
this.doSomething = function(data){
var self = this;
self.date(data.date);
self.staff(data.staff);
self.ftype(data.ftype);
self.value(data.value);
self.message(data.message);
}
var viewModel = new currentViewModel();
ko.applyBindings(viewModel);