fieldPlugin and .dependent()

fieldPlugin and .dependent()

blabablabablabablaba Posts: 47Questions: 19Answers: 0
edited January 2020 in Editor

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.

Answers

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin
    edited January 2020

    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

  • blabablabablabablaba Posts: 47Questions: 19Answers: 0
    edited January 2020

    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

  • blabablabablabablaba Posts: 47Questions: 19Answers: 0

    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;
    }
    
    
This discussion has been closed.