{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/angular-data-grid/accessing-data/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This section covers the ways data can be accessed once it has been supplied to the grid."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Each time you pass data to the grid, the grid wraps each data item with a "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/row-object/"},"children":[{"type":"text","value":"Row Node"}]},{"type":"text","value":" object. For example, if your data has 20 rows, the grid creates 20 Row Node objects, each Row Node wrapping one item of your data."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is sometimes handy to access these Row Nodes. One example where it is handy is if you want to select a row, you can call "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowNode.setSelected(true)"}]},{"type":"text","value":" to select it. This section details the different ways a Row Node can be accessed."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following methods are provided for accessing the individual Row Nodes. A deeper explanation of these methods, along with examples, is provided further down."}]},{"type":"element","tagName":"h2","properties":{"id":"accessing-row-node-api-methods","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#accessing-row-node-api-methods","ariaLabel":"accessing row node api methods permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Accessing Row Node API Methods"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-api/api.json","section":"rowNodes"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"accessing-rows-by-row-id","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#accessing-rows-by-row-id","ariaLabel":"accessing rows by row id permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Accessing Rows by Row ID"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The easiest way to get a Row Node is by its Row ID. The ID is either provided by you using the grid callback "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getRowId()"}]},{"type":"text","value":", or generated by the grid using an internal sequence."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    // callback tells the grid to use the 'id' attribute for IDs, IDs should always be strings\n    getRowId: params => params.data.id\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To lookup a Row Node use "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getRowNode()"}]},{"type":"text","value":" on the Grid API as follows:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n// get the row node with ID 55\nconst rowNode = gridOptions.api.getRowNode('55');\n// do something with the row, e.g. select it\nrowNode.setSelected(true);\n"}]},{"type":"element","tagName":"h2","properties":{"id":"iterating-rows","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#iterating-rows","ariaLabel":"iterating rows permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Iterating Rows"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Sometimes you may want to iterate through all the Row Nodes in the grid. This can be done using the grid's iteration APIs. The iteration APIs go through every Row Node, regardless of whether the Row Node is displayed or not. For example, if grouping and the group is closed, the group's children are not displayed by the grid, however the children are included in the iteration 'for-each' methods."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n// iterate through every node in the grid\ngridOptions.api.forEachNode((rowNode, index) => {\n    console.log('node ' + rowNode.data.athlete + ' is in the grid');\n});\n// iterate only nodes that pass the filter\ngridOptions.api.forEachNodeAfterFilter((rowNode, index) => {\n    console.log('node ' + rowNode.data.athlete + ' passes the filter');\n});\n// iterate only nodes that pass the filter and ordered by the sort order\ngridOptions.api.forEachNodeAfterFilterAndSort((rowNode, index) => {\n    console.log('node ' + rowNode.data.athlete + ' passes the filter and is in this order');\n});\n// iterate through every leaf node in the grid\ngridOptions.api.forEachLeafNode((rowNode, index) => {\n    console.log('node ' + rowNode.data.athlete + ' is not a group!');\n});\n"}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"All of the methods above work with the "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/client-side-model/"},"children":[{"type":"text","value":"Client-Side"}]},{"type":"text","value":"\nrow model. For all the other row models ("},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/viewport/"},"children":[{"type":"text","value":"Viewport"}]},{"type":"text","value":",\n"},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/infinite-scrolling/"},"children":[{"type":"text","value":"Infinite"}]},{"type":"text","value":" and "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/server-side-model/"},"children":[{"type":"text","value":"Server-Side"}]},{"type":"text","value":") the only method\nthat is supported is "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.forEachNode()"}]},{"type":"text","value":" and that will return back Row Nodes that are loaded into\nbrowser memory only (as each of these row models use a data source to lazy load rows)."}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"example-using-for-each-methods","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-using-for-each-methods","ariaLabel":"example using for each methods permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example Using For-Each Methods"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows the different For-Each API methods as follows:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"For-Each Node"}]},{"type":"text","value":": Prints out every row in the grid. It ignores filtering and sorting."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"For-Each Node After Filter"}]},{"type":"text","value":": Prints out every row in the grid, except those filtered out."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"For-Each Node After Filter and Sort"}]},{"type":"text","value":": Prints out every row in the grid, except those filtered,\nand in the same order they appear on the screen if sorting is applied."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"For-Each Leaf Node"}]},{"type":"text","value":": Prints out every row in the grid except group rows."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the example, try applying some sorts and filters, and see how this impacts the different operations."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Using For-Each","name":"using-for-each","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\",  \"menu\", \"setfilter\", \"rowgrouping\"], \"exampleHeight\": 590 }"},"children":[]}]}]},"frontmatter":{"title":"Accessing Client-Side Data","version":null,"enterprise":null,"description":null},"headings":[{"id":"accessing-row-node-api-methods","depth":2,"value":"Accessing Row Node API Methods"},{"id":"accessing-rows-by-row-id","depth":2,"value":"Accessing Rows by Row ID"},{"id":"iterating-rows","depth":2,"value":"Iterating Rows"},{"id":"example-using-for-each-methods","depth":2,"value":"Example Using For-Each Methods"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"angular","srcPath":"/accessing-data","pageName":"accessing-data"}},
    "staticQueryHashes": ["1766026005","3577950178","699667431"]}