Select All Option (SOLVED)

[cantlep]

Hiya,

In my "ContractData" table, I have a relationship with "SiteData". The sites within SiteData show up when I create a new contract record. Is there a way that I can have a "Select All" option (as well as the tick boxes next to each site name).

Thanks

Paul

[shannah]

Is this on the existing related record form? Or the grid widget?

[cantlep]

In ContractData/fields.ini I have this:

Code: Select all

[SiteName]
widget:label = "Site Names"
widget:question = "Select one or multiple sites for this contract"
transient=1
relationship=SiteData
widget:type=checkbox
widget:columns=12
validators:required = true
order=2


What I'm after is a "Select All Site Names" option. with the site checkboxes. Does that make sense?

PS: I did have a look at the grid widget but couldn't get the relationship to work properly as per the wiki. The relationship works fine with the checkboxes though.

Code: Select all

[SiteData]
SiteData_ContractData.SiteName=SiteData.SiteName
SiteData_ContractData.ContractDataID="$ContractDataID"


I did try it with this:

Code: Select all

__sql__ = "select * from SiteData WHERE SiteDataID='$SiteDataID'"


but it doesn't display anything proprtly in the grids.

Thanks

[shannah]

You could do this with a bit of javascript... good idea for built-in functionality, but it doesn't exist yet.

Hint: use something like the after_xxx_widget block or before_xxx_widget_block, and add a select all button. Then you can use jquery to easily check all the checkboxes. THere are lots of examples of the 'net. E.g.:
http://briancray.com/2009/08/06/check-a ... avascript/

[cantlep]

Hi Steve,

Well, I think I've got stuff in the right place but it's not really doing much

Here's what I've got

conf/ApplicationDelegate.php

Code: Select all

function block__before_SiteName_widget() {
echo '<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"language="javascript"></script>';
echo '<script type="text/javascript" src="checkall.js" language="javascript"></script>';
echo '<div class="checkbox-of-SiteName"><input type="checkbox" name="checkall"><label for="checkall">Select all Sites</label></div>';
}


/checkall.js

Code: Select all

$(function () { // this line makes sure this code runs on page load
        $('#checkall').click(function () {
                $(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked);
        });
});


Have I missed something obvious?

Cheers

Paul

[shannah]

A couple of things. I think jquery is already included for the edit form (could be wrong -- you can check it out by viewing hTML source of the edit form.

Is your button showing up at all, or is the button showing up and then not working when you click it?

Looking at your code it is apparent that the button will not work like this. Your javascript directs it to only check boxes withing the #checkall div, which only includes your "Select All" button, but doesn't include the actual checkboxes of the widget. Rather than using the #checkall selector, you should use a selector pointing to the div that wraps the whole widget (and all its checkboxes).

[cantlep]

Hi Steve,

Cheers for the reply.

1) Confirmed, it is
2) The latter, the box appears but doesn't check anything.

In the example given on the site you pointed me to, the #checkall div doesn't exist apart from the actual checkall checkbox.

Code: Select all

<fieldset>
   <div class="radio"><input type="checkbox" name="checkall" id="checkall"> <label for="checkall">Check all</label></div>

   <div class="radio"><input type="checkbox" name="checkbox1" id="checkbox1"> <label for="checkbox1">Checkbox</label></div>
   <div class="radio"><input type="checkbox" name="checkbox2" id="checkbox2"> <label for="checkbox2">Checkbox</label></div>
   <div class="radio"><input type="checkbox" name="checkbox3" id="checkbox3"> <label for="checkbox3">Checkbox</label></div>
   <div class="radio"><input type="checkbox" name="checkbox4" id="checkbox4"> <label for="checkbox4">Checkbox</label></div>
   <div class="radio"><input type="checkbox" name="checkbox5" id="checkbox5"> <label for="checkbox5">Checkbox</label></div>

   <div class="radio"><input type="checkbox" name="checkbox6" id="checkbox6"> <label for="checkbox6">Checkbox</label></div>
   <div class="radio"><input type="checkbox" name="checkbox7" id="checkbox7"> <label for="checkbox7">Checkbox</label></div>
   <div class="radio"><input type="checkbox" name="checkbox8" id="checkbox8"> <label for="checkbox8">Checkbox</label></div>
   <div class="radio"><input type="checkbox" name="checkbox9" id="checkbox9"> <label for="checkbox9">Checkbox</label></div>
   <div class="radio"><input type="checkbox" name="checkbox10" id="checkbox10"> <label for="checkbox10">Checkbox</label></div>

</fieldset>

</form>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">
$(function () {
   $('#checkall').click(function () {
      $(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked);
   });
});
</script>


Which is what I've done. The div class my checkboxes are in doesn't have a name, it's just an open div and a close div.

Cheers

[cantlep]

hmm, actually, I think it's the ('fieldset:eq(0)') that's hindering...as the checkboxes aren't located in <fieldset>.

They look like this:

Code: Select all

<td class="Dataface_QuickForm-widget-cell">
   <div class="field " id="ContractData-SiteName-wrapper">
                                                                              
      <div>
         <div class="formHelp">Select one or multiple sites for this contract</div>
            <script type="text/javascript" src="checkall.js" language="javascript"></script><div class="field"><input type="checkbox" name="checkall" id="checkall"><label for="checkall">Select all Sites</label></div>
         <!--<fieldset><legend>Site Names</legend>-->
                                                                                                                                                <table><tr><td>
            <input class="checkbox-of-SiteName " name="SiteName[SiteDataID=18]" type="checkbox" value="1" id="qf_df1b7f" /><label id="qf_df1b7f-label" for="qf_df1b7f">blah[555555]</label>
         <br />                                                            </td><td>                  <input class="checkbox-of-SiteName " name="SiteName[SiteDataID=19]" type="checkbox" value="1" id="qf_52ee59" /><label id="qf_52ee59-label" for="qf_52ee59">Colchester Print Centre[150009124857]</label>



but I don't know how to write that reference in the jscript.

[cantlep]

This sorted it:

Code: Select all

$(function () { // this line makes sure this code runs on page load
        $('#checkall').click(function () {
                $(this).parents('#ContractData-SiteName-wrapper').find(':checkbox').attr('checked', this.checked);
        });
});


Note the parent being changed to the field ID the boxes reside in.

Cheers