Apex Code Development You need to sign in to do that
Don't have an account?
swain 10 PageBlockTable Visualforce for dyanamically adjust column size by draging like excel
Below code is working fine like dynamically adjust size of column :-
<apex:includeScript value="//cdn.jsdelivr.net/jquery/1.7/jquery.min.js"/>
<apex:includeScript value="//cdn.jsdelivr.net/jquery.colresizable/1.3/colResizable.min.js"/>
<apex:form >
<apex:pageBlock title="Accounts" mode="edit">
<apex:pageBlockTable id="tbl" value="{!accounts}" var="Con"> <apex:column value="{!Con.Name}" >
<apex:facet name="header">Name</apex:facet>
</apex:column>
<apex:column value="{!Con.Industry}"/>
<apex:column value="{!Con.Type}"/>
<apex:column value="{!Con.Phone}"/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:form>
<script type="text/javascript">
var j= $("[id$=tbl]").colResizable({ liveDrag: true, draggingClass: "dragging" });
</script>
</apex:page>
But how to apply same logic here . You can see the below code is different and complex unlike the above one . Please help:--
<apex:pageBlock id="PLPageBlock" title="{!$Label.Main_Title}">
<apex:pageMessages id="errorMessages"></apex:pageMessages>
<div id="plitablediv" style="flex-direction: column; overflow-x:scroll; max-height: 300px;">
<apex:pageBlockTable id="p" value="{!productLines}" var="pl" onRowClick="fixInlineEditBug(); productLineSelected(this);">
<apex:column style="width:1%;" >
<apex:facet name="header">
</apex:facet>
<span style="display:none;" id="plid">{!pl.ident}</span> </apex:column> <apex:column styleClass="{!IF((LEN(pl.ident) < 10), 'highlightedRow', '')}">
<apex:commandLink rendered="{!pl.item.Id != null}" value="Detail" onclick="window.open('/{!pl.item.Id}'); return false;" /> <br /> <apex:commandLink value="{!$Label.Delete_Item}" onclick="if(confirm('{!$Label.Delete_Confirmation}')){delProductLine('{!pl.ident}');} return false;" />
<apex:facet name="header">{!$Label.Action}</apex:facet>
</apex:column>
<apex:column id="d" styleClass="{!IF((LEN(pl.ident) < 10), 'highlightedRow', '')}"> <div id="draggable1" class="ui-widget-content"> <p>Drag me around 1</p> </div>
<apex:facet name="header">Satya </apex:facet> <span style="display:none;" id="plid">{!pl.ident}</span>
</apex:column>
<apex:column styleClass="{!IF((LEN(pl.ident) < 10), 'highlightedRow', '')}">
<apex:outputField value="{!pl.item.CBG_ItemLine__c}" rendered="{!!massEdit}"/>
<apex:inputField value="{!pl.item.CBG_ItemLine__c}" rendered="{!massEdit}" onkeypress="return fireSave(event);"/>
<apex:facet name="header">{!$ObjectType.ProductLineItem__c.fields.CBG_ItemLine__c.Label}</apex:facet>
</apex:column>
<apex:column styleClass="{!IF((LEN(pl.ident) < 10), 'highlightedRow', '')}">
<apex:outputField value="{!pl.item.RecordTypeId}" >
<apex:inlineEditSupport disabled="true"/>
</apex:outputField> <apex:facet name="header">{!$Label.Record_Type}</apex:facet>
</apex:column>
<apex:includeScript value="//cdn.jsdelivr.net/jquery/1.7/jquery.min.js"/>
<apex:includeScript value="//cdn.jsdelivr.net/jquery.colresizable/1.3/colResizable.min.js"/>
<apex:form >
<apex:pageBlock title="Accounts" mode="edit">
<apex:pageBlockTable id="tbl" value="{!accounts}" var="Con"> <apex:column value="{!Con.Name}" >
<apex:facet name="header">Name</apex:facet>
</apex:column>
<apex:column value="{!Con.Industry}"/>
<apex:column value="{!Con.Type}"/>
<apex:column value="{!Con.Phone}"/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:form>
<script type="text/javascript">
var j= $("[id$=tbl]").colResizable({ liveDrag: true, draggingClass: "dragging" });
</script>
</apex:page>
But how to apply same logic here . You can see the below code is different and complex unlike the above one . Please help:--
<apex:pageBlock id="PLPageBlock" title="{!$Label.Main_Title}">
<apex:pageMessages id="errorMessages"></apex:pageMessages>
<div id="plitablediv" style="flex-direction: column; overflow-x:scroll; max-height: 300px;">
<apex:pageBlockTable id="p" value="{!productLines}" var="pl" onRowClick="fixInlineEditBug(); productLineSelected(this);">
<apex:column style="width:1%;" >
<apex:facet name="header">
</apex:facet>
<span style="display:none;" id="plid">{!pl.ident}</span> </apex:column> <apex:column styleClass="{!IF((LEN(pl.ident) < 10), 'highlightedRow', '')}">
<apex:commandLink rendered="{!pl.item.Id != null}" value="Detail" onclick="window.open('/{!pl.item.Id}'); return false;" /> <br /> <apex:commandLink value="{!$Label.Delete_Item}" onclick="if(confirm('{!$Label.Delete_Confirmation}')){delProductLine('{!pl.ident}');} return false;" />
<apex:facet name="header">{!$Label.Action}</apex:facet>
</apex:column>
<apex:column id="d" styleClass="{!IF((LEN(pl.ident) < 10), 'highlightedRow', '')}"> <div id="draggable1" class="ui-widget-content"> <p>Drag me around 1</p> </div>
<apex:facet name="header">Satya </apex:facet> <span style="display:none;" id="plid">{!pl.ident}</span>
</apex:column>
<apex:column styleClass="{!IF((LEN(pl.ident) < 10), 'highlightedRow', '')}">
<apex:outputField value="{!pl.item.CBG_ItemLine__c}" rendered="{!!massEdit}"/>
<apex:inputField value="{!pl.item.CBG_ItemLine__c}" rendered="{!massEdit}" onkeypress="return fireSave(event);"/>
<apex:facet name="header">{!$ObjectType.ProductLineItem__c.fields.CBG_ItemLine__c.Label}</apex:facet>
</apex:column>
<apex:column styleClass="{!IF((LEN(pl.ident) < 10), 'highlightedRow', '')}">
<apex:outputField value="{!pl.item.RecordTypeId}" >
<apex:inlineEditSupport disabled="true"/>
</apex:outputField> <apex:facet name="header">{!$Label.Record_Type}</apex:facet>
</apex:column>
Sorry for this issue you are encountering.
May I suggest you please check with below link from success community with a similar discussion which might help you further with the above requirement.
- https://success.salesforce.com/answers?id=90630000000hdl1AAA
Please let us know if this helps.Thanks,
Nagendra
Thanks for the reply. I went through the code, my requirement is same but technically you can see the code sample(2nd one) , its little bit complex.
And you can see the the example link which you have given me its clear that they are using the Id value in the pageBlockTable and by using Var value they are refereing the {! var.fields} in the <apex:column> level. Thus suggest me how to use the same logic where in my code :
<apex:column styleClass="{!IF((LEN(pl.ident) < 10), 'highlightedRow', '')}">
<apex:outputField value="{!pl.item.RecordTypeId}" >
<apex:inlineEditSupport disabled="true"/>
</apex:outputField> <apex:facet name="header">{!$Label.Record_Type}</apex:facet>
</apex:column>
This type of function used not directly we can place in column level. Please help me out . Hope you will get back to me for some suggestion.
Appreciate your help.