[NormBParticipant]

Thanks for replying.

I tried that with a statement like “$(‘#gridmenuDanceGrid’).css({ ‘z-index’: 9000});” but it did not succeed, the zindex of the filter box was still 1000.

However I then set the zIndex of the jqxWindow to 950, using the jqxWindow parameter, and that has worked!

[NormBParticipant]

Hi Peter,

Thank you for your reply. I very much appreciate what you make available for no cost for people like me. I am just a home coder writing an app for my personal use at home. Unfortunately I cannot afford to buy a professional product, so I shall have to find myself an alternative approach.

Thanks again.

Norman B

[NormBParticipant]

Excellent – just the job.
Thanks

[NormBParticipant]

Hi,
Not quite sure what happens to this now. I assume it has gone into a “work to look into” queue. Do I just await an update here or do I need to be looking at some other place for any progress updates?
Thanks
Norman

[NormBParticipant]

Martin

Fiddle example now available here

After selecting “Run”, expand any tree item to populate it (does not matter which, same data added)

Now click the “Menu” tab and the “Show” button.

This will trigger a call to “OpenAutoHide” and then “SelectAndMakeVisible”.

You should then find that the item “Whiskers” has been selected but not made visible (you need to scroll down to it).

No error is reported in the console, but the alert ‘Whiskers should now be visible’ does not appear, suggesting it crashed (if you put an alert immediately before the call to “ensureVisible” it shows)

In my own environment I call a wait function to make sure that the autohide has opened before calling these functions but that does not seem to work in the fiddle – you can see the commented out lines.

Norman

[NormBParticipant]

Oops – I did not spot your reply so I shall now continue to try and recreate my problem – ignore the last update.
Norman

[NormBParticipant]

Update..
There were some obvious errors, but still cannot get filelist showing

Latest attempt

[NormBParticipant]

Martin,
I am trying to create a Fiddle – I have not created one before, though it seems fairly straightforward.

my attempt so far

I am struggling though to get my hard coded data to show in the tree. My “data” array is as it normally comes back from my first Ajax call and all I do is just put tree.jqxTree({ source: data});. I don’t really understand why it does not work directly with a hard coded array, but clearly it does not – do I need a dataAdapter? – if so please advise how to do it. I did look at the Json data example, but was unsure what represented the parentid in my case.

Once I have the file list showing, I shall need to populate the “items” in at least one file node in order to replicate my problem.

Thanks for the help so far.

Norman

[NormBParticipant]

Update..
I have modified OpenAutoHide as follows, but it does not solve the issue

function OpenAutoHide(label, item) {
	// Open the labelled auto-hide tab, check first whether already open
	var autohides = $('.jqx-layout-group-auto-hide li');
	$.each(autohides, async function() {
		if(this.innerText === label) {
			if(!$(this).hasClass('jqx-ribbon-item-selected')) { // It is not already open
				$(this).click();
				await waitFor(function() {
					return $(this).hasClass('jqx-ribbon-item-selected');
				});
				if(item) { SelectAndMakeVisible(item); }
			} else if(item){ // Already open
				SelectAndMakeVisible(item);
			}
			return false; // break the loop
		};
	});
}

function SelectAndMakeVisible(item) {
	var tree = $('#tunesTree');
	tree.jqxTree('selectItem', item);
	tree.jqxTree('ensureVisible', item); // not working
}

Norman

[NormBParticipant]

Thank you for the suggestion. As it is the recommended method I have now incorporated this but it still does not work.

In my layout (as above) I have now added initContent: TunesTreeInit after the contentContainer: 'TunelistPanel' line, where function TunesTreeInit is as follows.

var TunesTreeInit = function() {
	var tree = $('#tunesTree');
	var url= '/DancingMaster/AbcData.php?action=AbcFilelist';
	ReturnAjax(
		url,
		null,
		function(data) {
			if(data.Result === 'OK') {
				tree.jqxTree({ source: data.Filelist });
 			} else {
				jqAlert(data.Message);
			}
		}
	);
};

This populates the tree with a list of files and there is then an .on(‘expand’) call that populates the file node with a list of tunes in the file via an Ajax call (there will typically be 50-100 tunes in a file).

I perform various actions, some of which require a refresh after which I want to open the autoHide and have the selected tune name visible without having to scroll down to it. This is done as follows:

function OpenAutoHide(label, item) {
	// Open the labelled auto-hide tab, check first whether already open
	var autohides = $('.jqx-layout-group-auto-hide li');
	var tree = $('#tunesTree');
	$.each(autohides, function() {
		if(this.innerText === label) {
			if(!$(this).hasClass('jqx-ribbon-item-selected')) { // It is not already open
				$(this).click();
			}
			if(item) {
				tree.jqxTree('selectItem', item);
				tree.jqxTree('ensureVisible', item); // not working
			}
			return false; // break the loop
		};
	});
}

The item is selected but ensureVisible fails with error as follows

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'top')
    at c.<computed>.ensureVisible (jqxtree.js:8:12036)
    at Object.b.jqx.invoke (jqxcore.js:15:57011)
    at Object.b.jqx.jqxWidgetProxy (jqxcore.js:15:62073)
    at HTMLDivElement.<anonymous> (jqxcore.js:15:67978)
    at Function.each (jquery.min.js:2:3003)
    at S.fn.init.each (jquery.min.js:2:1481)
    at S.fn.init.b.fn.<computed> [as jqxTree] (jqxcore.js:15:67950)
    at HTMLLIElement.<anonymous> (Abc.js:1238:10)
    at Function.each (jquery.min.js:2:3003)
    at OpenAutoHide (Abc.js:1231:4)

