简体   繁体   中英

ui-grid row to have unique id's

Is it possible to have each row in the ui-grid have a unique id? Something along the lines of the first row having an id of "row-0" and the second having "row-1" etc

So:

<div class="ui-grid-row" 
    ng-class="{'ui-grid-row-selected': row.isSelected,'ui-grid-tree-header-row': row.treeLevel > -1}" 
    ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index" 
    ng-style="Viewport.rowStyle(rowRenderIndex)">
        ...
</div>

Would look something like:

<div class="ui-grid-row" 
    id="row-0"
    ng-class="{'ui-grid-row-selected': row.isSelected,'ui-grid-tree-header-row': row.treeLevel > -1}" 
    ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index" 
    ng-style="Viewport.rowStyle(rowRenderIndex)">
        ...
</div>

I have tried the row template but that is setting the id on each cell (probably as expected)

It is so that whilst using Selenium I can select a row by finding it using the id

UPDATE: I have now tried setting the Id on the row template to

row-{{rowRenderIndex}}-cell-{{col.uid}}

and this generates something along the lines of

id="row-0-cell-uiGrid-0007"

if I then navigate away from the screen and come back again the id becomes

id="row-0-cell-uiGrid-00PW"

If the id was consistent each time then I could use this

You can use $index

<div class="ui-grid-row" 
    id="{{$index}}"
    ng-class="{'ui-grid-row-selected': row.isSelected,'ui-grid-tree-header-row': row.treeLevel > -1}" 
    ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index" 
    ng-style="Viewport.rowStyle(rowRenderIndex)">
        ...
</div>

The row and column together forms a tuple (row,column) which is unique for every cell in the grid. For UI-Grid, there is a way to use this concept. Each cell has access to internal scope variable of UI-grid. In this scope there are two keys 'row' and 'col'. Each of these has uid property. Therefore, use the tuple ('row.uid','col.uid') is always unique for each cell. Example of usage (Angular JS):

<div class="ui-grid-cell-contents" trigger-id="{{row.uid + col.uid}}">
{{ COL_FIELD }}</div>

Trigger id is unique for each cell. For multiple grids on same page pass name the grid in scope variable and access it using grid.appScope.gridName

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM