I have a module to modify the Admin Order Grid using Javascript. As far as I can tell it doesn't work because the Knockout JS hasn't loaded when the custom function is called. If I run the function in the console, it works just fine.

All the files are loading as expected, the only thing that seems to be failing is the timing of when the function is called when the page loads.

My custom JS file - fancy.js:

    ], function($){
    "use strict";

    return {
        fancyFunction: function () {

            // Fancy code goes here


The requirejs-config.js file:

var config = {
    map: {
        '*': {
            fancy: "Vendor_Module/js/fancy"
    shim: {
        fancy: {
            deps: ['jquery']

The custom phtml - fancy.phtml:

<script type="text/javascript">
    requirejs(['fancy', "domReady!"], function(fancy){

Last but not least, sales_order_index.xml to bring the phtml in:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <referenceContainer name="before.body.end">
            <block class="\Magento\Framework\View\Element\Template" template="Vendor_Module::fancy.phtml" name="fancy"/>

How can I force fancyFunction() to wait until the Knockout grid is done loading?

I was looking into placing an afterRender into the grid but struggling to work out where the Admin Sales Order Grid html file even lives...

I don't want to use this JS on all grids, only the Admin Sales Order Grid


1 Answer 1


For anyone else trying to do this, I simply created a function with a timeout to check for loaded content.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.