[aoverton07Participant]

$(document).ready(function () {
		
		$("#treeTest").jqxTree({ theme: 'classic' });
		
		$("#clickSection .clickItem").on('click', function(){
			alert('clicked');
		});
	  
	  	$("#addItem").on('click', function(){
			
			var selectedItem = $("#treeTest").jqxTree('getSelectedItem');
			$("#treeTest").jqxTree('addAfter', { label: 'Nine' }, selectedItem.element);
			
		});
	});

<div id="treeTest">
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li id="clickSection">Four
            <ul id="addSection">
                <li class="clickItem">Six</li>
                <li class="clickItem">Seven</li>
                <li class="clickItem">Eight</li>
            </ul>
        </li>
    </ul>
</div>
<input type="button" id="addItem" value="ADD" />

Select Item “Eight” then click the add button, notice the handler is gone

[aoverton07Participant]

I use the destroy method daily, with no errors. It is most likely due to the fact that you are calling it inside the ready callback.

[aoverton07Participant]

I have verified that destroying widgets and removing their bindings DOES NOT WORK when tyring to do so inside the ‘removed’ callback….Is there anyway to do this outside of creating your own custom close tab button?

[aoverton07Participant]

I am also curious about this functionality…..

snethert,

currently I do my destroying in the the function handler of the ‘removed’ event handler. I keep a consistent naming convention on the widgets inside the tab, then tack on an instanceCount to the end of the ID’s I save the instanceCount in the tab title, then retrieve it for the destroying in the event args passed by the removed event.

So are you saying that this way of destroying the widgets inside the tab does not work?

[aoverton07Participant]

Peter,

Yes, I acknowledged that in my previous post. I still think that the scrollbars should be present on page load, without having to resize the splitter and the scrollbars should also have a higher z-index than any content on the page, this seems to be a web standard. I have already implemented a work around for both by calling the ‘collapse’ and ‘expand’ methods consecutively after initializing the splitter (this gets the scrollbars to appear) and I manually set the z-index of the panels vertical scrollbar which can be found by “panelID” + “verticalScrollBar” to 9999. So all in all I’ve got it working the way it should, just wanted to bring it to your attention. thanks for the quick responses!

[aoverton07Participant]

That is not a sufficient solution. If you set the grid height and width to 100% the grid just gets shrunk to the size of the panel, squeezing all the columns together (you could set the width of the columns to a specific pixel length but that does not account for the height of the grid, and is assuming that the grid is filling the whole div inside the panel), which is not aesthetically pleasing at all, and these are “User Interface Widgets”. The Grid Header should not get drawn above the scroll bar, the scroll bar should always be on top of any content.

And shouldnt the scrollbars for the panel appear on page load, instead of only appearing after you manually resize the splitter? This only happens when the panel is contained inside a splitter.

[aoverton07Participant]

I believe most of this is possible. I can tell you that it is possible to save and load the grid state to an external datasource. In my app i save the state of the grid to a mysql db when the user logs off, then reload it when they sign back in. When you save the state of the grid you can see that most of the items you mentioned are indeed saved (i.e. if you parse the JSON object returned by the save state method you can see that things like hidden, applied filters, order, size…..and on and on ARE ALL SAVED). These questions are easily answered by looking at the JSON object returned by the save state, so make your grid however you want to, then take a look a the state object and verify that all the attributes you want are present.

[aoverton07Participant]

I have resolved this issue, it turns out that you cannot edit the time value with number keys unless you include the /jqwidgets/jqwidgets/globalization/globalize.js script. You would think this script would be included in the jqx-all.js but apparently it’s not.

[aoverton07Participant]

Peter,

After inspecting the html on my page I’ve noticed that my grid creates 43 rows, despite the fact that I only have 5 rows of data. There are no gridlines for the extra rows so it looks like they are not there. Are these extra rows created because the height of my grid is taller than the 5 rows of data?

[aoverton07Participant]

Thank you Peter, this fixed my problem. It’s just strange how it works on grid init, but not on redefining datafields and columns.

[aoverton07Participant]

Are you loading your data via ajax? in w/e browser you’re using take a look at the developer tools, specifically “Network”. If you have a bunch of ajax calls you will see that your ajax call for your grid is probably at the end of the queue. So your grid really only takes 1-2 seconds to load, but has to wait 7-8 seconds until after everything before it has loaded. You can count on getting only 2-4 simultaneous ajax calls.

[aoverton07Participant]

When upgrading from 2.9.2 to 2.9.3 Ive noticed that for my grids if i have virtualmode set to true then the grid will display a blank row for my first record, the rest of the grid is fine. If i remove virtualmode or set it to false then everything works. Anyone else notice this bug?

[aoverton07Participant]

Peter,

Thanks, cellendedit solved my problem!

[aoverton07Participant]

Stailer,

I have been experiencing similar problems. After much debugging I think I have found what was causing it, for me at least. There are a few possibilities:

1.) Somewhere you mistakenly set “isModal: false” and then proceeded to define “modalOpacity”. These two properties should not co-exist. “modalOpacity” should only be set for windows where “isModal: true”. Simple typo.

2.) invoked two windows that are MODAL at the same time. This could cause unexpected behavior.

3.) invoked a modal window (and opened) before all window bindings are complete….if you have a window that is modal, it might be a good idea to make sure that you don’t call/open that window until all of your bindings are completed. For example, in your code above:

<div id=”windowId”>
     <div></div>
     <div></div>
</div>
<div id=”mId” ></div>
$(“windowId”).jqxWindow({ isModal: true, <strong>autoOpen: false</strong> }); 

Make sure to set autoOpen to false so it doesnt open before the rest of the code is executed.

[aoverton07Participant]

That all makes sense however it seems to be throwing these exceptions in the wrong places or due to some other reason…..below is part of my code:

$("#addListCancel").jqxButton({ theme: theme, height: 25, width: 60 });
			$("#editCancel").jqxButton({ theme: theme, height: 25, width: 60 });
			$("#deleteCancel").jqxButton({ theme: theme, height: 25, width: 60 });
			
		alert('before problem area');
		
			$("#addListPopup").jqxWindow({ width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#addListCancel"), modalOpacity: 0.01});
			alert('1');
			$("#editListPopup").jqxWindow({ width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#editCancel"), modalOpacity: 0.01});
			alert('2');
			$("#deleteListPopup").jqxWindow({ width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#deleteCancel"), modalOpacity: 0.01});
			
		alert('after problem area');

I three errors here, one after each window declaration. The windows html already exists and has no syntax errors.

The error message that pops up after each of these windows references a totally different selector too, I dont know where its getting the ID from….

[Author]

Posts