Hi all,
Our solution encapsulates a kind of dynamic reporting based on the VAADIN table component. We wanted to use the Grid instead and we have noticed that the table column reordering feature performs better than the Grid one. We have tested this on FF 50.1.0 and Chrome 55.0.2883.87. We have deployed the solution on the same environement (JRE 7, TOMCAT 7, 64GB RAM, …) and for the same report we tried to move the third column to the first position. In this case, the server side will perform some calculations and data source container will be refreshed. An item set change event is fired to tell the table (or grid) component to redraw its content.
We remarked that for the Grid component and when the column is dropped on the first position, the UI freezes for approximatly one second and then the you can see that the moved column gets the first position. The server side treatement is then triggered and the report content is refreshed. We don’t notice the same behaviour for the table based implementation and the things seems to happen more rapidly. Here is the JS Console log for both the two operations
(I removed the table data content from JSON object cause it makes the log trace unreadable
) :
Grid
2890ms RPC invocations to be sent to the server:
2890ms 656 (class com.vaadin.client.connectors.GridConnector) :
2890ms com.vaadin.shared.ui.grid.GridServerRpc.columnsReordered([[4, 1, 2, 3, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21]
, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21]
])
2891ms Sending push (websocket) message to server
: {“csrfToken”:“4583699e-63d1-41ea-a299-8f908ff73b45”,“rpc”:[[“656”,“com.vaadin.shared.ui.grid.GridServerRpc”,“columnsReordered”,[[“4”,“1”,“2”,“3”,“5”,“6”,“7”,“8”,“9”,“10”,“11”,“12”,“13”,“14”,“15”,“16”,“17”,“18”,“19”,“20”,“21”]
,[“1”,“2”,“3”,“4”,“5”,“6”,“7”,“8”,“9”,“10”,“11”,“12”,“13”,“14”,“15”,“16”,“17”,“18”,“19”,“20”,“21”]
]]],“syncId”:14,“clientId”:8}
3849ms JSON parsing took 2.28ms
3851ms Received push (websocket) message: for(;;);[{“syncId”: 15, “clientId”: 9, “changes” :
, “state”:{}, “types”:{“656”:“40”,“657”:“37”}, “hierarchy”:{“656”:[“657”,“658”,“659”,“660”,“661”,“662”,“663”,“664”,“665”,“666”,“667”,“668”,“669”,“670”,“671”,“672”,“673”,“674”,“675”,“676”,“677”,“678”,“679”,“680”,“681”]
,“657”:}, “rpc” : [[“656”,“com.vaadin.shared.ui.grid.GridClientRpc”,“recalculateColumnWidths”,
],[“657”,“com.vaadin.shared.data.DataProviderRpc”,“resetDataAndSize”,[66]
],[“657”,“com.vaadin.shared.data.DataProviderRpc”,“meta” : {“async”:true}, “resources” : {}, “timings”:[6597, 0]
}]
3853ms Handling message from server
3853ms * Handling resources from server
3853ms * Handling type inheritance map from server
3854ms Handling type mappings from server
3854ms Handling resource dependencies
3854ms * Handling meta information
3854ms * Creating connectors (if needed)
3854ms * Updating connector states
3855ms * Handling locales
3855ms * Updating connector hierarchy
3856ms * Running @DelegateToWidget
3856ms * Sending state change events
3856ms * Passing UIDL to Vaadin 6 style connectors
3856ms * Performing server to client RPC calls
3856ms Server to client RPC call: 656:com.vaadin.shared.ui.grid.GridClientRpc.recalculateColumnWidths()
3857ms Server to client RPC call: 657:com.vaadin.shared.data.DataProviderRpc.resetDataAndSize([66]
)
4036ms Server to client RPC call: 657:com.vaadin.shared.data.DataProviderRpc.setRowData([0, [object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
])
4057ms Server to client RPC call: 657:com.vaadin.shared.data.DataProviderRpc.updateRowData([[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
])
4089ms * Unregistered 0 connectors
4089ms handleUIDLMessage: 235 ms
4089ms Starting layout phase
4089ms Measured 0 non connector elements
4092ms Pass 1 measured 1 elements, fired 0 listeners and did 0 layouts.
4092ms No more changes in pass 2
4092ms Total layout phase time: 3ms
4093ms * Dumping state changes to the console
4093ms UIDL: undefined
4094ms Processing time was 241ms
4094ms Referenced paintables: 338
5068ms JSON parsing took 0.025ms
5069ms Received push (websocket) message: for(;;);[{“syncId”: 16, “clientId”: 9, “changes” :
, “state”:{}, “types”:{}, “hierarchy”:{}, “rpc” : , “meta” : {}, “resources” : {}, “timings”:[6597, 0]
}]
5069ms Handling message from server
5069ms * Handling resources from server
5069ms * Handling type inheritance map from server
5069ms Handling type mappings from server
5069ms Handling resource dependencies
5069ms * Handling meta information
5069ms * Creating connectors (if needed)
5070ms * Updating connector states
5070ms * Handling locales
5070ms * Updating connector hierarchy
5070ms * Running @DelegateToWidget
5072ms * Sending state change events
5072ms * Passing UIDL to Vaadin 6 style connectors
5072ms * Performing server to client RPC calls
5073ms * Unregistered 0 connectors
5073ms handleUIDLMessage: 4 ms
5073ms * Dumping state changes to the console
5073ms UIDL: undefined
5074ms Processing time was 5ms
5074ms Referenced paintables: 338
5112ms RPC invocations to be sent to the server:
5112ms 657 (class com.vaadin.client.connectors.RpcDataSourceConnector) :
5112ms com.vaadin.shared.data.DataRequestRpc.dropRows([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37]
)
5112ms com.vaadin.shared.data.DataRequestRpc.requestRows([40, 26, 0, 40]
)
5114ms Sending push (websocket) message to server: {“csrfToken”:“4583699e-63d1-41ea-a299-8f908ff73b45”,“rpc”:[[“657”,“com.vaadin.shared.data.DataRequestRpc”,“dropRows”,[[“1”,“2”,“3”,“4”,“5”,“6”,“7”,“8”,“9”,“10”,“11”,“12”,“13”,“14”,“15”,“16”,“17”,“18”,“19”,“20”,“21”,“22”,“23”,“24”,“25”,“26”,“27”,“28”,“29”,“30”,“31”,“32”,“33”,“34”,“35”,“36”,“37”]
]],[“657”,“com.vaadin.shared.data.DataRequestRpc”,“requestRows”,[40,26,0,40]
]],“syncId”:16,“clientId”:9}
5199ms JSON parsing took 0.54ms
5200ms Received push (websocket) message: for(;;);[{“syncId”: 17, “clientId”: 10, “changes” :
, “state”:{}, “types”:{“657”:“37”}, “hierarchy”:{“657”:}, “rpc” : [[“657”,“com.vaadin.shared.data.DataProviderRpc”,“meta” : {}, “resources” : {}, “timings”:[6617, 20]
}]
5201ms Handling message from server
5201ms * Handling resources from server
5201ms * Handling type inheritance map from server
5201ms Handling type mappings from server
5201ms Handling resource dependencies
5201ms * Handling meta information
5201ms * Creating connectors (if needed)
5201ms * Updating connector states
5202ms * Handling locales
5202ms * Updating connector hierarchy
5202ms * Running @DelegateToWidget
5202ms * Sending state change events
5202ms * Passing UIDL to Vaadin 6 style connectors
5202ms * Performing server to client RPC calls
5202ms Server to client RPC call: 657:com.vaadin.shared.data.DataProviderRpc.setRowData([40, [object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
,[object Object]
])
5245ms * Unregistered 0 connectors
5245ms handleUIDLMessage: 44 ms
5245ms * Dumping state changes to the console
5245ms UIDL: undefined
5245ms Processing time was 45ms
5246ms Referenced paintables: 338
Table
4242ms RPC invocations to be sent to the server:
4242ms 545 (class com.vaadin.client.ui.table.TableConnector) :
4242ms v.v(columnorder : 4,1,2,3,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21)
4243ms Sending push (websocket) message to server: {“csrfToken”:“0380aea2-c510-456e-8140-c3ef08c8c236”,“rpc”:[[“545”,“v”,“v”,[“columnorder”,[“S”,[“4”,“1”,“2”,“3”,“5”,“6”,“7”,“8”,“9”,“10”,“11”,“12”,“13”,“14”,“15”,“16”,“17”,“18”,“19”,“20”,“21”]
]]]],“syncId”:31,“clientId”:18}
4357ms JSON parsing took 1.93ms
4359ms Received push (websocket) message: for(;;);[{“syncId”: 32, “clientId”: 19, “changes” : [[“change”,{“pid”:“545”},[“35”,{“id”:“545”,“multiselectmode”:1,“selectmode”:“single”,“nsa”:false,“measurehint”:0,[“column”,{“cid”:“4”,“caption”:“Client”,“fcaption”:“”,“width”:227}]
,[“column”,{“cid”:“1”,“caption”:“Date”,“fcaption”:“”,“width”:92}]
,[“column”,{“cid”:“2”,“caption”:“Facture”,“fcaption”:“”,“width”:92}]
,[“column”,{“cid”:“3”,“caption”:“Ordre”,“fcaption”:“”,“width”:92}]
,[“column”,{“cid”:“5”,“caption”:“Conseiller”,“fcaption”:“”,“width”:92}]
,[“column”,{“cid”:“6”,“caption”:“Compte”,“fcaption”:“”,“width”:56}]
,[“column”,{“cid”:“7”,“caption”:“Code postal”,“fcaption”:“”,“width”:101}]
,[“column”,{“cid”:“8”,“caption”:“Devise”,“fcaption”:“”,“width”:56}]
,[“column”,{“cid”:“9”,“caption”:“Article”,“fcaption”:“”,“width”:542}]
,[“column”,{“cid”:“10”,“caption”:“Sous-famille d’articles”,“fcaption”:“”,“width”:227}]
,[“column”,{“cid”:“11”,“caption”:“Famille d’articles”,“fcaption”:“”,“width”:164}]
,[“column”,{“cid”:“12”,“caption”:“Quantité”,“fcaption”:“”,“width”:182}]
,[“column”,{“cid”:“13”,“caption”:“Prix”,“fcaption”:“”,“width”:146}]
,[“column”,{“cid”:“14”,“caption”:“Montant devise”,“fcaption”:“”,“width”:155}]
,[“column”,{“cid”:“15”,“caption”:“Montant net”,“fcaption”:“”,“width”:155}]
,[“column”,{“cid”:“16”,“caption”:“Taux TVA”,“fcaption”:“”,“width”:83}]
,[“column”,{“cid”:“17”,“caption”:“Montant brut”,“fcaption”:“”,“width”:155}]
,[“column”,{“cid”:“18”,“caption”:“Engagement”,“fcaption”:“”,“width”:155}]
,[“column”,{“cid”:“19”,“caption”:“Marge %”,“fcaption”:“”,“width”:83}]
,[“column”,{“cid”:“20”,“caption”:“Marge”,“fcaption”:“”,“width”:155}]
,[“column”,{“cid”:“21”,“caption”:“”,“fcaption”:“”,“width”:11}]
]]]], “state”:{}, “types”:{“545”:“35”}, “hierarchy”:{“545”:[“546”]
}, “rpc” : , “meta” : {“async”:true}, “resources” : {}, “timings”:[5261, 0]
}]
4361ms Handling message from server
4362ms * Handling resources from server
4363ms * Handling type inheritance map from server
4364ms Handling type mappings from server
4365ms Handling resource dependencies
4366ms * Handling meta information
4366ms * Creating connectors (if needed)
4367ms * Updating connector states
4367ms * Handling locales
4367ms * Updating connector hierarchy
4369ms * Running @DelegateToWidget
4370ms * Sending state change events
4370ms * Passing UIDL to Vaadin 6 style connectors
4622ms * Performing server to client RPC calls
4627ms * Unregistered 0 connectors
4627ms handleUIDLMessage: 261 ms
4628ms Starting layout phase
4628ms Measured 0 non connector elements
4639ms Pass 1 measured 1 elements, fired 0 listeners and did 0 layouts.
4639ms No more changes in pass 2
4726ms Total layout phase time: 98ms
4726ms * Dumping state changes to the console
4726ms UIDL: undefined
4728ms Processing time was 367ms
4728ms Referenced paintables: 544
4731ms Starting layout phase
4732ms Measured 0 non connector elements
4736ms Pass 1 measured 2 elements, fired 0 listeners and did 1 layouts.
4736ms No more changes in pass 2
4737ms Total layout phase time: 6ms
4737ms JSON parsing took 0.025ms
4737ms Received push (websocket) message: for(;;);[{“syncId”: 33, “clientId”: 19, “changes” :
, “state”:{}, “types”:{}, “hierarchy”:{}, “rpc” : , “meta” : {}, “resources” : {}, “timings”:[5261, 0]
}]
4737ms Handling message from server
4738ms * Handling resources from server
4738ms * Handling type inheritance map from server
4738ms Handling type mappings from server
4738ms Handling resource dependencies
4738ms * Handling meta information
4738ms * Creating connectors (if needed)
4739ms * Updating connector states
4739ms * Handling locales
4742ms * Updating connector hierarchy
4743ms * Running @DelegateToWidget
4743ms * Sending state change events
4743ms * Passing UIDL to Vaadin 6 style connectors
4744ms * Performing server to client RPC calls
4747ms * Unregistered 0 connectors
4747ms handleUIDLMessage: 9 ms
4747ms * Dumping state changes to the console
4747ms UIDL: undefined
4748ms Processing time was 11ms
4748ms Referenced paintables: 544
4803ms RPC invocations to be sent to the server:
4804ms 545 (class com.vaadin.client.ui.table.TableConnector) :
4804ms v.v(firstToBeRendered : 0)
4804ms v.v(lastToBeRendered : 65)
4805ms v.v(reqfirstrow : 60)
4805ms v.v(reqrows : 6)
4805ms Sending push (websocket) message to server: {“csrfToken”:“0380aea2-c510-456e-8140-c3ef08c8c236”,“rpc”:[[“545”,“v”,“v”,[“firstToBeRendered”,[“i”,0]
]],[“545”,“v”,“v”,[“lastToBeRendered”,[“i”,65]
]],[“545”,“v”,“v”,[“reqfirstrow”,[“i”,60]
]],[“545”,“v”,“v”,[“reqrows”,[“i”,6]
]]],“syncId”:33,“clientId”:19}
4894ms JSON parsing took 0.24ms
4894ms Received push (websocket) message: for(;;);[{“syncId”: 34, “clientId”: 20, “changes” : [[“change”,{“pid”:“545”},[“35”,{“id”:“545”,“multiselectmode”:1,“selectmode”:“single”,“nsa”:false,“measurehint”:0,[“column”,{“cid”:“12”,“caption”:“Quantité”,“fcaption”:“”,“width”:182}]
,[“column”,{“cid”:“13”,“caption”:“Prix”,“fcaption”:“”,“width”:146}]
,[“column”,{“cid”:“14”,“caption”:“Montant devise”,“fcaption”:“”,“width”:155}]
,[“column”,{“cid”:“15”,“caption”:“Montant net”,“fcaption”:“”,“width”:155}]
,[“column”,{“cid”:“16”,“caption”:“Taux TVA”,“fcaption”:“”,“width”:83}]
,[“column”,{“cid”:“17”,“caption”:“Montant brut”,“fcaption”:“”,“width”:155}]
,[“column”,{“cid”:“18”,“caption”:“Engagement”,“fcaption”:“”,“width”:155}]
,[“column”,{“cid”:“19”,“caption”:“Marge %”,“fcaption”:“”,“width”:83}]
,[“column”,{“cid”:“20”,“caption”:“Marge”,“fcaption”:“”,“width”:155}]
,[“column”,{“cid”:“21”,“caption”:“”,“fcaption”:“”,“width”:11}]
]]]], “state”:{}, “types”:{“545”:“35”}, “hierarchy”:{“545”:[“546”]
}, “rpc” : , “meta” : {}, “resources” : {}, “timings”:[5279, 18]
}]
4895ms Handling message from server
4895ms * Handling resources from server
4895ms * Handling type inheritance map from server
4895ms Handling type mappings from server
4895ms Handling resource dependencies
4895ms * Handling meta information
4896ms * Creating connectors (if needed)
4896ms * Updating connector states
4896ms * Handling locales
4896ms * Updating connector hierarchy
4896ms * Running @DelegateToWidget
4896ms * Sending state change events
4897ms * Passing UIDL to Vaadin 6 style connectors
4925ms * Performing server to client RPC calls
4929ms * Unregistered 0 connectors
4929ms handleUIDLMessage: 33 ms
4929ms Starting layout phase
4929ms Measured 0 non connector elements
4932ms Pass 1 measured 1 elements, fired 0 listeners and did 0 layouts.
4932ms No more changes in pass 2
4932ms Total layout phase time: 3ms
4932ms * Dumping state changes to the console
4933ms UIDL: undefined
4933ms Processing time was 38ms
4933ms Referenced paintables: 544
Can someone tell us what is missing in Grid implementation or it is a performance issue for the Grid component.
Best regards