[SOLVED] Render script of query when opening in new tab

[syndeo]

Version 8.6 Build 2922

I use the following script to auto fit columns in a standard query render script. Provided by @Jaymer

Code: Select all

var grid = widget;
grid.bind("dataBound", autoS);

function autoS(e) {
grid.autoFitColumn("Attribute1");
grid.autoFitColumn("Attribute2");
grid.autoFitColumn("AttributeN");
}

This is working as expected when opening the query with the default output view

When the output is changed to a new tab, it appears that the render script is activated before the grid is populated and therefore making the column widths very small and not readable.

I have found that if you click the save button the grid re-renders and it looks fine.

Is this to be expected and is there further scripting needed?

[syndeo]

Ok so I have worked it out. The smart people in the room may have a better way, but it works.

The issue is when creating a new tab, the render script of a grid is fired before the tab, the grid is contained in is visible. Any styling of the grid, from what I can understand doesn't work until the tab is visible.

Once the tab is visible and if you save the form, the render script of the grid will run as expected. This is because by that time, the tab is visible.

So essentially you have to get the tab element and set its display to "block" before running the rest of the render script.

Code: Select all

var grid = widget; //get the grid
var gID = grid.element.context.id; //find the id of the grid
var gridElement = document.getElementById(gID); //get the DOM element of the grid

//I've used the closest to find the class of tabstrip element that the gird is contained in
var closest =gridElement.closest(".k-content");

//change the tab element's display to block,
closest.style.display="block";

//perform the intended function to autofit the columns in the grid as per @Jaymer's tip see https://www.awareim.com/forum/viewtopic.php?f=1&t=11219

grid.bind("dataBound", autoS);

function autoS(e) {
grid.autoFitColumn("Attribute1");
grid.autoFitColumn("Attribute2");
grid.autoFitColumn("AttributeN");
}

[Jaymer]

Nice