Try to search your question here, if you can't find : Ask Any Question Now ?

How do I keep the selected row displayed on the screen?

HomeCategory: stackoverflowHow do I keep the selected row displayed on the screen?
Avatarpragati asked 2 weeks ago

We are a java shop, that uses JSF and Primefaces as tools to build our website. We have a panel that often needs to display many rows using a p:datatable. We offer pagination because of this, and the user will often select the largest pagination size, which is 100 rows. (Note that 100 rows nearly always exceeds the capacity of your average monitor.)

When the user selects a row, by clicking on the p:selectBooleanCheckbox in the first column of the data row, the datatable is ‘automagically’ readjusting itself, often resulting in the screen not showing the row with the selected check box.

How can I prevent my datatable from doing this, and ensure that the selected row is always displayed?

I’ve been Googling hard to try and solve this, but not found any examples that exactly matches my scenario. I have tried p:ajax event=”change” oncomplete=”PrimeFaces.focus() but I’ve struggled with the syntax of this and haven’t got it to work. I’ve also tried removing the forms listed under the attribute, as I thought that by requesting to update these areas, my focus would be lost. I got the same result without them, however.

   Here is my datatable definition:
     <p:dataTable id="tradeBlotterTradeListTable"
                 value="#{tradeBlotterTradeListDesktop.tradeOrderDigests}"
                 var="tradeOrder" emptyMessage="#{bundle.messageNoRecordsFound}"
                 paginator="true" paginatorAlwaysVisible="false"
                 selectionMode="single"
                 selection="#{tradeBlotterTradeListDesktop.tradeOrderHighlightedRow}"
                 rowKey="#{tradeOrder.torId}"
                 styleClass="grid-form-table stronger-highlight"
                 paginatorPosition="bottom"
                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                 rows="25" rowsPerPageTemplate="10,15,25,50,100">

Here is the first column in the datatable:

        <p:column exportable="false" styleClass="ui-selection-column ">
            <f:facet name="header">
                <h:outputText value="#{bundle.textAll}"/>
                <h:panelGroup layout="block" styleClass="header-checkbox">
                    <p:selectBooleanCheckbox value="#{tradeBlotterTradeListDesktop.includeAll}"
                                             id="selectAllTradeOrders">
        <p:ajax event="change"
                 update="tradeBlotterTradeListTable :contentForm:actionDock"
            listener="#{tradeBlotterTradeListDesktop.handleIncludeAll}"/>
                    </p:selectBooleanCheckbox>
                </h:panelGroup>
            </f:facet>

            <p:selectBooleanCheckbox value="#{tradeOrder.selected}" disabled="#{!tradeOrder.selectable}" id="selectBox">

                <p:ajax event="change" update="tradeBlotterTradeListTable :contentForm:actionDock"
                        listener="#{tradeBlotterTradeListDesktop.handleSelectionChange}"/>

            </p:selectBooleanCheckbox>
        </p:column>

And here is the method called when the check box is changed: (Note that there’s nothing in here to attempt to maintain focus on the selected row.)

public void handleSelectionChange(AjaxBehaviorEvent event) {
    tradeBlotterListSpecialInstructionsEditPresenter.buildSelectedTraderOrders();
    //setHighlightedRow(null);
    resetSelectionInputs();

}
}

My desired result is that when a row is selected by checking it’s checkbox column, the table doesn’t display a different area of the data table, and continues to show the row that has been selected.

1 Answers
Best Answer
AvatarAmit answered 2 weeks ago
Your Answer

15 + 1 =

Popular Tags

WP Facebook Auto Publish Powered By : XYZScripts.com