Does the Knockout binding for igGrid support a callback for changes in row selection? I couldn't find it described in the help documentation.
That was a great idea to put the event function in the viewmodel. My code is a lot cleaner now. Thanks!
Dirq, thanks for you reply. I actually found a better solution for basic row selection using the row selection event provided by the igGridSelection module. I hadn't known to look there before. To wire it it I do something like the following where onRowSelection is a public method on my viewmodel:
<table id="grid1" data-bind="igGrid: { [other options...],features: [{ name: 'Selection', mode: 'row', multipleSelection: false, rowSelectionChanged: onRowSelection }, {name: 'Updating', enableAddRow: false, enableDeleteRow: false, editMode: 'none' }
] }"></table>
I'm doing it, but it's messy right now until IG puts out a better way. (igGrid, IgniteUI 13.1.20131.2143)
I put my igGrid initialization in a function like this:
function loadControls(viewModel){/*init the grid in here so i have access to the view model*/}
I then use the RowSelectors feature and handle the checkBoxStateChanged event like so:
checkBoxStateChanged: function (evt, ui) { //Knockout ViewModel, but it could just be an array var boundModel = viewModel.selectedItems; //the record in the grid var r; if (ui.isHeader) { //clear my viewModel for later re-adds boundModel.removeAll(); if (ui.grid.selectedRows().length > 0) { if (ui.state == 'on') { for (var i = 0; i < ui.grid.selectedRows().length; i++) { r = ui.grid.findRecordByKey(ui.grid.selectedRows()[i].id); if (r != null) boundModel.push(r); } } return; } } //my users could change the multiselect option on the fly if (viewModel.allowMultipleSelections() === false) boundModel.removeAll(); r = ui.grid.findRecordByKey(ui.rowKey); if (r != null) { if (ui.state == 'on') boundModel.push(r); else boundModel.remove(r); } }
To complete the "bindings" I also handle the rowsRendered event so it can select on paging, etc:
rowsRendered: function (evt, ui) { //Knockout ViewModel, but it could just be an array var boundModel = viewModel.selectedItems; var gridId = ui.owner.id(); //For each of my saved selected items //select the checkbox on the grid for (var i = 0; i < boundModel().length; i++) { //the item's primary key var key = boundModel()[i].Id; for (var x = 0; x < ui.owner.rows().length; x++) { //the row contains the key on an attribute data-id="primarykey" var rowKey = ui.owner.rows()[x].getAttribute("data-id"); if (key == rowKey) { $('#' + gridId).igGridSelection('selectRow', x); } } } }
I know it's not clean, but it gets the job done.
I'm also looking for a way to bind the selected rows with a knockout observable array.