Xpages: Dynamic View Panel - Sorting

Question

In my dynamic view panel, I need to have sortable columns. Problem is when sorting a column it resubmits the XPage and whole content is refreshed. Is there a way to achieve sorting only on the dynamic view panel without submitting whole page? Also, I want to hide this control if selected view is empty.

Here is my code:

<xp:panel id="searchPanel">
            <xp:table styleClass="table table-condensed" style="width:auto">
                <xp:tr>
                    <xp:td style="border-top:0px" styleClass="text-nowrap" id="searchColumn">
                        <xp:inputText id="inputText1" value="#{viewScope.searchterm}" styleClass="form-control"></xp:inputText>
                        <xp:link escape="true" text="" id="searchLink">
                            <i class="fa fa-search" style="margin-left:5px"></i>
                            <xp:eventHandler event="onclick" refreshMode="partial" immediate="false" submit="true" refreshId="ddPanel">
                                <xp:this.action><![CDATA[#{javascript:var pager:com.ibm.xsp.component.xp.XspPager = getComponent("pager");
pager.gotoFirst();}]]></xp:this.action>
                            </xp:eventHandler>
                        </xp:link>
                        <xp:link escape="true" text="" id="clearSearchLink">
                            <i class="fa fa-times" style="margin-left:5px"></i>
                            <xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="ddPanel" onComplete="showHideTableToggle()">
                                <xp:this.action><![CDATA[#{javascript:viewScope.remove("searchterm");}]]></xp:this.action>
                                <xp:this.script><![CDATA[dojo.byId(getID("inputText1")).value=""]]></xp:this.script>
                            </xp:eventHandler>
                        </xp:link>
                    </xp:td>
                    <xp:td style="border-top:0px;padding-left:20px">
                        <xp:link escape="true" id="addButton" onclick="return false;" styleClass="btn btn-primary" style="color:rgb(255,255,255)" text="Add">
                            <i class="fa fa-plus" style="margin-right:5px"></i>
                            <xp:eventHandler event="onclick" submit="false" refreshMode="complete">
                                <xp:this.script><![CDATA[XSP.openDialog(getID('contentDialog'),'',{"docID":"","newDoc":"false"});]]></xp:this.script>
                            </xp:eventHandler>
                        </xp:link>
                    </xp:td>

                </xp:tr>
            </xp:table>
            <xp:panel id="ddPanel">
                <xe:dynamicViewPanel id="mainView" width="100%" dataTableStyleClass="table table-bordered table-condensed table-hover" rows="10" var="myView"
                    showColumnHeader="true" customizerBean="com.hcl.igdm.PickerViewBeanMainViews" partialRefresh="true" refreshId="ddPanel"
                >
                    <xe:this.data>
                        <xp:dominoView var="mainDataView" dataCache="nodata">
                            <xp:this.viewName><![CDATA[#{javascript:sessionScope.showView.split("~")[0]}]]></xp:this.viewName>
                        </xp:dominoView>
                    </xe:this.data>
                    <xe:this.rowAttrs>
                        <xp:attr name="onClick">
                            <xp:this.value><![CDATA[#{javascript:return "javascript:myJSFunction();"}]]></xp:this.value>
                        </xp:attr>
                    </xe:this.rowAttrs>
                </xe:dynamicViewPanel>
                <xp:pager layout="Previous Group Next" partialRefresh="true" id="pager" for="mainView" title="Pager"></xp:pager>
            </xp:panel>

You can do it if you load JSON data but that is probably more change than you want to make. What happens if you just refresh the panel containing the view control? — Steve Zavocki
I am trying to do the same but it refreshes whole page. I selected partialrefresh = true and refreshid=panel id but it does not have any effect. Also, I am not sure how to trap the sort event server side. I have been using JSON data and Data Table to display the same. But I also need to take care of full-text search on the view so thought better of it and switched to dynamic view panel. — Arun
My guess is that you don't have to do a full refresh to perform column sorting, but I don't know for sure. I haven't done it that way in a while. Please edit your question and post your code. — Steve Zavocki
Did you also use partial execution? Perhaps if you include the code it will be easier for us to figure out. — David Navarre

Adrian Adrian · Accepted Answer · 2016-10-10T08:03:29

It's a long time ago this question was placed... but maybe the answer can help other people.

You can put the dynamicViewPanel into a 'dynamic content' container (from ExtLib) with partial events attribute set to true. This will convert the full update events into partial refresh events.

<xe:dynamicContent partialEvents="true">
    ...
</xe:dynamicContent>

Xpages: Dynamic View Panel - Sorting

1 Answers