Tree in a jqxwindow

[jon74Participant]

Hi all,
I am facing a strange behaviour with my tree built in an external jqxwindow.
At the first access, when the popup opens for the first time, the tree is correctly built.
If I close the window and the re-open it, the tree is a mess: all unformatted and seems that the second time it is not rendering the tree correctly, because attributes “class” and “role” are not attached to the object:

http://tinypic.com/r/dmqk9t/5

http://tinypic.com/r/2wmlwy8/5

Thanks in advance
Jon

[DimitarParticipant]

Hello Jon,

Please provide us with a code that demonstrates the reported behaviour.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[jon74Participant]

Hi Dimitar,
here it is (it’s a bit tricky maybe)

HTML definitions:

  Carica Report

Lista Report

<input type="button" id="load" value="” style=”margin-right: 10px” />
<input type="button" id="cancel" value="” />

Javascript side:

Window:
$(‘#loadReportWindow’).jqxWindow({ maxHeight: 600, maxWidth: 800, minHeight: 230, minWidth: 350, height: 480, width: 640,
theme: theme5, resizable: true, isModal: true, modalOpacity: 0.3, autoOpen:false,
okButton: $(‘#load’), cancelButton: $(‘#cancel’),
initContent: function () {
//load buttons and related actions bla bla..
}
});

//Tree created on window open:
$(‘#loadReportWindow’).on(‘open’, function (event) {
$(“#loadReportSplitter”).jqxSplitter({ //Yeah, there’s a splitter and a panel too
theme: theme5,
width: ‘100%’,
height: ‘90%’,
panels: [{ size: ‘50%’, collapsible: false},
{ size: ‘50%’, collapsible: false}]
});
var source = null;
$.ajax({
async: false,
url: “loadSavedReportList”,
success: function (data, status, xhr) {
source =
{
datatype: “json”,
datafields: [
{ name: ‘idReport’ },
{ name: ‘reportTitle’ },
{ name: ‘dataSalvataggio’ },
{ name: ‘active’ },
{ name: ‘reportType’ }
],
id: ‘idReport’,
localdata: data
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function (records) {
var records = dataAdapter.records;
var length = records.length;
var html = “”;
for (var i = 0; i < length; i++) {
var record = records[i];
html += "”;
html += “”;
html += “” + record.reportTitle +” – “+ convertDate(record.dataSalvataggio) +
“ “;
}
$(“#reportList”).html(html);
},
loadError: function (jqXHR, status, error) {
alert(error);
},
beforeLoadComplete: function (records) {
}
});
// perform Data Binding.
dataAdapter.dataBind();
$(‘#loadReportTree’).jqxTree({ theme: theme, width: ‘100%’, height: ‘100%’ });
}
});
});

[DimitarParticipant]

Hi Jon,

Please format your code as explained in the forum topic Code Formatting and re-post it.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[jon74Participant]

Sorry last post was a mess due to html tags

//HTML:
<div>
	<div>
		&nbsp;&nbsp;Carica Report
	</div>
	<div>
		<div>
			<div>
				<div style="border: none">
					
						
							<span>Lista Report</span>
							
						
					
				</div>
			</div>
			<div>
			</div>
		</div>
		<div>
			<div style="float: right;margin: 5px 20px">
				&lt;input type=&quot;button&quot; id=&quot;load&quot; value=&quot;" style="margin-right: 10px" /&gt;
				&lt;input type=&quot;button&quot; id=&quot;cancel&quot; value=&quot;" /&gt;
			</div>
		</div>
	</div>
</div>
//Javascript
//Window:
$('#loadReportWindow').jqxWindow({ maxHeight: 600, maxWidth: 800, minHeight: 230, minWidth: 350, height: 480, width: 640,
    theme: theme5, resizable: true, isModal: true, modalOpacity: 0.3, autoOpen:false,
    okButton: $('#load'), cancelButton: $('#cancel'),
    initContent: function () {
		//load buttons and related actions bla bla..
	}
});
//Tree created on window open:
$('#loadReportWindow').on('open', function (event) {
	$("#loadReportSplitter").jqxSplitter({ 
			theme: theme5, 
			width: '100%', 
			height: '90%', 
			panels: [{ size: '50%', collapsible: false},
			         { size: '50%', collapsible: false}] 
	});
    var source = null;
    $.ajax({
        async: false,
        url: "loadSavedReportList",
        success: function (data, status, xhr) {
            source =
            {
                datatype: "json",
                datafields: [
                    { name: 'idReport' },
                    { name: 'reportTitle' },
                    { name: 'dataSalvataggio' },
                    { name: 'active' },
                    { name: 'reportType' }
                ],
                id: 'idReport',
                localdata: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function (records) {
                    var records = dataAdapter.records;
                    var length = records.length;
                    var html = "";
                    for (var i = 0; i &lt; length; i++) {
                        var record = records[i];
                        html += &quot;";
                        html += "";
                        html += "<span>" + record.reportTitle +" - "+ convertDate(record.dataSalvataggio) +
                        		"</span> ";
                    }
                    $("#reportList").html(html);
                },
                loadError: function (jqXHR, status, error) {
                	alert(error);
                },
                beforeLoadComplete: function (records) {
                }
            });
            // perform Data Binding.
            dataAdapter.dataBind();
            $('#loadReportTree').jqxTree({ theme: theme, width: '100%', height: '100%' });
        }
    });
}); 

