function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
ezdhanhussainezdhanhussain 

Is it possible to move pageblocktable rows up and down?

Hi i have a requirement to re-order by pageblocktable rows as needed by using mouse drag functionality ? Can any one suggest possible methods to achieve this ?
Ashish_SFDCAshish_SFDC
Hi ,


Yes it is possible,

You have to change it in the sequence that you want.

<apex:pageblock1>
</apex:pageblock1>
<apex:pageblock2>
</apex:pageblock2>

etc.

If you have anything specific post your visualforce code as well.


Regards,
Ashish
ezdhanhussainezdhanhussain
Hi ashish here is the code snippet in this table i need to have re-ordering functionality
vf page:-
<apex:pageBlockTable value="{!contactList}" var="item" title="Contact List" styleClass="vfFloatingHeaders">
                <apex:column value="{!item.firstname}"/>
                <apex:column value="{!item.lastname}"/>
                <apex:column value="{!item.email}"/>
                <apex:column value="{!item.phone}"/>
            </apex:pageBlockTable>
controller class:-
public list<contact> contactList
    {
        get
        {
          if (contactList == null)
          {
              contactList = [select firstname, lastname, email, phone from contact];
          } 
          return contactList;
        }
        set;
    }
Edwin VijayEdwin Vijay
I guess you might want to use Javascript or Jquery to achieve this.
Ashish_SFDCAshish_SFDC
Hi , 


How do you wish to re order?

Can you share a pic ? explaing how it looks currently and what changes you are expecting?


Regards,
Ashish
ezdhanhussainezdhanhussain
Hi ashish here i am attaching images for more details 
The first table is a jquery example which displays <li></li>

User-added image

The next image is after sorting rows

User-added image

I want the same functionality to be implemented with our native pageblock table

User-added image
Ashish_SFDCAshish_SFDC
Hi , 


How did you sort the items in the 2nd image? 

How do you want to sort in the 3rd Image?

can you also share the visualforce code for these images?


Regards,
Ashish
ericmonteericmonte
The best way to do this is use the JquqeryUI widget that allows to sortable:

http://jqueryui.com/sortable/

Then what you would do next is to add your page block within the jquery.

So your code might look like this:

<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Insert Page Block 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Insert Page Block 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Insert Page Block 3</li>
</ul>

does this make sense? If not let me know and i'll see if i can create a simple POC for you.

Cheers
ezdhanhussainezdhanhussain
Hi eric, Thanks for a response, The way suggested by you is for pageblock's , i want the same to pageblock table column's
ericmonteericmonte
Ahh, I see what your trying to do. It is do-able you would have to create custom CSS and Custom Jquery to make it work with the SFDC Page Block Tables. Also you can try this as well:

<apex:page standardController="Contact" extensions="extContactList">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"/>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css"/>
   
     <style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>

<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>

    <ul id="sortable" >
        <li class="ui-state-default"> First Name - Last Name - Id</li>
    <apex:repeat value="{!ContactList}" var="c">
        <li class="ui-state-default"> {!c.FirstName} - {!c.LastName} - {!c.Id} </li>
   
    </apex:repeat>
    </ul>
   
</apex:page>



public class extContactList {
   

    public extContactList(ApexPages.StandardController controller) {

    }
   
    public List <Contact> getContactList(){
    List <Contact> c = [select id, FirstName, LastName from Contact Limit 10];
   
    return c;
   
    }

}
ezdhanhussainezdhanhussain
Hi eric your POC is working as expected but can't it work with pageblocktable as i have developed my whole code using pageblocktable, If you can provide any POC for pageblocktable it would be a great help..
ericmonteericmonte
So when you use SFDC Page Block Table you will be unable to use the Jquery UI widget because SFDC has it's own UI properties for the Page block table that are not useable in your Jquery. For you to accomplish your requirement I would suggest the following:

1. Create your own Data Table not using apex page block
2. Create a Custom Jquery or Use some type of Jquery Plug in that will accomplish your requirement.

Also, what is your use case for moving records up and down? Are you saving the order using the sortable feature?
ezdhanhussainezdhanhussain
i am trying to create a table in which i can add dynamic rows, and which can be sortable.This is basically for agenda planning of a day
Mana YaghmaiMana Yaghmai
I am trying to render my page as PDF and because my table has more than 1000 character I had to make the page "read only". I need my dataTable to be sortable ascending or descending because I want to see everything based on date so the date column should be descending. I am so new with visualforce, would you please give me a solution with the minimum Jquery coding