How can I use vLookup ListView with vLookupIsLoadedCallback?

[Brett]

Hi Alexander,

I have been working on this for days and finally found the vLookupIsLoadedCallback function from your post here: https://spjsblog.com/forums/topic/alternating-row-style-and-pring/

I’ve got an add-on js (datatables.net) working perfectly within the vLookup on each the Form using the vLookupIsLoadedCallback.
But for the ListView page, the vLookup displays fine but the custom js is not loading.

Confirmed with AdamP’s post here: January 24, 2018 https://spjsblog.com/forums/topic/list-view-only-show-parent-rows-with-vlookup-data/
Unfortunately the vLookupIsLoadedCallback doesn’t work for list views.

I tried adding the custom javascript to a CEWP above the List, below the list, in the middle of vLookup_ListView.html but it still won’t load.
No errors in the console, tried both in Chrome and IE.

Datatables provides column filtering and sorting on tables, so when a vLookup table becomes way huge, this would be a benefit to the UX.
Image attached showing it working on the form.

Any ideas on what I can do to get this working in the List-View?

• This topic was modified 4 years, 8 months ago by Brett.

Attachments:

1. 

   thumbnail_vLookupDatatablesCapture.png
   

[Alexander Bautz]

As you already know there is not callback when the vLookup table is loaded in a list view. Basically your only option would be to run your script on an interval to scan for vLookup tables not already styled with this plugin.

Performance might be an issue if your list view has a lot of items, but you have to try it out.

Alexander

[Brett]

Thanks Alexander,
I started with the code form the AdamP’s post above.
At first it worked using setInterval, noerrors.

setInterval(function(){ 
$('.vLookupTable').DataTable(); 
	}, 3000);

But for some reason when I added more parameters to the Datatables function (eg: responsive etc), Datatables displays an error loading vLookup_innerTable_vLookup_4__Name.
So I used SetTimeout instead and it works, no errors.
This is the code placed in a cewp under vLookup_ListView.html.

setTimeout(function(){
 $('.vLookupTable').DataTable({
	paging: false, 
	ordering: true, 
	responsive: true, 
	autoWidth: true 
		});
		},4000);

Very happy with the end result.

[Alexander Bautz]

I’m glad you found a workaround, but for this to work with grouped views and paging you must use an interval.

The reason it fails is most likely because it tries to apply the datatable to the same vLookup multiple times. You must change the snippet something like this:

setInterval(function(){ 
  jQuery('.vLookupTable').not(".the_class_added_by_datatable").DataTable(); 
}, 3000);

You must use the developer tools to inspect the .vLookupTable element to find a class that the datatable has been applied and replace “the_class_added_by_datatable” with it to not process the same table again.

Alexander

[Author]

Posts