2

I'm facing some issues regarding some dependant picklists.

I need to show them on a visualforce page, but I need some of the picklist to be not editable, so, as they can't be added as apex:outputfields, I tried to set them not editable using jquery.

The page looks something like this (picklist2 depends on picklist 1, picklist 3 depends on picklist 2 and picklist 4 depends on picklist3, we need just picklist 4 to be editable, but with this code, just picklist1 is being set to not editable).

<script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(document).ready(function() {
        $j('select.disabledPicklist').attr("disabled",true);
    });
</script>

 <apex:pageBlockSection columns="1">
   <apex:pageblockSectionItem >
       <apex:outputLabel value="Picklist1"/>
       <apex:inputField value="{!Case.Picklist1}" styleClass="disabledPicklist"/>    
    </apex:pageblockSectionItem>
    <apex:pageblockSectionItem >
        <apex:outputLabel value="Picklist2"/>
       <apex:inputField value="{!Case.Picklist2}" styleClass="disabledPicklist"/>    
    </apex:pageblockSectionItem>
    <apex:pageblockSectionItem >
       <apex:outputLabel value="Picklist3"/>
       <apex:inputField value="{!Case.Picklist3}" styleClass="disabledPicklist"/>    
    </apex:pageblockSectionItem>

    <apex:pageBlockSectionItem >

    <apex:outputLabel value="Picklist4"/>
        <apex:outputPanel >
           <apex:outputField value="{!Case.Picklist4}"/>
        </apex:outputPanel>
    </apex:pageBlockSectionItem>

    </apex:pageBlockSection>    
 </apex:pageBlockSection>
</apex:pageBlock>

Does anyone know a way to achieve this?

Thanks

2

Did you resolve this yet? I have been able to accomplish this by adding the controlling field as editable but inside an outputPanel that has a style of hidden. This way the field is available to the page but not visible to the user. If you want to display the controlling field value as read only then you can include the text output along with the hidden field. In this example I have a dependent picklist called Disqualified Reason on the Lead object and I want the user to see the lead Status of Disqualified but not edit it. I embedded the outputPanel within the outputText tag so it doesn't create an empty row in the final output.

        <apex:pageBlockSectionItem>
            <apex:outputLabel>Lead Status</apex:outputLabel>
            <apex:outputText>{!newLead.status}
                <apex:outputPanel style="display:none;visibility:hidden">
                    <apex:inputField value="{!newLead.status}" /></apex:outputpanel>
            </apex:outputText>
        </apex:pageBlockSectionItem>
        <apex:inputField value="{!newLead.Disqualified_Reason__c}"/>

VF page output

0

You should write you javascript/jquery code as:

<script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(document).ready(function() {
        $( 'select.disabledPicklist' ).each(function() {
            $j(this).attr("disabled",true);
        });
    });
// OR 

    $('[class*=" disabledPicklist"]').each(function() {
              $j(this).attr("disabled",true);
    }

  • I've tried, and still have the same issue. Just the picklist1 is being disabled, don't know why – nocovi Sep 25 '13 at 8:04
  • try this $j(this).prop('disabled', 'disabled'); instead $j(this).attr("disabled",true); – Ashwani Sep 25 '13 at 8:30
  • @nocovi It seems page rendering select tags differently as all approaches are correct including yours. – Ashwani Sep 25 '13 at 8:39
0

If you don't want your picklists to be editable, why not simple use outputField instead of inputField?

Have in mind, however, that you'll still have to place first three picklists somewhere in the page, in order for the fourth (dependant) picklist to filter it's results. But since you don't really need to edit values in the first three picklists, all three inputFields can be hidden.

<apex:pageBlockSection columns="1">
    <apex:pageblockSectionItem >
        <apex:outputLabel value="Picklist1"/>
        <apex:outputField value="{!Case.Picklist1}" styleClass="disabledPicklist"/>    
    </apex:pageblockSectionItem>
    <apex:pageblockSectionItem >
        <apex:outputLabel value="Picklist2"/>
        <apex:outputField value="{!Case.Picklist2}" styleClass="disabledPicklist"/>    
    </apex:pageblockSectionItem>
    <apex:pageblockSectionItem >
        <apex:outputLabel value="Picklist3"/>
        <apex:outputField value="{!Case.Picklist3}" styleClass="disabledPicklist"/>    
    </apex:pageblockSectionItem>

    <apex:pageBlockSectionItem >
        <apex:outputLabel value="Picklist4"/>
        <apex:outputField value="{!Case.Picklist4}"/>
    </apex:pageBlockSectionItem>

    <!-- Hidden inputFields for picklist 1-3 -->
    <apex:pageblockSectionItem labelStyle="display:none;" dataStyle="display:none;">
        <apex:inputField value="{!Case.Picklist1}"/>    
    </apex:pageblockSectionItem>
    <apex:pageblockSectionItem labelStyle="display:none;" dataStyle="display:none;">
        <apex:inputField value="{!Case.Picklist2}"/>    
    </apex:pageblockSectionItem>
    <apex:pageblockSectionItem labelStyle="display:none;" dataStyle="display:none;">
        <apex:inputField value="{!Case.Picklist3}"/>    
    </apex:pageblockSectionItem>

</apex:pageBlockSection>  

Hope it helps!

  • Hi, In this case, as they are dependent picklists, you can't just use outputField (that was my first approach) because salesforce does not allow it. Regarding the suggestion you make about hiding the fields... yeah, I've tried too, and the issue is that the first picklist (the first controlling one) is hidden, and the dependent ones, are shown, due to salesforce to ignore the css indications. We still didn't find a nice solution, the "best" approach, is applying validation rules to not allow users to change those field values in that page. – nocovi Jan 15 '14 at 15:12
0

Why you are not going with standard functionality given by salesforce. If you have made the fields dependent, then on VF page it will work no need to use jquery. To make fields dependent Go to field picklist 1 and there you will see field dependecies section from there you can select the picklist 2 and so on for picklist 3. Then use the same on page also and do not use jquery. Hope this will help you.

  • We "can't" use the standard functionality because standard forces you to show level 1 and 2 of dependedant picklists if you want to show level 3. We don't mind if the must be shown, but we need both level 1 and 2 to be not editable, and standard functionality doesn't allow this. I hope this helps to clarify. – nocovi Jul 14 '14 at 6:50
  • Ok ... I got your point. I agree with you. Can you try this piece of code in jQuery document.ready function : $j('.disabledPicklist').prop('disabled',true); – tandonprateek Jul 14 '14 at 11:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.