Thanks

[NormBParticipant]

Sorry, forget the last bit about drag/drop – I was thinking of an app where I will need to be having grids in different parts of the layout and drag/drop rows between them, but that is to do with the grid drag/drop capability, not the layout. The question of potential advantage of using the combined one remains however as I was musing on whether to use it rather than one of the other two.

Norman

[NormBParticipant]

Update 2…

Fixed the scroll bar issue – should have been obvious that that form of CSS was applying scroll bars to more than 1 div. The following now works:

#tunesTree, #paneltunesTree, .jqx-tree-dropdown-root {
  height: calc(100% - 4px) !important;
  width: calc(100% - 4px) !important;
}

.jqx-tree-dropdown-root {
	overflow-y: scroll;
}

Sorry for any inconvenience.

I still have the “ensureVisible” problem.

Norman

[NormBParticipant]

Update…….

Regarding the scroll bar problem…

It seems that it is NOT working on EITHER OS – EXCEPT in the internal browser that Netbeans runs (my development environment) where it appears to be working fine. Firefox and Opera on the Linux box still show the unwanted scroll bar (as do Firefox, Chrome and Edge on the Windows boxes). I was led into a false sense of security by it appearing to work in Netbeans.

Norman

[NormBParticipant]

Thanks Martin,

That works well, I was getting quite frustrated with it. I had tried a couple of work arounds that were only partially successful.

However I now have two further problems.

1) Each item in my tree expands with 50-100 items below it so it was necessary for me to add scrolling. When I did that I had the same problem of extraneous scroll bars showing as I asked about before for my textareas (AbcPanel and ModifiedPanel in my layout), so I applied the same technique as you showed me before and my CSS now looks as follows:

#tunesTree, #paneltunesTree, .jqx-tree-dropdown-root {
  height: calc(100% - 4px) !important;
  width: calc(100% - 4px) !important;
  overflow-y: scroll;
}

This works absolutely fine on my Linux box but for some reason not so on my Windows boxes. No matter how large I set N in “calc(100% – Npx) the unwanted scroll bars will not disappear.

Any idea what may be different between the two OS systems that is causing this?

2) “ensureVisible” is not working in the tree.

I make calls:

 tree.jqxTree('ensureVisible', item);
  tree.jqxTree('selectItem', item);

The item gets selected (if I call select first), but “ensureVisible” returns an error:
`
uncaught (in promise) TypeError: a(…).position() is undefined
ensureVisible https://192.168.1.139/node_modules/jqwidgets-framework/jqwidgets/jqxtree.js:8
invoke https://192.168.1.139/node_modules/jqwidgets-framework/jqwidgets/jqxcore.js:15
jqxWidgetProxy https://192.168.1.139/node_modules/jqwidgets-framework/jqwidgets/jqxcore.js:15
b.jqx.jqxWidget/b.fn[h]/< https://192.168.1.139/node_modules/jqwidgets-framework/jqwidgets/jqxcore.js:15
jQuery 2
………….my function call stack
‘
Any clues?

Thanks

Norman

[NormBParticipant]

Now realised I have said “pinned” and “unpinned” the wrong way round. i.e. All works fine when “unpinned”, not when “pinned.

[Author]

Posts