There are three issues that I am looking at which are intertwined and related to multivalue lookup.
1. With pagination on the lookup results, only selections from the visible page are returned
2. When server side paging is enabled, selection from the non visible pages are not retained as you move through the pages.
3. With server side paging and non dataTable rendering "Return Selected" button does not get enabled when clicking on a checkbox.
Currently in multi value lookup, the results are displayed client side (no server paging) using dataTables. All the javascript functions to enable return selected, process result submission assume that there is a dataTable in the DOM.
I have setup examples to enable server side paging both with and without dataTable by providing a custom viewName to the quickFinder. I have attached the XML for reference.
For item 1. The pagination causes the dataTable to remove all rows from the DOM except the ones on the visible page. So, dataTables need to be handled differently in javascript, so that it can use the plugin api to extract the selected records from non visible page. This is also why we can't use the jQuery class based selector for retrieving selected checkbox input fields.
For item 2. Server side paging with or without dataTable causes only one page worth of content to be present in the DOM. Selection made client side are not being saved anywhere to be accessed later as the user pages through the results.
For item 3. onChange event listener is written only for dataTable based rendering of results.
I can think of two solutions
1. Use a client side JSON object to store the user selections. The JSON object won't be replaced as part of component refresh in case of server side paging. We can then use the JSON object to calculate if 'Return Selected' button should be enabled and also to populate hidden variables on submit. In this approach, once a page is retrieved from the server, we would have to reset any selections that were present on the page from the JSON object. This solution will work for both serverPaging and default paging provided by dataTable.
2. In the other solution, for every select/deselect event a call will be made to a controller method that will record the event server side. This will fix the issue of preserving selections as the user moves through different pages. To solve the problem of retaining the right state for "Return Selected" button we would need to use a counter logic instead of boolean that is there right now. With every selection we increment the counter and with every deselection we decrement the counter. If the counter is at 0, we disable the button else the button stays enabled. This way even if the user moves to a new page the button would know what state it is in. In this solution on submit, instead of reading the selections from request, the collection stored on the server needs to be read to identify which line items need to be processed.
Also for solution 2, the JS function 'handleCheckboxLabelClick' needs to be updated so that it sends a request to the server if server paging is enabled.
Solution 1, has lower performance impact as it would not require a server call for every select/deselect. It is also a single solution that can be applied to all use cases (client side dataTable only, with server paging and dataTable and with server paging without dataTable)
Data table only retains elements on the visible page within the DOM. To be able to preserve selections from hidden pages, we need to extract those elements from the datatable and re-insert them back into the form
http://datatables.net/forums/discussion/185/submitting-forms-with-fields-on-hidden-pages/p1
A solution has been proposed at this link
http://datatables.net/examples/api/form.html
Based on the above solution I have added this logic to the setupMultiValueReturn() in krad.widgets.js. This is a presubmit call to the return selected action. Here is the code:
I tested it locally and the solution works for MVL returns from multiple pages.