bug in Infinite Scroll - column wrapText has no effect

While coding with infinite scrolling I had encountered a problem with columnDefinition wrapText that takes no effect.

attached is the json data: 
[data-short.json](https://github.com/user-attachments/files/16927334/data-short.json)

Code with and without "infinite scroll"

`
import json
import dash
import warnings
import dash_bootstrap_components as dbc
import pathlib
import dash_ag_grid as dag
from dash import Dash, dcc, html
from dash        import html, dcc, callback, Input, Output, State, ctx

rows = json.load(open('data-short.json', 'r'))

page_number = 0
BUFFER_SIZE = 100

cell_conditional_style = {
    "styleConditions": [
        {"condition": "params.value == 'בוצע'"      , "style": {"backgroundColor": "#196A4E", "color": "white"  }},
        {"condition": "params.value == 'פתור'"      , "style": {"backgroundColor": "#196A4E", "color": "white"  }},
        {"condition": "params.value == 'סיכון פתור'", "style": {"backgroundColor": "#196A4E", "color": "white"  }},
        {"condition": "params.value == 'תקול'"      , "style": {"backgroundColor": "#800000", "color": "white"  }},
        {"condition": "params.value == 'בריצה'"     , "style": {"backgroundColor": "#d2e034", "color": "black"  }},
        {"condition": "params.value == 'טרם החל'"   , "style": {"backgroundColor": "dark"   , "color": "crimson"}},
        {"condition": "params.value == 'קריטי'"     , "style": {"backgroundColor": "crimson", "color": "white"  }},
    ]
}
defaultColDef          = {
    # "filter"        : True,
    # "floatingFilter": True,
    "resizable"       : True,
    "sortable"        : True,
    "editable"        : False,
    "minWidth"        : 1,
    'wrapText'        : True,
    'autoHeight'      : True,
    'wrapHeaderText'  : False,
    'autoHeaderHeight': True,
    "cellStyle"       : cell_conditional_style,
}
taskTableColumnDef     = [
    {
        'headerName': "_id",
        'field': "_id",
        'hide': True,
        'suppressToolPanel': True
    },
    {
        "headerName": "#",
        "field": "row_number",
        'width': 5,
        'cellStyle': {
            'textAlign'  : 'center',
            'white-space': 'normal',
            'word-break' : 'break-word',
            'background' : '#222529',
            'color'      : 'whitesmoke',
        }
    },
    {
        "headerName": "נושא",
        "field": "subject",
        'initialWidth': 55,
        'wrapText': True,
        'autoHeight': True,
        'cellStyle': {
            'textAlign'  : 'right',
            'direction'  : 'rtl',
            'white-space': 'normal',
            'word-break' : 'break-word',
        },
    },
    {
        "headerName": "סוג",
        "field": "reference.doctype",
        'width': 10,
        'cellStyle': {
            'textAlign': 'center',
            'direction': 'rtl',
            'white-space': 'normal',
            'word-break': 'break-word'
        }
    },
    {
        "headerName": "סימוכין",
        "field": "reference.sheet",
        'width': 15,
        'cellStyle': {
            'textAlign': 'right',
            'direction': 'rtl',
            'white-space': 'normal',
            'word-break': 'break-word'
        }
    },
    {
        "headerName": "WMS",
        "field": "wms_object.domain",
        'width': 10,
        'cellStyle': {
            'textAlign': 'right',
            'direction': 'rtl',
            'white-space': 'normal',
            'word-break': 'break-word'
        }
    },
    {
        "headerName": "אחראי",
        "field": "full_name",
        'width': 12,
        'cellStyle': {
            'textAlign': 'right',
            'direction': 'rtl',
            'white-space': 'normal',
            'word-break': 'break-word'
        }
    },
    {
        "headerName": "סטאטוס",
        "field": "status",
        'width': 10,
    },
    {
        "headerName": "עדיפות",
        "field": "priority",
        'width': 10,
    },
    {
        "headerName": 'תג״ב',
        "field": "due_date",
        'width': 12,
        'cellStyle': {
            'textAlign'  : 'center',
            'white-space': 'normal',
            'word-break' : 'break-word',
            'background' : '#222529',
            'color'      : 'whitesmoke',
        }
    },
]
app_button = html.Div(
    dbc.Button(
        'please enter',
        id='button',
        outline=True,
        color='primary',
    ), className = 'btn-lg d-grid m-0'
)
datatable = dag.AgGrid(
    id='task-table',
    columnSize='sizeToFit',
    className='ag-theme-balham headers1',
    columnDefs=taskTableColumnDef,
    defaultColDef=defaultColDef,
    # getRowStyle=getRowStyle,
    rowModelType='infinite',
    dashGridOptions={
        'undoRedoCellEditing'    : True,
        'enableRtl'              : True,
        'rowSelection'           : 'single',
        'verticalAlign'          : 'middle',
        'ensureDomOrder'         : True,
        ##### Infinite Scroll
        'rowBuffer'          : 0,
        'maxBlocksInCache'   : 1,
        'cacheBlockSize'     : BUFFER_SIZE,
        #####
    },
    # style={'height': '100%'}
    style={'height': 350}
)
root = pathlib.Path(__file__).parent.parent
app = Dash(
    __name__,
    assets_folder=root.joinpath('assets').as_posix(),
    prevent_initial_callbacks=True,
    suppress_callback_exceptions=True,
)
server = app.server
app.layout = dbc.Container([
    dcc.Store(id='tasks-rowData'),

    html.Div(
        [
            app_button,
            dbc.Row(
                [
                    dbc.Col(
                        datatable,
                        class_name='col-12'
                    ),
                ]
            ),
        ],
        lang='he', dir='rtl',
    )
],
    fluid=True,
)
@app.callback(
    Output(component_id='tasks-rowData', component_property='data'    ),
    Input (component_id='button'       , component_property='n_clicks'),
)
def activate(n):
    if ctx.triggered_id == 'button':
        return rows
    else:
        return dash.no_update

@callback(
    Output('task-table'     , 'getRowsResponse'),

    Input ('task-table'   , 'getRowsRequest'),
    Input ('tasks-rowData', 'data'          ),
)
def infinite_scroll(request, row_data):
    if row_data:
        # partial    = row_data[request['startRow']: request['endRow']]

        return {
            'rowData' : row_data,
            'rowCount': len(row_data),
        }
    else:
        return dash.no_update

if __name__ == '__main__':
    app.run_server(port=8050, debug=True)

`

`import os
import json
import dash
import warnings
import dash_bootstrap_components as dbc
import pathlib
import dash_ag_grid as dag
import schemas.tm_services as sv
from dash import Dash, dcc, html
from dash        import html, dcc, callback, Input, Output, State, ctx

rows = json.load(open('data-short.json', 'r'))

page_number = 0
task_db     = sv.task_db
BUFFER_SIZE = 100

cell_conditional_style = {
    "styleConditions": [
        {"condition": "params.value == 'בוצע'"      , "style": {"backgroundColor": "#196A4E", "color": "white"  }},
        {"condition": "params.value == 'פתור'"      , "style": {"backgroundColor": "#196A4E", "color": "white"  }},
        {"condition": "params.value == 'סיכון פתור'", "style": {"backgroundColor": "#196A4E", "color": "white"  }},
        {"condition": "params.value == 'תקול'"      , "style": {"backgroundColor": "#800000", "color": "white"  }},
        {"condition": "params.value == 'בריצה'"     , "style": {"backgroundColor": "#d2e034", "color": "black"  }},
        {"condition": "params.value == 'טרם החל'"   , "style": {"backgroundColor": "dark"   , "color": "crimson"}},
        {"condition": "params.value == 'קריטי'"     , "style": {"backgroundColor": "crimson", "color": "white"  }},
    ]
}
defaultColDef          = {
    "resizable"       : True,
    "sortable"        : True,
    "editable"        : False,
    "minWidth"        : 1,
    #'wrapText'        : True,
    #'autoHeight'      : True,
    'wrapHeaderText'  : False,
    'autoHeaderHeight': True,
    "cellStyle"       : cell_conditional_style,
}
taskTableColumnDef     = [
    {
        'headerName': "_id",
        'field': "_id",
        'hide': True,
        'suppressToolPanel': True
    },
    {
        "headerName": "#",
        "field": "row_number",
        'width': 5,
        'cellStyle': {
            'textAlign'  : 'center',
            'white-space': 'normal',
            'word-break' : 'break-word',
            'background' : '#222529',
            'color'      : 'whitesmoke',
        }
    },
    {
        "headerName": "נושא",
        "field": "subject",
        'initialWidth': 55,
        'wrapText'    : True,
        'autoHeight'  : True,
        'cellStyle': {
            'textAlign'  : 'right',
            'direction'  : 'rtl',
            'white-space': 'normal',
            'word-break' : 'break-word',
        },
    },
    {
        "headerName": "סוג",
        "field": "reference.doctype",
        'width': 10,
        'cellStyle': {
            'textAlign': 'center',
            'direction': 'rtl',
            'white-space': 'normal',
            'word-break': 'break-word'
        }
    },
    {
        "headerName": "סימוכין",
        "field": "reference.sheet",
        'width': 15,
        'cellStyle': {
            'textAlign': 'right',
            'direction': 'rtl',
            'white-space': 'normal',
            'word-break': 'break-word'
        }
    },
    {
        "headerName": "WMS",
        "field": "wms_object.domain",
        'width': 10,
        'cellStyle': {
            'textAlign': 'right',
            'direction': 'rtl',
            'white-space': 'normal',
            'word-break': 'break-word'
        }
    },
    {
        "headerName": "אחראי",
        "field": "full_name",
        'width': 12,
        'cellStyle': {
            'textAlign': 'right',
            'direction': 'rtl',
            'white-space': 'normal',
            'word-break': 'break-word'
        }
    },
    {
        "headerName": "סטאטוס",
        "field": "status",
        'width': 10,
    },
    {
        "headerName": "עדיפות",
        "field": "priority",
        'width': 10,
    },
    {
        "headerName": 'תג״ב',
        "field": "due_date",
        'width': 12,
        'cellStyle': {
            'textAlign'  : 'center',
            'white-space': 'normal',
            'word-break' : 'break-word',
            'background' : '#222529',
            'color'      : 'whitesmoke',
        }
    },
]
app_button = html.Div(
    dbc.Button(
        'please enter',
        id='button',
        outline=True,
        color='primary',
    ), className = 'btn-lg d-grid m-0'
)
datatable = dag.AgGrid(
    id='task-table',
    columnSize='sizeToFit',
    className='ag-theme-balham headers1',
    columnDefs=taskTableColumnDef,
    defaultColDef=defaultColDef,
    # getRowStyle=getRowStyle,
    # rowModelType='infinite',
    dashGridOptions={
        # 'rowHeight'              : 35,
        # 'enableCellTextSelection': True,
        'undoRedoCellEditing'    : True,
        'enableRtl'              : True,
        'rowSelection'           : 'single',
        'verticalAlign'          : 'middle',
        'ensureDomOrder'         : True,
        ##### Infinite Scroll
        # 'rowBuffer'          : 0,
        # 'maxBlocksInCache'   : 1,
        # 'cacheBlockSize'     : BUFFER_SIZE,
        #####
    },
    style={'height': 350}
    # style={'height': '100%'}
)
root = pathlib.Path(__file__).parent.parent
app = Dash(
    __name__,
    assets_folder=root.joinpath('assets').as_posix(),
    # use_pages=True,
    prevent_initial_callbacks=True,
    suppress_callback_exceptions=True,
)
server = app.server
app.layout = dbc.Container([
    dcc.Store(id='active-user'),
    dcc.Store(id='record-id'  ),
    dcc.Store(id='owner-name' ),
    dcc.Store(id='testrun-selected-row'),
    dcc.Store(id='tasks-rowData'),
    #
    dcc.Location(id="url"  , refresh=True),
    dcc.Location(id="url-1", refresh=True),

    html.Div(
        [
            app_button,
            dbc.Row(
                [
                    dbc.Col(
                        datatable,
                        class_name='col-12'
                    ),
                ]
            ),
        ],
        lang='he', dir='rtl'
    )
],
    fluid=True,
)
@app.callback(
    Output(component_id='task-table' , component_property='rowData' ),
    Input (component_id='button'     , component_property='n_clicks'),
)
def activate(n):
    if ctx.triggered_id == 'button':
        return rows
    else:
        return dash.no_update

if __name__ == '__main__':
    app.run_server(port=8050, debug=True)
`

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

bug in Infinite Scroll - column wrapText has no effect #4754

stephank007
openedon Sep 9, 2024

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

bug in Infinite Scroll - column wrapText has no effect #4754

Description

stephank007openedon Sep 9, 2024

Metadata