0

I have a VF page with a datatable that is populated from a custom search. The datatable has a checkbox column so that the rows can be selected and processed.

I'm trying to implement a way for the user to select multiple rows using either shift+click, ctrl+click, or ctrl+a on the rows that would also select the checkboxes so multiple rows can be easily selected and processed.

I have jquery-3.3.1.min successfully loaded. I was trying to get the following plugin to work on the page: Multiselect Plugin

I was unable to get the plugin to work. I tried using jquery 1.11.1 as indicated in the article as well because I was getting a type error with 3.3.1 version. When trying to debug, I'm not getting anything back in the browser debug log.

Here is a portion of the VF page:

    <apex:page standardController="SalesOrder__c" extensions="EditAllLineItemsExt,SearchProducts" docType="html-5.0">
        <apex:form >
            <apex:includeScript value="{!URLFOR($Resource.Jquery_3_3_1_min, '/jquery-3.3.1.min.js')}"/>
            <apex:includeScript value="{!$Resource.JqueryMultiselect}"/>
            <apex:includeScript value="{!$Resource.VF_EditAllLineItems}"/>

            // additional code moved for brevity..
            // page block code below that displays the search results that I want to implement multi-select...

            <apex:pageBlock id="pbSearch">
                <apex:pageBlockSection columns="1">
                    <apex:pageBlockTable value="{!results}" var="result" id="searchTable">
                        <apex:column headervalue="Action">
                            <apex:inputcheckbox value="{!result.selected}">
                                <apex:actionSupport event="onclick" action="{!getSelected}" reRender="btnAddProducts" />
                            </apex:inputcheckbox>
                        </apex:column>
                        <apex:column headerValue="Product SKU">
                            <apex:outputField value="{!result.product.Name}" />       
                        </apex:column>
                        <apex:column headerValue="{!dynamicColumnHeader1}">
                            <apex:outputPanel rendered="{!If(dynamicColumnHeader1 = 'Manufacturer', true, false)}">
                                <apex:outputField value="{!result.product.Manufacturer__c}" /> 
                            </apex:outputPanel>
                            <apex:outputPanel rendered="{!If(dynamicColumnHeader1 = 'Description', true, false)}">
                                <apex:outputField value="{!result.product.Description}" /> 
                            </apex:outputPanel>      
                        </apex:column>
                        <apex:column headerValue="{!dynamicColumnHeader2}">
                            <apex:outputPanel rendered="{!If(dynamicColumnHeader2 = 'Style Number', true, false)}">
                                <apex:outputField value="{!result.product.Style_Number__c}" /> 
                            </apex:outputPanel>
                            <apex:outputPanel rendered="{!If(dynamicColumnHeader2 = 'Product Family', true, false)}">
                                <apex:outputField value="{!result.product.Family}" />
                            </apex:outputPanel>    
                        </apex:column>
                        <apex:column headerValue="Color">
                            <apex:outputField value="{!result.product.Color__c}" />     
                        </apex:column>
                        <apex:column headerValue="Size">
                            <apex:outputField value="{!result.product.Size__c}" />     
                        </apex:column>
                        <apex:column headerValue="Product Name">
                            <apex:outputField value="{!result.product.Product_Name__c}" />     
                        </apex:column>
                        <apex:column headerValue="Tag Style">
                            <apex:outputField value="{!result.product.Tag_Style__c}" />     
                        </apex:column>
                    </apex:pageBlockTable>    
                </apex:pageBlockSection>
            </apex:pageBlock>
        </apex:form>
    </apex:page>

script code:

j$ = jQuery.noConflict();

j$(document).ready(function() {
    j$(function () {
        j$('[id*=searchTable]').multiSelect({
            selector: 'tbody tr',
            except: ['tbody']
        });
    })
});

Does anyone know of a plugin to accomplish what I'm trying? Or, my error with the implementation of the above plugin?

0

The Multiselect plugin which you are using seems to be deprecated. For example the plugin uses size() method which is deprecated in the latest versions of jQuery.

I found a code in a fiddle which has a solution to your problem. It uses pure JS to select the rows without any plugin.

I am including the Ctrl+A functionality to select the all rows in the table:

document.onkeydown = function(){
            if(window.event.ctrlKey && window.event.keyCode == 65){
                for (var i = 0; i <= trs.length; i++) {
                    trs[i].className = 'selected';
                }
            }
        }
|improve this answer|||||

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.