I am populating a secondary table with an observable array that is a child of another observable array but when I select a row from the first table the records in the secondary table are not updated to reflect the selected record from the first table. I can see from the log messages that I have visibility to the collection so it seems like everything is working correctly but the second table is not showing the expected results.
Please see my jsFiddle here:
http://jsfiddle.net/D64Bj/5/
You will see in the log messages that when I click a row in the first table I can see how many records are in the second item in the collection and I get the right Id but the rows in the second table are not updated.
does anyone see what I am doing wrong here? Any suggestions on a better way to handle this using knockout.js? Thanks in advance!
You need to make ActiveTeam a ko.observable, otherwise there won't be any binding:
Here's the changes you need:
<tbody data-bind="foreach: ActiveTeam().Players">
...
myTeams.ActiveTeam = ko.observable(myTeams.Teams()[0]);
...
myTeams.ActiveTeam(item);
Edit: and here's a fiddle
Related
I am just started with angular.I have a table and a button. on-click on the button a new row like previous one should be added in the table.i have added stackblitz link below. i am struggling to figure that out.thanks in advance.
stackblitz link
Here is an example https://stackblitz.com/edit/angular-rs6bkq. You need to create an arbitrary array and use its length to define how many rows to display. Notice the *ngFor directive placed on the tr tag. This is effectively a for loop in your HTML for the number of items in your array. So if you change the length of your array using a function call the number of table rows will update to reflect this.
You can read more about structural directives (like ngFor) here - https://angular.io/guide/structural-directives
Check this if it helps : https://stackblitz.com/edit/angular-add-new-row
I have added some modifications to let inputs have different values.
I have 2 tables in my view both using dataTables , first table works fine but second table when i try to sort data with headers is wiping data from table.
Demo
This is how i defined dataTables for my both tables
to get the idea i used screenshot
Code
here is my second table code to define datatables
var table = $("#customerTable").DataTable();
any idea what is wrong?
If you need more code just let me know i'll update the question.
Update
Based on code i shared in jsFiddle (link in comments) if i move my second table definer to success function of my first table like:
// rest of function then at the end having like...
var otable = $("#customerTable").DataTable();
}
});
});
$("#data_table2 tbody tr:first-child").trigger("click");
});
It will allow me to sort my second table data BUT it replace my data with first data (confused? :) see GIF below)
To see Video version click here
Explanation:
as you see my first selected row has returned data in second table which has value of nullewqrf2wrtf but my second selected row the returned data has value of null
when i click sort on my second data it returns data of my previous selected row nullewqrf2wrtf
Solved
The solution for me was:
Moving my update function completely to my first table success
function
Double check my other functions in that success function and get
misspelled var's
With fixing my var's misspelled id's etc. now i can sort my data and issue in my update part has fixed as well.
Hope it can help others as well.
I'm trying to create a table that looks like a spreadsheet with editable inputs inside each td. I'm using Angular's ComponentFactoryResolver as explained here, to add a row to the table when user clicks the add button.
Once the row is added, I use EventEmitter to emit all the data of that row as the last column value is changed.
I've tried to re implement the same functionality on this StackBlitz.
I'm having the following issues:
I'm unable to emit data from the newly added components. (Check Console)
Once I add a new row, the first row (not dynamic) also stops giving me the emitted data.
I'm not sure how to delete a row if user don't needs it as I don't have the reference to it.
This is what I am suggesting. You can create a list of row objects in the parent (table) component and use *ngFor to loop it over.
<app-row
*ngFor="let row of rowList"
[row]="row"
(entryUpdate)="onEntryUpdated($event)">
</app-row>
Please have a look at this
I have a problem with jQuery function clone(). I think the problem is in the withDataAndEvents input parameter of this method.
Initially, I'm coding a table that has dynamic rows. I'm adding dynamically rows when clicking on a button put only in the first row. the first row contains initially many inputs fields and combo-boxes. Each field is initalized by an ajax call. And each action on a field leads to the refresh (filtering) on the whole fields of a row. I'm also using autocomplete on input fields.
The first row works perfectly. However, when cloning the tag:
If I did not enter values in the first row, the cloned and first row work fine
If I enter a value or values in first row fields and after I clone the , only the first row fields still work. In this case, if I try to change the value of the combo-boxe (which fire a change event for all concerned row fields), the fields of the first row are impacted despite using Ids when changing autocomplete data. Ids of fields, combo-boxes, table rows are dynamically created when clicking on the button to clone the widget.
The code I wrote is too long so I created a fiddle and simplified the case and still have the same problem.
I tried many suggestions that I've found like this, this one or this one in vain :-(
(data.('autocomplete', null), autocomplete("destroy") ...)
Do you have ideas about this issue ?
thanks in advance
Aside from the typo in the test (you are selecting by class instead of the new element by id), the basic problem is you are applying autocomplete before you add it to the DOM.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/87jcw1y0/2/
I just reversed the order of these two lines:
$('.body').append(clone);
applyAutoComplete2('#myinput' + inc);
The cause... Some plugins use storage data associated with the DOM element, or attach events to ancestors etc. None of these can happen with a disconnected DOM element, so just attach it to the DOM first.
I think ur asking this
Check in this link http://jsfiddle.net/bsarunmca/87jcw1y0/3/
applyAutoComplete1('#myinput1');
$("button").click(function() {
inc = inc+1;
$('#myinput1').clone().attr('id','myinput'+inc).appendTo('.add-this');
$('#myinput'+inc).val('');
applyAutoComplete2('#myinput'+inc);
});
I got a grid, with checkboxes plugin and Pagination.
I can get selected rows only for the current page I'm at, but not of all the rows. How one can do that?
I search the code, tried finding the global array slickgrid is taking the selected rows when it enters a new page (dataView.syncGridSelection(grid, true)), but didn't manage doing so till now...
Thanks for any help.
You can subscribe to the onPagingInfoChanged event - which gets triggered when you navigate to a new page - then store the selected rows from that page into a global array for your reference.
dataView.onPagingInfoChanged.subscribe(function(e,pagingInfo) {
console.log(grid.getSelectedRows());
// add selected rows to a global array
}
Note: further to what you mentioned, the grid.getSelectedRows() returns the row number relative to the visible rows. So rows on page 2 will start with 0. I would advise to instead get the id of the row and store that in the global array instead (you know, the one each row in the dataview should have and which is unique).
Hope this gives you a start. Let me know if this helps!