Problems, need help? Have a tip or advice? Post it here.
3 posts Page 1 of 1
Hello, is there a way to add a check all / uncheck all option to the relation box in admin where we can check all the pages related?
Hello there.

Not natively.

Here's what I came up with (it's not the best way to do it, I'm not a Javascript expert but that's how I made it work quickly) :

First, you would want to add the
Code: Select all
<cms:config_form_view>

</cms:config_form_view>

line after the opening "template" block.

Then, add the relation field you are talking about.
Code: Select all
<cms:editable type='relation' name='artist_albums' masterpage='albums.php' reverse_has='one' order="1"/>


Next, add a custom field region within that <cms:config_form_view> block using
Code: Select all
<cms:field 'uncheck' label="Selection" order="2">

</cms:field>

(note the order="2" parameter. It's just so that it's after the relation region which is order="1" in my example)

Now, within that <cms:field> region, add a line for the "Check all" and "Uncheck all" buttons:
Code: Select all
<a href="#" onclick="uncheckCtrl('mCSB_2')">Uncheck all</a> | <a href="#" onclick="checkCtrl('mCSB_2')">Check all</a>


***Where it says "mCSB_2" in my example, it's the ID of the Div containing the actual checkbox list. If it's not working on your end, use the Google Chrome inspector to find the ID of the Div containing the relation list on your page. But it should be ok.

Finally, add some javascript (still inside the <cms:field> block):
Code: Select all
<script type="text/javascript">
          function uncheckCtrl(divid) {
            var checks = document.querySelectorAll('#' + divid + ' input[type="checkbox"]');
            for(var i =0; i< checks.length;i++){
                var check = checks[i];
                if(!check.disabled){
                    check.checked = false;
                }
            }
          }
          function checkCtrl(divid) {
            var checks = document.querySelectorAll('#' + divid + ' input[type="checkbox"]');
            for(var i =0; i< checks.length;i++){
                var check = checks[i];
                if(!check.disabled){
                    check.checked = true;
                }
            }
          }
        </script>


Full code looks like this:

Code: Select all
<cms:template title='Testing'>

<cms:config_form_view>

<cms:editable type='relation' name='artist_albums' masterpage='albums.php' reverse_has='one' order="1"/>

    <cms:field 'uncheck' label="Selection" order="2">
      <a href="#" id="uncheck" onclick="uncheckCtrl('mCSB_2')">Uncheck all</a> | <a href="#" id="check" onclick="checkCtrl('mCSB_2')">Check all</a>
        <script type="text/javascript">
          function uncheckCtrl(divid) {
            var checks = document.querySelectorAll('#' + divid + ' input[type="checkbox"]');
            for(var i =0; i< checks.length;i++){
                var check = checks[i];
                if(!check.disabled){
                    check.checked = false;
                }
            }
          }
          function checkCtrl(divid) {
            var checks = document.querySelectorAll('#' + divid + ' input[type="checkbox"]');
            for(var i =0; i< checks.length;i++){
                var check = checks[i];
                if(!check.disabled){
                    check.checked = true;
                }
            }
          }
        </script>
    </cms:field>


   </cms:config_form_view>

</cms:template>


You should see something like this:
Image

Let me know if that worked for you.
Good luck!
I missed your reply, thank you! I am going to give this a try.
3 posts Page 1 of 1