gridstack_on
Add event listeners to GridStack.js dashboard layouts to monitor widget actions like drag, resize, add, remove, and enable/disable changes.
Instructions
Add event listener
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| eventName | Yes | Event name to listen for | |
| callback | Yes | JavaScript callback function code |
Implementation Reference
- src/tools/index.ts:1101-1109 (handler)The handler function that implements the core logic for the 'gridstack_on' tool. It destructures the eventName and callback from input parameters and uses GridStackUtils to generate executable JavaScript code that attaches the specified event listener to the GridStack grid instance via grid.on(eventName, callback). This is the exact implementation executing the tool.
private async addEventListener(params: any): Promise<string> { const { eventName, callback } = params; return this.utils.generateGridStackCode("addEventListener", { eventName, callback, code: `grid.on('${eventName}', ${callback});`, }); } - src/tools/index.ts:595-625 (registration)The tool registration entry in listTools() method, defining the name 'gridstack_on', description, and complete inputSchema specifying required eventName (enum of GridStack events) and callback as string JavaScript code.
{ name: "gridstack_on", description: "Add event listener", inputSchema: { type: "object", required: ["eventName", "callback"], properties: { eventName: { type: "string", enum: [ "added", "change", "disable", "drag", "dragstart", "dragstop", "dropped", "enable", "removed", "resize", "resizestart", "resizestop", ], description: "Event name to listen for", }, callback: { type: "string", description: "JavaScript callback function code", }, }, }, - src/tools/index.ts:834-835 (registration)The dispatch case in callTool switch statement that routes 'gridstack_on' calls to the addEventListener handler method.
case "gridstack_on": return this.addEventListener(args); - src/tools/index.ts:598-624 (schema)The inputSchema definition for the 'gridstack_on' tool, validating eventName as one of the supported GridStack events and callback as a string containing JavaScript function code.
inputSchema: { type: "object", required: ["eventName", "callback"], properties: { eventName: { type: "string", enum: [ "added", "change", "disable", "drag", "dragstart", "dragstop", "dropped", "enable", "removed", "resize", "resizestart", "resizestop", ], description: "Event name to listen for", }, callback: { type: "string", description: "JavaScript callback function code", }, }, - src/resources/index.ts:183-184 (helper)Documentation reference to the 'gridstack_on' tool in the API documentation markdown.
- \`gridstack_on\` - Add event listener - \`gridstack_off\` - Remove event listener