fieldPlugin and .dependent()

blabablaba

Hi,

I wanted to achieve a toggle button on my form for lookup / manual entry of address data.

I successfully implemented the plugin featured here https://editor.datatables.net/examples/plug-ins/fieldPlugin.html

The toggle button works well.

However 'dependent' does not fire when I reference the plugin field.

    editor.dependent( 'bLookupVsManual', function ( val ) {

        console.log(val) 
        return {}

    }, {

        event: 'change'

    } )

I have tried to do a manual change trigger within the plugin click event as follows:

     editor.field( 'bLookupVsManual' ).input().trigger('change')

Is there a reason dependent does not work with the plugin?

My workaround is to place the editor.field().show() / editor.field().hide() into the click listener within the plugin code though I think naming specific fields is getting too specific for a plugin so I wondered if dependent could be made to work.

Thanks for any help.

allan

Yes, that plug-in doesn't trigger an input event itself because it doesn't use input elements. Its a little bit of a cheat since it uses button elements.

The way to make dependent() work with it would be to trigger a change event inside the click event listener.

Allan

blabablaba

Thank you Allan, I rethought the problem and have created a much smoother flow using radio buttons, dependent and trigger.

My only issue with radios is styling. I want the radios to be presented in the 'datatables button style' ie class="inputButton". CSS is not my strong point so I did wonder if this has been done before.

I had implemented your useful suggestion to make radios in the horizontal here: https://datatables.net/forums/discussion/39132/custom-field-type-for-horizontal-radio-buttons

I would like to achieve a horizontal toggle button styling as shown in the plugin:

https://editor.datatables.net/examples/plug-ins/fieldPlugin.html

Is this possible with radios?

Any help greatly appreciated

blabablaba

Hi Allan,

I have solved the problem! The CSS solution for a button-formatted toggle using radio buttons with a flexbox is below, I hope it might help others.

div.DTE_Field_Type_radio.DTE_Field_Name_{fieldName} div.DTE_Field_InputControl > div  {
  display: flex;
  justify-content: space-between; 
  flex-flow: wrap;

}

div.DTE_Field_Type_radio.DTE_Field_Name_{fieldName} div.DTE_Field_InputControl > div > div {
  flex: 0 0 49%;

}

div.DTE_Field_Type_radio div.DTE_Field_Input > div > div input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

div.DTE_Field_Type_radio div.DTE_Field_Input > div > div label {
  float: left;
  text-align: center;
  display: block;
  cursor: pointer;
  margin-left: 0px;
  padding: 6px 0;
  background: #F8F8F8;
  background: -webkit-gradient(linear, center bottom, center top, from(#CCC), to(white));
  background: -moz-linear-gradient(top, white, #CCC);
  background: linear-gradient(to bottom, white, #CCC);
  text-shadow: 0 1px 0 white;
  border: 1px solid #999;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  box-shadow: 0px 0px 2px #999;
  -moz-box-shadow: 0px 0px 2px #999;
  -webkit-box-shadow: 0px 0px 2px #999;
  width: 100%;
}

div.DTE_Field_Type_radio div.DTE_Field_Input > div > div input[type="radio"]:checked + label {
  font-weight: normal;
  background: #02475A;
  background: -webkit-gradient(linear, center bottom, center top, from(#777), to(#333));
  background: -moz-linear-gradient(top, #333, #777);
  background: linear-gradient(to bottom, #333, #777);
  box-shadow: inset 0px 0px 2px #222;
  -moz-box-shadow: inset 0px 0px 2px #222;
  -webkit-box-shadow: inset 0px 0px 2px #222;
  color: white;
  text-shadow: none;
}