I would like to use mutli select with checkboxes functionality of ig grid with knockout. In my collection of records i have observable called "selected". I want to know how i can tie this observable with ig gird multi select so if someone select/unselect the row this observable will also change and if I modify this observable it select/unselect the row. Also i want to implement the same for select all checkbox.
-Manish
Hello Manish,
There is no built-in functionality that ties the selected rows with a property from a KO model. However, using igGridSelection's events and API you can implement it yourself. I am attaching a sample showing one way this can be achieved. Another way could be specifying the selected observable as computed, then implementing a getter that asks Selection if the specific row is selected and a setter that uses Selection's API to select the row, essentially leaving Selection as the only holder of the actual selected value for each row.
I hope this helps! Thank you for using Infragistics forums!
Best regards,
Stamen Stoychev
This works only one way. When i have selected as true /false it is not selecting/deselecting the row.See attached sample.
It seems you attached the same sample but regardless it does work two-ways. This part of the code is responsible for selecting/deselecting rows based on a value change in the selected observable:
item.selected.subscribe(function (newValue) { var grid = $("#grid1"); if (newValue) { grid.igGridSelection("selectRowById", id); } else { grid.igGridSelection("deselectRowById", id); }});
Since it's not a real binding but rather a change subscription, this will not pre-select rows on initialization if you have any 'true' values for the selected obserable. You could work around this by calling valueHasMutated() for such records. I am attaching a modified sample with this workaround and a little UI change in the list portion so that there is an UI available to change the selected value from outside the grid.
Please, have in mind that this approach is more suitable for grids with low amounts of records. Because Selection doesn't keep an exact list of selected state changes but rather just returns the new array of selected items, each change needs to be found based on a costly comparison with a previous state. Therefore performance may degrade quickly when the record count goes to the hundreds. The approach using computed observables may help for such scenarios.