简体   繁体   中英

PrimeFaces, Issues with Datatable Filtering + Ajax table update

I am using PF 3.5 community edition and I have the following issues with .

I have constructed a Datatable that uses Filters for one columns and selectable row along with a context menu.

This seems to create some kind of conflict when I use AJAX to insert a new entry (through a dialog) and update the datatable. The first insertion always works, be the subsequent ones never seem to call the action listener. I use courseTable.filter(); everywhere but the issue still persists. I have tried doing the same on datatables with Filters and non-selectable rows, and on datatables with no Filters and selectable rows. Both cases work OK, the combination however has problems.

<h:form id="mainForm">
        <p:focus />

        <!-- Main Data-table  -->
        <h:panelGrid style="width:700px;">

            <p:dataTable var="c" id="courseTable" widgetVar="courseTable"
                value="#{course.courseList}" rowKey="#{c.courseId}"
                selectionMode="single"
                filteredValue="#{course.filteredCourseList}">

                <p:ajax event="filter" global="false" />

                <f:facet name="header">
                    <p:commandButton value="Add Course" process="@this"
                        update="@this :courseForm" oncomplete="dlgInsertCourse.show()"/>
                </f:facet>

                <p:column id="courseCode" filterBy="#{c.courseCode}"
                    sortBy="#{c.courseCode}" filterMatchMode="contains"
                    headerText="Course Code">
                    <h:outputText value="#{c.courseCode}" />
                </p:column>

                <p:column id="courseName" filterBy="#{c.courseName}"
                    sortBy="#{c.courseName}"filterMatchMode="contains"
                    headerText="Course Name">
                    <h:outputText value="#{c.courseName}" />
                </p:column>

                <p:column id="courseType" filterBy="#{c.courseType}"
                    sortBy="#{c.courseType}"
                    filterOptions="#{course.courseTypeOptions}" 
                    headerText="Course Type" filterMatchMode="exact">
                    <h:outputText value="#{c.courseType}" />
                </p:column> 
            </p:dataTable>

        </h:panelGrid>

        <!-- Context Menu -->
        <p:contextMenu for="courseTable">

            <p:menuitem value="Edit" icon="ui-icon-pencil"
                update=":courseForm"
                oncomplete="dlgInsertCourse.show()"/>

                <p:menuitem value="Delete" icon="ui-icon-trash" update="@form"
                oncomplete="courseTable.filter();" />
        </p:contextMenu>
    </h:form>

    <!-- Insert Course Dialog  -->
    <p:dialog header="Create" widgetVar="dlgInsertCourse"
        draggable="true" resizable="false">
        <h:form id="courseForm">
            <p:panelGrid columns="1">

                <p:row>
                    <p:panelGrid columns="2">

                        <p:outputLabel value="Course Code: *"/>
                        <p:inputText label="Course Code"
                            value="#{course.course.courseCode}" />

                        <p:outputLabel value="Course Name: *"  />
                        <p:inputText label="CourseName"
                            value="#{course.course.courseName}" />

                        <p:outputLabel value="Course Type: *"  />
                        <p:selectOneRadio label="Course Type"
                            value="#{course.course.courseType}">
                            <f:selectItem itemLabel="Core" itemValue="Core" />
                            <f:selectItem itemLabel="Elective" itemValue="Elective" />
                        </p:selectOneRadio>

                    </p:panelGrid>
                </p:row>

            </p:panelGrid>

            <h:panelGroup style="display:block; text-align:center">
                <p:commandButton value="Submit" update="@form :mainForm :messages"
                    process="@form" 
                    oncomplete="if (!args.validationFailed) dlgInsertCourse.hide();"
                    actionListener="#{course.saveCourse()}"
                    />
            </h:panelGroup>
        </h:form>
    </p:dialog>

In more detail:

  1. After I have added in the datatable, now I can add courses normally if I have NOT applied a filter
  2. I havent used courseTable.filter(); on the submit dialog. If I DO use it I can NOT add courses even if I have not applied a filter
  3. Delete seems to work perfectly with any setting I try (with applied filters and non applied).

Solution found.

It seems using a different object in the backing bean for storing the datatable selection, and a different one for the "Insert Course Dialog" solved the problem.

In my case I used #{course.course} in both. Now I have added a #{course.selectedCourse} to handle the datatable.

Of course the backing bean should be updated accordingly.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM