I am getting weird slowness issue with Primefaces. For example i want to change pagination to next page it takes around 20-25 second. Even It doesnt go to database or anywhere . It just take data from backing bean. As you can see below
Even if I try to update inputtext from datatable row select event which opened inside of dialog . I mean i want to update to inputtext when user select any row in datatable in dialog. Even that takes at least 8-10 seconds to update inputtext field.
Initiator and paths which primefaces passing by are like
I couldn't figure out what's wrong.
My xhtml code :
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Management Dashboard</title>
</h:head>
<h:body>
<ui:composition template="./templateInternal.xhtml">
<ui:define name="content">
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0" type=""></script>
<style type="">
.ui-chart {
width: 100% !important;
}
.ui-panelgrid-content {
align-items: center;
}
.ui-paginator {
display: flex;
}
#testt\:onlineUsers {
height: 100%;
}
#testt\:onlineUsers_content {
height: 92%;
}
#testt\:depFillTimeLine {
height: 100%;
}
#testt\:depFillTimeLine_content {
height: 94%;
}
div.ui-dialog-titlebar.ui-widget-header.ui-helper-clearfix.ui-corner-top.ui-draggable-handle {
display: none;
}
body .ui-datatable .ui-paginator.ui-paginator-top {
display: flex;
align-items: center;
justify-content: center;
}
body .ui-datatable .ui-paginator.ui-paginator-bottom {
display: flex;
align-items: center;
justify-content: center;
}
</style>
<script type="">
function chartExtender() {
var options = {
plugins: [ChartDataLabels],
options: {
plugins: {
// Change options for ALL labels of THIS CHART
datalabels: {
color: '#36A2EB'
},
legend: {
display: true,
position: "right",
align: "center",
fullSize: true,
fontFamily: "Allianz-Neo",
textDirection: 'ltr',
labels: {
usePointStyle: true,
fontColor: "#006192",
padding: 23,
font: {
size: 25
}
}
}
}
},
data: {
datasets: [{
// Change options only for labels of THIS DATASET
datalabels: {
color: '#FFF'
}
}]
},
};
//merge all options into the main chart options
$.extend(true, this.cfg.config, options);
};
function onrangechange1() {
var first = PF('timelineFirstWdgt');
if (first.jq.data("rangeFired")) {
first.jq.data("rangeFired", null);
return;
}
}
</script>
<h1 class="pageHeaders animated fadeIn" style="padding-left: 40px;">Management Dashboard</h1>
<div id="fullPageContent" class=" animated fadeIn"
style="-webkit-animation-delay: 0.6s; /* Chrome, Safari, Opera */ animation-delay: 0.6s;">
<h:form id="mainOuterForm">
<div class="card">
<h:form id="mainInnerForm">
<p:panelGrid columns="2" layout="grid" styleClass="showcase-text-align-center">
<p:panel id="onlineUsers" header="Online Users">
<p:dataTable var="user" value="#{managementDashboardManagedBean.onlineUsers}"
paginator="true"
rows="5" rowKey="#{user.id}" widgetVar="onlineUserWidget"
paginatorTemplate="{FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15"
style="border: ridge;border-color: green;height: 100%">
<f:facet name="header">
Online Users : #{managementDashboardManagedBean.onlineUsers.size()}
</f:facet>
<p:column headerText="Login Name">
<h:outputText value="#{user.user_name}"/>
</p:column>
<p:column headerText="Login Time">
<h:outputText value="#{user.logIn_date}"/>
</p:column>
</p:dataTable>
</p:panel>
<p:panel id="projComplStatus" header="Project Complete Status">
<p:dataTable var="project" value="#{managementDashboardManagedBean.projects}"
rowKey="#{project.id}" widgetVar="projectsWidget"
selectionMode="single"
selection="#{managementDashboardManagedBean.selectedProject}"
paginator="true"
paginatorPosition="both"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
currentPageReportTemplate="{startRecord}-{endRecord} of {totalRecords} records"
rowsPerPageTemplate="3,30,50,100,1000" rows="3"
id="projectTable">
<p:column headerText="Name" sortBy="#{project.name}" filterBy="#{project.name}">
<h:outputText value="#{project.name}"/>
</p:column>
<p:column headerText="Priority" sortBy="#{project.priority}"
filterBy="#{project.priority}">
<h:outputText value="#{project.priority}"/>
</p:column>
<p:column headerText="Create Date" sortBy="#{project.createdDate}"
filterBy="#{project.createdDate}">
<h:outputText value="#{project.createdDate}"/>
</p:column>
<p:column headerText="Complete Status">
<p:selectBooleanCheckbox value="#{project.status}" itemLabel="Done"/>
</p:column>
</p:dataTable>
</p:panel>
</p:panelGrid>
<p:panelGrid columns="2" layout="grid" styleClass="showcase-text-align-center">
<p:panel id="depRecords" header="Department Records">
<p:pieChart model="#{managementDashboardManagedBean.pieModel}" style="width: 20%"/>
</p:panel>
<p:panel id="depFillTimeLine" header="Department Data Filling Timeline">
<p:tabView>
<p:tab title="Product">
<p class="m-0">
Product
</p>
</p:tab>
<p:tab title="Marketing">
<p class="m-0">
Marketing
</p>
</p:tab>
<p:tab title="SCBA">
<p class="m-0">
SCBA
</p>
</p:tab>
<p:tab title="QA">
<p class="m-0">
QA
</p>
</p:tab>
<p:tab title="Demand Planning">
<p class="m-0">
Demand Planning
</p>
</p:tab>
<p:tab title="Product Development">
<p class="m-0">
Product Development
</p>
</p:tab>
<p:tab title="Bdm">
<p class="m-0">
Bdm
</p>
</p:tab>
<p:tab title="Costing">
<p class="m-0">
Costing
</p>
</p:tab>
<p:tab title="Sourcing Dimension">
<p class="m-0">
Sourcing Dimension
</p>
</p:tab>
<p:tab title="Sourcing Packaging">
<p class="m-0">
Sourcing Packaging
</p>
</p:tab>
<p:tab title="Pricing">
<p class="m-0">
Pricing
</p>
</p:tab>
<p:tab title="Merchandising">
<p class="m-0">
Merchandising
</p>
</p:tab>
</p:tabView>
<p:timeline id="timelineFirst" value="#{managementDashboardManagedBean.modelFirst}"
var="task"
height="250px" widgetVar="timelineFirstWdgt"
start="#{managementDashboardManagedBean.start}"
end="#{managementDashboardManagedBean.end}">
<p:ajax event="rangechange" process="@none"
onstart="onrangechange1(); return false;"/>
<h:panelGroup layout="block" rendered="#{not task.period}"
style="padding-bottom:5px">
<h:outputText value="#{task.title}"/>
</h:panelGroup>
<p:graphicImage name="#{task.imagePath}" height="50px"/>
<h:panelGroup rendered="#{task.period}" style="padding:8px">
<h:outputText value="#{task.title}"/>
</h:panelGroup>
</p:timeline>
</p:panel>
</p:panelGrid>
<p:panelGrid columns="2" layout="grid" styleClass="showcase-text-align-center">
<p:panel id="projSteps" header="Project Steps">
<div class="card">
<h:form id="projStepsForm">
<p:commandButton value="Choose Project" icon="pi pi-home"
style="display: inline-block !important;"
onclick="PF('chooseProjectDialog').show()"/>
<p:inputText id="choosenProject"
style="display: inline-block !important;margin-left: 15px;width: 75%;text-align: center;"
value="#{managementDashboardManagedBean.selectedProject.name}"
disabled="true"/>
<p:chronoline value="#{managementDashboardManagedBean.events}" var="event"
align="alternate" styleClass="customized-chronoline"
style="margin-top: 10px">
<p:card>
<f:facet name="title">
#{event.status}
</f:facet>
<f:facet name="subtitle">
#{event.date}
</f:facet>
<p:graphicImage rendered="#{not empty event.image}" width="200"
styleClass="shadow-1"
value="../../resources/demo/images/product/#{event.image}"
alt="#{event.image}"/>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
<p:commandButton value="Read more" styleClass="ui-button-flat"/>
</p:card>
<f:facet name="marker">
<span class="custom-marker shadow-1"
style="background-color: #{event.color}"><i
class="#{event.icon}"/></span>
</f:facet>
</p:chronoline>
</h:form>
</div>
</p:panel>
</p:panelGrid>
</h:form>
</div>
<p:dialog widgetVar="chooseProjectDialog" closeOnEscape="true" width="1200"
height="760" resizable="false" showEffect="explode" hideEffect="explode">
<h:form id="dlgF">
<p:dataTable id="chooseProjectTable" var="project"
value="#{managementDashboardManagedBean.projects}" rowKey="#{project.id}"
selectionMode="single"
selection="#{managementDashboardManagedBean.selectedProject}"
paginator="true"
paginatorPosition="both"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
currentPageReportTemplate="{startRecord}-{endRecord} of {totalRecords} records"
rowsPerPageTemplate="15,30,50,100,1000" rows="15">
<p:ajax event="rowSelect" onstart="PF('chooseProjectDialog').hide();" update=":mainOuterForm:mainInnerForm:projStepsForm:choosenProject"
/>
<p:column headerText="Name" sortBy="#{project.name}" filterBy="#{project.name}">
<h:outputText value="#{project.name}"/>
</p:column>
<p:column headerText="Priority" sortBy="#{project.priority}"
filterBy="#{project.priority}">
<h:outputText value="#{project.priority}"/>
</p:column>
<p:column headerText="Create Date" sortBy="#{project.createdDate}"
filterBy="#{project.createdDate}">
<h:outputText value="#{project.createdDate}"/>
</p:column>
<p:column headerText="Complete Status">
<p:selectBooleanCheckbox value="#{project.status}" itemLabel="Done"/>
</p:column>
</p:dataTable>
</h:form>
</p:dialog>
</h:form>
</div>
</ui:define>
</ui:composition>
</h:body>
</html>
JSF: 2.2.1, PrimeFaces: 12.0.0, PrimeFaces Extensions: 12.0.5