[jon74Participant]

sorry again…

//HTML:
<div id="loadReportWindow">
	<div>
		<img src="img/ico/open/grey/upload.png" alt="" style="vertical-align:middle"/>&nbsp;&nbsp;Carica Report
	</div>
	<div>
		<div id="loadReportSplitter">
			<div>
				<div style="border: none;" id='loadReportTree'>
					<ul>
						<li id="ReportList" item-expanded='true'>
							<img style='float: left; margin-right: 5px;' src='images/contactsIcon.png' /><span
								item-title="true">Lista Report</span>
							<ul id="reportList"></ul>
						</li>
					</ul>
				</div>
			</div>
			<div id="loadReportContentPanel">
			</div>
		</div>
		<div>
			<div style="float: right; margin: 5px 20px;">
				<input type="button" id="load" value="<s:text name='load' />" style="margin-right: 10px" />
				<input type="button" id="cancel" value="<s:text name='cancel' />" />
			</div>
		</div>
	</div>
</div>
//Javascript
//Window:
$('#loadReportWindow').jqxWindow({ maxHeight: 600, maxWidth: 800, minHeight: 230, minWidth: 350, height: 480, width: 640,
    theme: theme5, resizable: true, isModal: true, modalOpacity: 0.3, autoOpen:false,
    okButton: $('#load'), cancelButton: $('#cancel'),
    initContent: function () {
		//load buttons and related actions bla bla..
	}
});
//Tree created on window open:
$('#loadReportWindow').on('open', function (event) {
	$("#loadReportSplitter").jqxSplitter({ 
			theme: theme5, 
			width: '100%', 
			height: '90%', 
			panels: [{ size: '50%', collapsible: false},
			         { size: '50%', collapsible: false}] 
	});
    var source = null;
    $.ajax({
        async: false,
        url: "loadSavedReportList",
        success: function (data, status, xhr) {
            source =
            {
                datatype: "json",
                datafields: [
                    { name: 'idReport' },
                    { name: 'reportTitle' },
                    { name: 'dataSalvataggio' },
                    { name: 'active' },
                    { name: 'reportType' }
                ],
                id: 'idReport',
                localdata: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function (records) {
                    var records = dataAdapter.records;
                    var length = records.length;
                    var html = "";
                    for (var i = 0; i < length; i++) {
                        var record = records[i];
                        html += "<li id='"+record.idReport+"'>";
                        html += "<img style='float: left; margin-right: 5px;' src='images/folder.png' />";
                        html += "<span item-title='true'>" + record.reportTitle +" - "+ convertDate(record.dataSalvataggio) +
                        		"</span> </li>";
                    }
                    $("#reportList").html(html);
                },
                loadError: function (jqXHR, status, error) {
                	alert(error);
                },
                beforeLoadComplete: function (records) {
                }
            });
            // perform Data Binding.
            dataAdapter.dataBind();
            $('#loadReportTree').jqxTree({ theme: theme, width: '100%', height: '100%' });
        }
    });
}); 

[DimitarParticipant]

Hi Jon,

The issue may come from initializing the widgets each time the window is opened. A possible solution is to initialize them only once and update them where necessary on the open event. Please also make sure you have the latest version of jQWidgets (3.0.2).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[jon74Participant]

Hi Dimitar,

thanks for the hint, but I’ve already tried to initialize the tree widget outside, but in that case it happens immediately the wrong behaviour…

I guess it might be due to the sequence of instructions, I mean, to build the tree I need a data source to be set, which is dynamically built by an ajax call (as you could see). After I have created the dataAdapter I have to bind it to produce the html structure to be given to the Tree widget …

I didn’t try to update to latest version (mine was 2.9.2). I’ll give it a go and let you know.

If you have some more hints on how I should do the callings outside the window open event, I’ll appreciate.

Thanks

Jon

[jon74Participant]

Done it.

I succeeded by moving the initialization parts into the initContent section of jqxwindow, so it initialize all only when the window is created and then it’s just a matter of open and close of the window.

Thanks again

[Author]

Posts