Proper MIGX config for renderOptionSelector?

Development
1

I want to display the published status of items in the grid so I added a column for the published field using renderOptionSelector. I think I must have the renderoptions items set up wrong because, even though the form control is working properly in the edit window, in the grid it only ever shows a green checkmark. What’s the right way to set this up?

I’d also like to be able to toggle it by double-clicking in the grid but I haven’t been able to get that working either. Maybe the same problem?

Thanks!

{
      "MIGX_id":8,
      "header":"Enabled",
      "dataIndex":"published",
      "width":"",
      "sortable":"false",
      "show_in_grid":1,
      "customrenderer":"",
      "renderer":"this.renderOptionSelector",
      "clickaction":"",
      "selectorconfig":"",
      "renderchunktpl":"",
      "renderoptions":[
        {
          "MIGX_id":1,
          "name":"alert_published",
          "use_as_fallback":1,
          "value":1,
          "clickaction":"switchOption",
          "handler":"",
          "image":""
        },
        {
          "MIGX_id":2,
          "name":"alert_unpublished",
          "use_as_fallback":"",
          "value":0,
          "clickaction":"switchOption",
          "handler":"",
          "image":""
        }
      ],
      "editor":""
    }
}
2

I don’t think the this.renderOptionSelector renderer is properly implemented in the code.

The this.renderClickCrossTick renderer is specifically for publishing/unpublishing items (if the column is named published) and also adds a link tag to initiate the action.

If this doesn’t work for you, then try using the this.renderSwitchStatusOptions renderer instead. I believe there is an example in this tutorial and you’ll also have to activate the handler this.handleColumnSwitch (in the tab “Handlers”) to make it work.

3

That was it. Thanks!

For anyone interested, here’s what it looks like now:

{
      "MIGX_id":8,
      "header":"Enabled",
      "dataIndex":"published",
      "width":"",
      "sortable":"false",
      "show_in_grid":1,
      "customrenderer":"",
      "renderer":"this.renderSwitchStatusOptions",
      "clickaction":"switchOption",
      "selectorconfig":"",
      "renderchunktpl":"",
      "renderoptions":[
        {
          "MIGX_id":1,
          "name":"alert_published",
          "use_as_fallback":"",
          "value":1,
          "clickaction":"",
          "handler":"",
          "image":"assets\/components\/migx\/style\/images\/cb_ticked.png"
        },
        {
          "MIGX_id":2,
          "name":"alert_unpublished",
          "use_as_fallback":"",
          "value":"0",
          "clickaction":"",
          "handler":"",
          "image":"assets\/components\/migx\/style\/images\/cb_empty.png"
        },
        {
          "MIGX_id":3,
          "name":"alert_fallback",
          "use_as_fallback":1,
          "value":"",
          "clickaction":"",
          "handler":"",
          "image":"assets\/components\/migx\/style\/images\/cb_empty.png"
        }
      ],
      "editor":""
    }

Plus, I enabled the handler this.handleColumnSwitch.