2.1.0 - Removing gridservice? How to Get/Remove Grid now?

[davidjsilva]

We used kg.gridService GetGrid to get the grid and then also RemoveGrid to tear down the grid. How should we do this now?

[orneryd]

The GridService wasn't doing anything. if the grid is no long bound through knockout to an element. that memory is de-referenced through garbage collection. I am not entirely sure why there was a gridService in the first place since it didn't do much. you shouldn't have to "tear down" a ui widget other than removing the element from the dom and thus removing the bindings from knockout.

[davidjsilva]

GetGrid was extremely helpful for us so that we could get access to the kg.Grid object and be able to use some of its elements like $viewport and $root, etc, some of its public observable properties like renderedRows, columns, etc, and also some if its public functions.

So not sure what the best way to get access to it now but I've noticed that jQuery UI Widgets for example will add the object as a data attribute. So they'll do something like $element.data('kogrid', grid). Not sure if that's the answer here but that is one option.

OK agreed on RemoveGrid it wasn't really doing much anyways even though I believe its not tearing down correctly as I noticed the same issues that Issue 122 was reporting https://github.com/ericmbarnard/KoGrid/issues/122. I needed to write some extra code to make sure all the subscriptions and stuff were removed from memory correctly. Just removing the node was not enough.

[orneryd]

The best way is to get the element that you bound the grid to via jquery and then run ko.utils.dataFor(element). That will return the grid instance and you should have access to everything.

The GridService was actually causing a memory leak in IE8 by making the element have a reference to the grid instance and holding references to a grid that was no longer in use. Letting knockout/javascript garbage collection handle the destroy and create of the grid make much more sense than trying to do it manually.

[davidjsilva]

OK I tried using the ko.dataFor to get the grid instance but it gives me the viewmodel that it was bound to. See http://jsfiddle.net/XHAma/2/ for example. I log to console and you can see that ko.dataFor is returning the view model and not the grid instance.

[orneryd]

try this fiddle

http://jsfiddle.net/timothyswt/XHAma/3/

console.log(ko.dataFor($('#myGrid').children()[0]));

   1. $$indexPhase: false
   2. $canvas: jQuery.fn.jQuery.init[1]
   3. $footerPanel: jQuery.fn.jQuery.init[0]
   4. $groupPanel: jQuery.fn.jQuery.init[1]
   5. $headerContainer: jQuery.fn.jQuery.init[1]
   6. $headerScroller: jQuery.fn.jQuery.init[1]
   7. $headers: jQuery.fn.jQuery.init[1]
   8. $root: jQuery.fn.jQuery.init[1]
   9. $styleSheet: jQuery.fn.jQuery.init[1]
   10. $topPanel: jQuery.fn.jQuery.init[1]
   11. $userViewModel: Object
   12. $viewport: jQuery.fn.jQuery.init[1]
   13. adjustScrollLeft: function (scrollLeft) {
   14. adjustScrollTop: function (scrollTop, force) {
   15. allSelected: function observable() {
   16. buildColumnDefsFromData: function () {
   17. buildColumns: function () {
   18. calcMaxCanvasHeight: function () {
   19. cantPageBackward: function dependentObservable() {
   20. cantPageForward: function dependentObservable() {
   21. canvasStyle: function dependentObservable() {
   22. clearSortingData: function (col) {
   23. columns: Object[0]
   24. config: Object
   25. configGroups: Object[0]
   26. configureColumnWidths: function () {
   27. disableTextSelection: function observable() {
   28. elementDims: Object
   29. elementsNeedMeasuring: true
   30. enablePaging: false
   31. eventProvider: kg.EventProvider
   32. filterText: function observable() {
   33. filteredData: Object[0]
   34. fixColumnIndexes: function () {
   35. fixGroupIndexes: function (){
   36. footer: null
   37. footerStyle: function dependentObservable() {
   38. footerVisible: true
   39. gridId: "ng1355447653180"
   40. groupBy: function (col) {
   41. headerRow: null
   42. headerRowTemplate: "<div data-bind="foreach: visibleColumns"><div
   data-bind="kgHeaderCell: $data, attr: { 'class': 'kgHeaderCell col' +
   $index() }"></div></div>"
   43. headerScrollerDim: function () {
   44. headerScrollerStyle: function dependentObservable() {
   45. headerStyle: function dependentObservable() {
   46. init: function () {
   47. jqueryUITheme: false
   48. lastSortedColumn: undefined
   49. lateBindColumns: false
   50. maxCanvasHt: function observable() {
   51. maxPages: function dependentObservable() {
   52. maxRows: function observable() {
   53. maxRowsDisplay: function dependentObservable() {
   54. minRowsToRender: function () {
   55. multiSelect: function observable() {
   56. nonAggColumns: function dependentObservable() {
   57. pageBackward: function () {
   58. pageForward: function () {
   59. pageToFirst: function () {
   60. pageToLast: function () {
   61. pagingOptions: Object
   62. prevScrollIndex: 0
   63. prevScrollTop: 0
   64. refreshDomSizes: function () {
   65. removeGroup: function (index) {
   66. renderedRows: Object[0]
   67. resizeOnData: function (col) {
   68. rootDim: kg.Dimension
   69. rowFactory: kg.RowFactory
   70. rowHeight: 30
   71. rowTemplate: "<div data-bind="foreach: $grid.visibleColumns, css: {
   'ui-widget-content': $grid.jqueryUITheme }"><div data-bind="attr: {
   'class': cellClass() + ' kgCell col' + $index() }, kgCell:
   $data"></div></div>"
   72. searchProvider: kg.SearchProvider
   73. selectedItemCount: function dependentObservable() {
   74. selectedItems: Object[0]
   75. selectionService: kg.SelectionService
   76. setRenderedRows: function (newRows) {
   77. showColumnMenu: true
   78. showFilter: true
   79. showGroupPanel: function dependentObservable() {
   80. showMenu: function observable() {
   81. sortData: function (col, direction) {
   82. sortInfo: function observable() {
   83. sortedData: Object[0]
   84. styleProvider: kg.StyleProvider
   85. toggleSelectAll: function () {
   86. toggleShowMenu: function () {
   87. topPanelHeight: function observable() {
   88. topPanelStyle: function dependentObservable() {
   89. totalFilteredItemsLength: function dependentObservable() {
   90. totalRowWidth: function () {
   91. viewportDimHeight: function dependentObservable() {
   92. viewportStyle: function dependentObservable() {
   93. visibleColumns: function dependentObservable() {
   94. __proto__: Object

[orneryd]

you could also just write a small plugin to get the grid instance

https://github.com/ericmbarnard/KoGrid/wiki/Plugins

[davidjsilva]

This works perfect, thanks!

[avenidaverde]

I can not find the examples of the KO grid posted by ericmbarnard?????