[Solved] Custom LocalGrid - enableRowBody Not Being Applied - My Forums

[Solved] Custom LocalGrid - enableRowBody Not Being Applied

freelancewebdev — Jan 04, 2019, 12:58 AM

I have an interesting problem which I have been trying to solve all day without success so I'm hoping somebody here can spot my issue. To summarise, I have a custom grid with the enableRowBody configuration set to true for the viewConfig but the markup for the second row is not being added to the grid rows.

I have made a custom resource class and have used the loadCustomCssJs function in my create controller to add a customised version of the create resource form which allows me to add the fields in my custom resource classes related tables.

The resource represents an event. I have added a grid to allow users to add multiple pricing for various vendors selling tickets.

My code for the extended LocalGrid I am using is:

rdBoxOffice.grid.Prices = function(config){
    config = config || {};

    this.exp = new Ext.ux.grid.RowExpander({
        tpl : new Ext.Template('test')
    });
    

    Ext.applyIf(config,{
        id: 'rdboxoffice-grid-prices'
        ,url: rdBoxOffice.config.connectorUrl
        ,baseParams: { action: 'mgr/prices/getList' }
        ,pluralText: 'Prices'
        ,singleText: 'Price'
        ,preventRender:true
        ,autoHeight:true
        ,viewConfig: {
          deferEmptyText: false

          ,enableRowBody: true
        }
        ,tbar: [
            {
                title: _('listing_create_price'),
                text: _('listing_create_price'),
                handler: this.addPrice
            }
        ]
        ,fields: [
            'id'
            ,'vendor_id'
            ,'fullname'
            ,'regular'
            ,'vip'
            ,'student'
        ]
        ,paging:false
        ,remoteSort: false
        ,plugins: [this.exp]
        ,columns: [this.exp,{
            header: _('listing_prices_vendor')
            ,dataIndex: 'fullname'
            ,sortable: true
            ,width: 100
        },{
            header: _('listing_prices_regular')
            ,dataIndex: 'regular'
            ,sortable: true
            ,width: 100
        },{
            header: _('listing_prices_vip')
            ,dataIndex: 'vip'
            ,sortable: true
            ,width: 100
        },{
            header: _('listing_prices_student')
            ,dataIndex: 'student'
            ,width: 100
        }]
    });
    rdBoxOffice.grid.Prices.superclass.constructor.call(this,config);
};
Ext.extend(rdBoxOffice.grid.Prices,MODx.grid.LocalGrid)

In my create resource form I have added it as so:

{xtype:'rdboxoffice-grid-prices'}

To initially load some default pricing into the grid I have used the following code in the setup function for the resource panel - it works fine:

var pricesStore = Ext.getCmp('rdboxoffice-grid-prices').getStore();
record = new pricesStore.recordType({vendor_id:sitevendorid,fullname:'Website',regular:0,vip:0,student:0});
record.commit();
pricesStore.add(record);
pricesStore.commitChanges();

The panel is displayed and the default pricing loaded with the expand button showing that the row is contracted but when I look at the markup produced in the web developer console, there is no second row in the markup and therefore when clicking the expand button, I get an error because the row can't be found to add the compiled template.

Besides explicitly setting the enableRowBody config to true, I also note that the MODX derived grids all have enableRowBody set to true in their default configs but the grid is behaving as it's set to false. To confirm this I edited the ext-all.js file and modified the only mention of enableRowBody in there to output a string if enableRowBody is false. That string is output in my grid so somehow that config option is getting changed but I've no idea how.

I was wondering whether the way I was adding the record to the store was the problem but adding the data using loadData does display the data in the grid with the expand button but once again, no second row in the table holding the columns.

Update
I modified the ext-all.js file to set the enableRowBody configuration to true and that makes my grid work as expected with the second row added and my rowexpander works. That seems to suggest some kind of problem with the config being passed back to Ext.grid.Grid.

I'm open to all suggestions as to how to take this further.

Re: [Solved] Custom LocalGrid - enableRowBody Not Being Applied

freelancewebdev — Jan 06, 2019, 08:13 PM

Just wanted to add here that I then of course needed to decide what I would do. Hoping I could continue to use MIGX to save me having to code up a simple grid and associated create and update windows I tried to change the order of execution of my scripts so that my grid wasn't added until after the MIGX one was so I could rewrite the enableRowBody option that MIGX was resetting. Even though I didn't include and instantiate the grid until Ext.onReady, that still didn't fix the issue.

I can also confirm that even if I set the enableRowBody option on the resource group grid to false, that still doesn't prevent me setting it to true on my own grid, i.e. the resource group grid doesn't interfere with my own grid in the same way the MIGX one does. I can only conclude that somehow, MIGX is preventing normal inheritance in this instance.

Re: Custom LocalGrid - enableRowBody Not Being Applied

freelancewebdev — Jan 05, 2019, 06:04 PM

