I have a html grid that returns a checkbox with each row. Currently I have these bound with knockout to my viewmodel. I've gotten far enough to capture the id of what is checked for a row but I'm not sure how to make Knockout give me a list of all rows checked and the content of every cell for the row.
Ultimately the intent is to let users select multiple rows from this table and then export that data. So I need a good way to gather the entire row up.
I've only been using Knockout for about a week so am I trying to get it to track something that perhaps I'd be better of just looping through the table with javascript?
<tbody data-bind="foreach: projectListing">
<tr data-bind="css: $data.rowclass">
<td><input type="checkbox" data-bind="value: $data.id, checked: $root.selectedRows, click: $root.toggleRowSelection"/></td>
<td data-bind="text: $data.SORT_ID"></td>
<td data-bind="text: $data.PROJ_ID"></td>
</tr>
</tbody>
*I know that code isn't enough to go on but I had to put something in here so I could list a link to jsFiddle.
I have a fiddle going that represents this to show code I have so far. What I'd like to do with this fiddle is each time I check the checkbox, the entire row content should show up. That would get me to the place I need to be in my real project.
Any ideas on how to go about this?
Here is what I have so far.
http://jsfiddle.net/robhortn/ad2Yu/4/
Instead of getting the id with the checked binding, you can create a selectedItems computed to get the selected items objects
self.selectedItems = ko.computed(function() {
return self.availableItems().filter(function(item) {
return item.Selected();
});
});
Html
Selected Books:
<div data-bind="foreach: $root.selectedItems">
<span data-bind="text: Name"></span>
<br/>
</div>
See this JSFiddle
Related
I am fetching list of posts with sort order from Database and binding with table using ng-repeat of rows. I set them up so you can reorder them with drag-and-drop using Angular Dragula. This works fine.
After dragging, Whenever I click on save button I should get Updated Sort Order, So that I can update it on Database.
Before Drag:
Let Suppose post_sort_order:1,2,3,5
After Drag :
post_sort_order: 4,2,3,1
HTML:
<tbody md-body ui-sortable >
<tr md-row>
<td>
<div dragula-model="vm.GroupData.groups" class="drag-container" dragula='"drag-container"' layout="column" layout-xs="column" layout-align="space-between" layout-margin>
<tri-widget ng-repeat="order in vm.GroupData.groups" flex title="{{::order.group_name | triTranslate}}" title-position="top" palette-background="blue-grey:600" background="primary"></tri-widget>
</div>
</td>
</tr>
</tbody>
Javascript:
Result: vm.GroupsData.groups:
Now, Once I click on Save button, I should get updated sort list like here 4,3,2,1.
Actual post_sort_order: 1,2,3,5
Expected post_sort_order:3,1,5,2
Is there a way to get updated list ?If yes, Please let me know.
Thanks in advance.
I'm trying to create a table with a dynamic number of rows and columns. Each row is a name column followed by some checkboxes
<tr *ngFor="let groupPerms of getGroups()">
<td>{{groupPerms.name}}</td>
<td *ngFor="let permissionType of availablePermissionTypes">
<input id="{{groupPerms.name}}.{{$index}}"
type="checkbox"
[checked]="groupPerms.checked"
(click)="doSomething()"/>
</td>
</tr>
If i drop the outer *ngFor, and 'hardcode' it with the first row, then it works fine and the doSomething method is called.
With the outer *ngFor, the click appears to click on the table row element (it flashes slightly). Using chrome's dev tools, clicking seems to be clicking on the repeat part. Adding a (click) to the tr has no effect
<!--bindings={"ng-reflect-ng-for-of": "[object Object],[object Object"}-->
I won't lie, I have no idea why this has fixed it, but for closure... adding the trackBy (with indexTracker being a function in the component) has done the job. If anyone knows the reason for this working I would be grateful
<tr *ngFor="let groupPerms of getGroups(); trackBy: indexTracker">
<td>{{groupPerms.name}}</td>
<td *ngFor="let permissionType of availablePermissionTypes">
<input id="{{groupPerms.name}}.{{$index}}"
type="checkbox"
[checked]="groupPerms.checked"
(click)="doSomething()"/>
</td>
</tr>
I have a JSON as given in the link and i want it to display it in a table. i had various options for that and i can able to bring it successfully in that table i also have an extra column for edit and view buttons. i'm facing my difficulty in the view option. i wanted the the particular selected row should be displayed as below
I tried ngHandsontable but the problem i'm facing is i can't able to populate the values in exact cells as i want in the above merged cells and also each row has different entities in my required table. This is a table and i hope it is possible to make it display in the way i want in angularjs.
Can some one help me to solve this
Thanks in advance
note:
I am trying to bring this table below the first table i use ng-show directive for this table so only when the view option clicked it will open on the same page
The below table is 16x4 cells table images and chart has a rowspan=4
images has a colspan=2 and chart has a colspan=4
Example: http://jsfiddle.net/kevalbhatt18/sjpyffd8/1/
I have done with basic functionality. Now apply css on table
<div ng-controller="MyCtrl">
<div ng-repeat="line in parent">
<div class="header">{{line.name}}</div>
<table>
<tr>
<td ng-repeat="satellites in line.satellites">{{satellites.name}}
<div>{{satellites.image}}</div>
</td>
</tr>
<tr>
<td ng-repeat="continents in line.continents">{{continents.name}}
<div>{{continents.image}}</div>
</td>
<tr/>
</table>
<div class="header">Population</div>
<div>{{line.population.graph}}</div>
</div>
</div>
I have a filterable table containing a collapsible list in a column. The collapsible contains another table. Sample of the situation.
The problem is that when anything is written to filter only the required items, the inner table also gets filtered. Is there a way to avoid this.
Suggestions about how else to display something like this are also welcome.
If you want to filter only from the Name column, you can try to use below code:
$('#filter').keyup(function () {
var stringValue = $(this).val();
$("#outer-table tr.row").each( function( index ) {
$(this).hide();
$(this).find(".panel-title a:contains("+stringValue+")").parents("tr").show();
});
});
EDIT: I have tested the new code above, it works as expected.
HTML changes, easier to get ONLY every <tr> that are part of your outer-table:
Change your outer-table tag from <tbody class="searchable">, into this, <tbody id="outer-table" class="searchable">
Then add a selector to every <tr> inside outer-table but NOT inside inner-table, like this:
</tr>
<tr class="row">
<td><div id="collapsibleMain2" class="panel-group">
</tr>
<!-- and so on -->
For more info about the jQuery functions that I used above:
contains
each
hide
Please check this:
http://plnkr.co/edit/61JgnU?p=preview
If you start filling the fields you will see the fields been printed. Which is fine.
Now if you press the Add Input then bunch of fields will be added.
I need to add the newly added fields value to be printed under the main fields. (Please let me know if you need more explanation.)
Here is how I need it to be for the newly added fields:
I don't know how to show the fields without needing to make another $scope.fields array.
One more thing, in the $socpe.fields array there are more than 20 different fields, I just put what it needed for this question.
Thanks.
My recommendation would be to loop through your inputs array with the same markup you used for the users. The following seems to work if I understand what you're looking for.
<div ng-repeat="input in inputs">
<table class="table table-bordered">
<tr ng-repeat="field in fields | orderBy: 'index'" ng-show="input[field.id]">
<td class="col-md-4"><b>{{field.name}}</b>
</td>
<td class="col-md-7">{{input[field.id]}}</td>
</tr>
</table>
</div>
Another option you might want to consider is a custom directive taking the fields array and the display array as parameters.