fix demo with conditional cell formatting for ui.aggrid (fixes 1342)

website/more_documentation/aggrid_documentation.py

@@ -93,23 +93,15 @@ def more() -> None:
     @text_demo('AG Grid with Conditional Cell Formatting', '''
         This demo shows how to use [cellClassRules](https://www.ag-grid.com/javascript-grid-cell-styles/#cell-class-rules)
         to conditionally format cells based on their values.
-        Since it is currently not possible to use the `cellClassRules` option in the `columnDefs` option,
-        we use the `run_javascript` method to set the `cellClassRules` option after the grid has been created.
-        The timer is used to delay the execution of the javascript code until the grid has been created.
-        You can also use `app.on_connect` instead.
     ''')
     def aggrid_with_conditional_cell_formatting():
-        ui.html('''
-            <style>
-            .cell-fail { background-color: #f6695e; }
-            .cell-pass { background-color: #70bf73; }
-           </style>
-        ''')
-
-        grid = ui.aggrid({
+        ui.aggrid({
             'columnDefs': [
                 {'headerName': 'Name', 'field': 'name'},
-                {'headerName': 'Age', 'field': 'age'},
+                {'headerName': 'Age', 'field': 'age', 'cellClassRules': {
+                    'bg-red-300': 'x < 21',
+                    'bg-green-300': 'x >= 21',
+                }},
             ],
             'rowData': [
                 {'name': 'Alice', 'age': 18},
@@ -118,17 +110,6 @@ def more() -> None:
             ],
         })
 
-        async def format() -> None:
-            await ui.run_javascript(f'''
-                getElement({grid.id}).gridOptions.columnApi.getColumn("age").getColDef().cellClassRules = {{
-                    "cell-fail": x => x.value < 21,
-                    "cell-pass": x => x.value >= 21,
-                }};
-                getElement({grid.id}).gridOptions.api.refreshCells();
-            ''', respond=False)
-
-        ui.timer(0, format, once=True)
-
     @text_demo('Create Grid from Pandas Dataframe', '''
         You can create an AG Grid from a Pandas Dataframe using the `from_pandas` method.
         This method takes a Pandas Dataframe as input and returns an AG Grid.