Well, finally I have located the source of the problem. It's the MIGX multitv grid. This can be confirmed pretty easily by modifying the grid in the resource access tab of a resource where you have a multitv grid to add the rowexpander plugin. You'll see it problem replicated, you get the expand button but no second row to expand.

Viewing the source script produced by MIGX for its grids, it's not immediately apparent to me why it would be preventing the enableRowBody config to pass up the superclass chain but I wonder if it might have something to do with the grid being added to the MODx object grids object at the same level as LocalGrid in the superclass chain even though the multitv grids extend from LocalGrid. I'm surprised that MIGX didn't have it's own component object like all the other extras I've looked at. Seems like there may be the possibility for multitv grid, which has enableRowBody not explicitly set and therefore false, to be writing that config option back to the localGrid superclass after other grid classes like mine and the resource group grids but before the grids are all rendered. The behaviour does suggest that both my grid and the MIGX one are sharing the same LocalGrid instance.

Anyway, I've opened an issue on Github at:

https://github.com/Bruno17/MIGX/issues/330

Re: Custom LocalGrid - enableRowBody Not Being Applied

freelancewebdev — Jan 05, 2019, 11:57 AM

Thanks Bob, I'm still looking. Will post here when I have progress.

Re: Custom LocalGrid - enableRowBody Not Being Applied

BobRay — Jan 04, 2019, 06:05 PM

I had a similar problem recently. I fixed it with addLastJavascript() and addHTML(). As a last resort/workaround, you could write your JS to a file and use addLastJavaScript.

Also, remember that you can use addHTML() for your JS script as long as the JS code begins and ends with script tags.

The regClient...() methods will adapt to the presence or absence of script tags. It's too bad the new controller methods won't do the same.

Re: Custom LocalGrid - enableRowBody Not Being Applied

freelancewebdev — Jan 04, 2019, 04:23 PM

Took a break from this before I threw the laptop out the window. Back at it now and have observed that resourcegroup access panel, which is also a local grid is also not producing the second table row in my custom resource create form either as it should since the default config option is to enable that but is in the standard resource create form.

Guess I'll have to keep digging....

Re: Custom LocalGrid - enableRowBody Not Being Applied

freelancewebdev — Jan 04, 2019, 06:38 AM

Hey Bob,

Thanks for the help.

Here's where I'm pushing in the config by overriding the loadCustomCssJs function.

public function loadCustomCssJs() {
      $sitevendor = $this->modx->getObject('modUser',array('username' => 'rdvendor'));
      $sitevendorid = $sitevendor->get('id');
      $this->rdBoxOffice = new rdBoxOffice($this->modx);
      $mgrUrl = $this->modx->getOption('manager_url',null,MODX_MANAGER_URL);
      $myUrl = $this->modx->getOption('assets_url').'components/'.$this->namespace.'/';
      $this->addJavascript($mgrUrl.'assets/modext/widgets/element/modx.panel.tv.renders.js');
      $this->addJavascript($mgrUrl.'assets/modext/widgets/resource/modx.grid.resource.security.local.js');
      $this->addJavascript($mgrUrl.'assets/modext/widgets/resource/modx.panel.resource.tv.js');
      $this->addJavascript($myUrl.'js/mgr/rdboxoffice.js');
      $this->addJavascript($myUrl.'js/widgets/venues/rdboxoffice.combo.venues.js');
      $this->addJavascript($myUrl.'js/widgets/plans/rdboxoffice.combo.plans.js');
      $this->addJavascript($myUrl.'js/widgets/vendors/rdboxoffice.combo.vendors.js');
      $this->addJavascript($myUrl.'js/widgets/prices/rdboxoffice.grid.prices.js');
      $this->addJavascript($myUrl.'js/widgets/resource/modx.panel.rdlistingresource.js');
      $this->addJavascript($myUrl.'js/sections/resource/create.js');
      $this->addHtml('
      ');
      /* load RTE */
      parent::loadRichTextEditor();
    }

Looking at the source it seems that my Ext.onReady function is being added after the modx.grid.js file is added via a script tag. I assumed anyway that because the script doesn't run until Ext.onReady that all the scripts would be loaded into the DOM before anything ran . I can't swap out addHtml for addLastJavascript as addLastJavascript requires an external URL.

Still, it feels like you're on to something here because if I swap out all my custom js component files with addLastJavsacript rather than addJavascript, I get a bunch of errors in the console which I wouldn't have expected either since they're not being used until Ext.onReady.

Re: Custom LocalGrid - enableRowBody Not Being Applied

BobRay — Jan 04, 2019, 05:38 AM

How are you passing the config from the controller to the JavaScript()? One possible issue is the use of addHtml() to insert the config variables. The controller parent code will load the JS ahead of the HTML regardless of the order you call them in, so the variables may not be available when you need them (Do a "view source" to check the loading order). There is a function, addLastJavascript(), which will make sure the JS goes at the end of the head section.