I’m running SKUID version 12.1.7 and API v1
Here’s the XML for a simple example page where this error occurs when trying to re-render the Queue component. This should reproduce the error:
{{Index}} var params = argumentse0], $ = skuid.$; console.log(params); params.model.data.sort((a, b) => (a.Index > b.Index) ? 1 : -1); var params = argumentse0], $ = skuid.$; skuid.component.getById(‘sk-sOu-839’).render(); ```
I’ve discovered what’s going on here. I believe this to be a bug.
If you keep the “Hide Header” option for the queue unchecked, the .render() works fine, however if you have “Hide Header” for the queue checked, you get the error.
Hey Mark, thank you for providing Skuid version, page version (V1) and page XML, that was very helpful for us to reproduce the issue. We can confirm that enabling/disabling “Hide Header” in the Queue component properties makes the difference here. I’ll inform the dev team about it. There is a workaround, you could hide the Queue header with CSS (and disable the option to “Hide Header” in the Queue component properties). That way, the header will be hidden and you won’t run into the error message. If you want to hide the header of all Queue components on the page, you only need this CSS:
.nx-queue-header {
display:none;
}
In case you only want to hide the header of a specific Queue component, put the Queue component in a Wrapper component and add a CSS class to the Wrapper, e.g. “HideHeader”, then use the following CSS:
.HideHeader .nx-queue-header {
display:none;
}
Note: We use a Wrapper component around the Queue component here, because if you assign the CSS class to the Queue component directly, it seems to affect only the Queue body, but not its header.
We hope that this is helpful for you!
i am running into roughly the same thing getting error:skuid__SharedRuntimeJS:2 TypeError: Cannot read property ‘render’ of undefined regardless of which component it is attached to. An action on model query fires before the components are rendered.
If the component isn’t visible on the screen you’ll also get this error. Sometimes even you’ll need to give it more time than just running the code at the same time as it appears on the screen.
Because of this I’ve created a function called “waitForElement” that waits until an element is on the screen before running an action.
// skuid.custom.waitForElement(fparams,callback)<br>// wait for an element to be ready on the screen before performing the callback function<br>// fparams = {<br>// initEle: function to initialize the element / check if the element is initialized,<br>// should return the initialized element. Takes context as a variable.<br>// context: passed context or defaults to window<br>// chunkTime: time between chunks, defaults to 250<br>// }<br>skuid.custom.waitForElement = function (fparams, callback) {<br> fparams = fparams || {};<br> const initEle = fparams.initEle || undefined;<br> const element = fparams.element || undefined;<br> const context = fparams.context || window;<br> const chunkTime = fparams.chunkTime || 250;<br> <br> function doChunk () {<br> let ele;<br> if (initEle === undefined && element !== undefined) {<br> ele = element;<br> } else if (initEle !== undefined) {<br> ele = initEle.call(context);<br> }<br> <br> if (typeof ele !== 'undefined') {<br> let error = false;<br> try {<br> callback.call(context, ele);<br> } catch (err) {<br> error = true;<br> console.log('Still waiting for element.. Error: ${err}');<br> }<br> <br> if (!error) {<br> console.log('Wait for element complete.');<br> clearInterval(ourInterval);<br> }<br> } else {<br> console.log('Still waiting for element..');<br> }<br> }<br> <br> // Keep trying to get the element and perform the callback until there isn't an error<br> const ourInterval = setInterval(doChunk, chunkTime);
};
I would recommend only calling this function when the element is about to be on the screen, otherwise if you do it on let’s say page render but the element is hidden behind a tab it will just keep running the waitforelement code over and over until it gets to the tab, better to put it as an action on the tab in that instance.