Resize in SceneGridItem doesn’t work

[ysl0628]

I set isResizable to true in SceneGridItem , but the panel’s resize handler doesn’t show up, and resizing doesn’t work.

Is there something wrong with the method I set up?

import {
  EmbeddedScene,
  PanelBuilders,
  SceneApp,
  SceneAppPage,
  SceneGridItem,
  SceneGridLayout,
  VariableValueSelectors,
} from '@grafana/scenes';
import { ROUTES } from '../../constants';
import { prefixRoute } from 'utils/utils.routing';

const getGridLayoutScene = () => {
  return new EmbeddedScene({
    body: new SceneGridLayout({
      isResizable: true,
      isDraggable: true,
      children: [
        new SceneGridItem({
          x: 0,
          y: 0,
          width: 50,
          height: 5,
          isResizable: true,
          isDraggable: true,
          body: PanelBuilders.timeseries().setTitle('Outsider').build(),
        }),
        new SceneGridItem({
          x: 0,
          y: 0,
          width: 20,
          height: 5,
          isResizable: true,
          isDraggable: true,
          body: PanelBuilders.timeseries().setTitle('Outsider2').build(),
        }),
      ],
    }),
  });
};

export const getScene = () => {
  return new SceneApp({
    name: 'Resizable',
    pages: [
      new SceneAppPage({
        title: 'Resizable',
        url: prefixRoute(ROUTES.Resizable),
        controls: [new VariableValueSelectors({})],
        getScene: getGridLayoutScene,
      }),
    ],
  });
};

[torkelo]

Make sure the grid is also configured to allow resizing

[ysl0628]

Make sure the grid is also configured to allow resizing

@torkelo I have set isResizable: true in both SceneGridLayout and SceneGridItem, but I'm still facing the same issue. Any advice?

[Nitin-great-007]

It works for me @ysl0628 this is the code i used : return new EmbeddedScene({ $timeRange: timeRange, $variables: new SceneVariableSet({ variables: [AppNameDrilldownVariable] }), body: new SceneGridLayout({ isResizable: true, isDraggable: true, children: [ new SceneGridItem({ x: 0, y: 0, width: 100, height: 8, isResizable: true, isDraggable: true, $data: query(......), body: stateTimelinePanel("Total Time Taken", "ms", thresholds["request_duration_warning"], thresholds["request_duration_critical"]), }),
new SceneGridItem({ x: 0, y: 20, width: 100, height: 8, isResizable: true, isDraggable: true, $data: query(....), body: stateTimelinePanel("Errors", "", thresholds["error_count_warning"], thresholds["error_count_critical"]), }) ], }), controls: [ new VariableValueSelectors({}), new SceneControlsSpacer(), new SceneTimePicker({ isOnCanvas: true }), new SceneRefreshPicker({ intervals: ['1s', '5s', '30s', '1m', '30m', '1h'], isOnCanvas: true, }), ], });

[Nitin-great-007]