Skip to main content
Glama

gridstack_move_widget

Reposition widgets within dashboard layouts by specifying new X and Y coordinates to organize grid elements according to your design requirements.

Instructions

Move a widget to a new position

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
elYesWidget selector or ID to move
xNoNew X position
yNoNew Y position

Implementation Reference

  • The primary handler function that implements the gridstack_move_widget tool logic. It extracts the widget selector/ID and new position (x,y), then generates the corresponding GridStack JavaScript code using the utility method.
    private async moveWidget(params: MoveWidgetParams): Promise<string> { const { el, x, y } = params; return this.utils.generateGridStackCode("moveWidget", { element: el, position: { x, y }, code: `grid.move('${String(el)}', ${x}, ${y});`, }); }
  • Tool registration in listTools() method, defining the name, description, and input schema for gridstack_move_widget.
    { name: "gridstack_move_widget", description: "Move a widget to a new position", inputSchema: { type: "object", required: ["el"], properties: { el: { type: "string", description: "Widget selector or ID to move", }, x: { type: "number", description: "New X position", }, y: { type: "number", description: "New Y position", }, }, }, },
  • TypeScript interface defining the input parameters for the moveWidget handler, matching the tool's inputSchema.
    export interface MoveWidgetParams { el: string | HTMLElement; x?: number; y?: number; }
  • Dispatch case in callTool switch statement that routes the tool call to the moveWidget handler.
    case "gridstack_move_widget": return this.moveWidget(args as MoveWidgetParams);
  • Utility method used by the handler to format and generate the standardized response including code, description, example, and notes for the move operation.
    generateGridStackCode(operation: string, params: any): string { const result: GridStackCodeResult = { operation, parameters: params, code: params.code || "", description: this.getOperationDescription(operation), example: this.getOperationExample(operation), notes: this.getOperationNotes(operation), }; return this.formatResponse(result); }

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/raghavsharma-simpplr/gridstack-mcp-server'

If you have feedback or need assistance with the MCP directory API, please join our Discord server