It appears that when using the knockout binding for igGrid, the column sorting function doesn't sort items as they are added into the underlying observable array. I've created a jsFiddle here to demonstrate. If you sort by one of the columns and then add a new item, the new item appears at the bottom of the grid and not where it should be in the current sort order. Also if an item is updated it is not resorted. Is there a configuration option that I am not performing correctly?
Hello Colin,
Please let me know if I can provide any further assistance regarding this matter.
The error occurred in console after updating the row because of not specifying the datatype for the columns like below:
columns: [
{ key: 'name', headerText: 'Name', dataType: 'string' },
{ key: 'age', headerText: 'Age', dataType: 'number' }
],
Also, to sort the column after adding and updating a row, you just need to call the sortMultiple method like below after adding and updating a row.
var add = function () {
var koItem = {
name: ko.observable("ASDFD"),
age: ko.observable(27),
state: ko.observable(1)
};
koData.push(koItem);
$('#grid').igGridSorting('sortMultiple');
var update = function () {
var age = koData()[1].age();
koData()[1].age(age + 1);
I have updated the JSFidlle http://jsfiddle.net/mj4N2/100/ which demonstrates the same.
Please let me know if you have any questions.
Thank you for your feedback. I have updated the original jsFiddle here but do not see a resolution to the issue. Did I incorrectly implement your suggestion?
A possible solution for this issue is handling the columnSorted event of the “Sorting” feature and the editRowEnded event of the “Updating” feature. When the grid is sorted helper variables would take the values of the last used sorting settings. When a record is added or edited the grid would be sorted again regarding those previously saved settings.
features:
[
{
name:"Sorting",
type: "local",
columnSorted: function (evt, ui){
colKey = ui.columnKey;
dir = ui.direction;
},
…
name:"Updating",
editRowEnded: function(evt, ui){
$('#grid1').igGridSorting('sortColumn', colKey, dir);
}
A sample is attached for your reference. Feel free to modify it and use it in your project if needed.
Please let me know if this helps. If you need approach using KnockOut or is any further questions arise don’t hesitate to contact us again.
Rows not being resorted after a KO update occurs is a deliberate choice and it works in the same way as if you would add/update rows through the Updating feature. The idea behind it is that added rows should be clearly visible to the user so that he knows what he'll send to the server should he choose to save those changes. In a grid with a lot more rows, added ones can be easily lost if sorting gets reapplied.
Because of this I suggest you implement your use case on an application level, by manually resorting the grid after a change in the KO data source. You can achieve this by calling the "sortMultiple" function of the Sorting widget.
$("#grid").igGridSorting("sortMultiple");
Hope this helps! Thank you for using Infragistics forums!
Best regards,
Stamen Stoychev