PDA

View Full Version : Qtips not working in a tree panel generated from database



Voodoo
15 Sep 2009, 1:28 AM
I've been trying and searching for a few hours and I'm getting very frustrated. My problem is this: I cannot display the node qtips in a tree panel if it is populated by querying the database. The qtips are working just fine for another tree panel on the same page.

The difference between the two trees is that the first one is populated using another page:
dataUrl: 'TreeLoader.aspx'
while the second one is populated directly in the same page:
children:[{
text:'child 1'
,qtip:'Child 1'
,leaf:true

},{
text:'child 2'
,qtip:'Child 2'
,leaf:true

}]

a) "tree.html"



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css" />
<script src="ExtJS/adapter/ext/ext-base.js" type="text/javascript"></script>
<script type="text/javascript" src="ExtJS/ext-all.js"></script>
<script src="ExtJS/ext-all-debug.js" type="text/javascript"></script>


<script type="text/javascript">
Ext.onReady(function(){

Ext.QuickTips.init();

var Tree = Ext.tree;

// create a treePanel object. Note that the region:'west' is what tells Ext which panel to display the tree in
tree = new Tree.TreePanel({
el:'div1',

// these are the config options for the tree itself
autoScroll:true,
animate:true,
enableDD:false, // Allow tree nodes to be moved (dragged and dropped)
containerScroll: true,
useArrows:true,

dataUrl: 'TreeLoader.aspx',
root: {
nodeType : 'async',
text : 'Employees',
visible : true,
id : 'source'
}
});

tree.render();

var win = new Ext.Window({
width:400
,height:300
,title:'Ext 2.0 TreeNode Tooltip Test'
,layout:'fit'
,items:{
xtype:'treepanel'
,loader: new Ext.tree.TreeLoader()
,root: new Ext.tree.AsyncTreeNode({
text:'root'
,qtip:'Root Node'
,children:[{
text:'child 1'
,qtip:'Child 1'
,leaf:true

},{
text:'child 2'
,qtip:'Child 2'
,leaf:true

}]
})
,listeners:{
click:{fn:function(node, e) {
alert(node.text + ' node clicked.');
}}
}
}
});

win.show();
});
</script>
<title>Ext 2.0 TreeNode Tooltip Test</title>
</head>
<body>
<div id = "div1"></div>
</body>
</html>

b) "TreeLoader.aspx"



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TreeLoader.aspx.cs" Inherits="TreeLoader" %>
<asp:literal id="Literal1" runat="server"></asp:literal>
c) "TreeLoader.aspx.cs"



using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class TreeLoader : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
int selectedID = 0;
if (Request.Form.Count != 0 && Request.Form[0] != "source")
Int32.TryParse(this.Request.Form[0], out selectedID);
this.Literal1.Text = GetNodes(selectedID);
}

private string GetNodes(int SupervisorID)
{
System.Text.StringBuilder returnValue = new System.Text.StringBuilder();

//String Query =
// "myQuery";

//DataSet myDataSet = new DataSet();
//string connectionString = ConfigurationManager.ConnectionStrings["myString"].ConnectionString;
//using (SqlConnection connection = new SqlConnection(connectionString))
//{
// SqlDataAdapter mySqlDataAdapter = new SqlDataAdapter(Query, connection);
// mySqlDataAdapter.Fill(myDataSet);
//}

//DataTable employees = myDataSet.Tables[0];

//string isLeaf = string.Empty;
//bool isSupervisor = false;

//for (int i = 0; i < employees.Rows.Count; i++)
//{
// DataRow dr = employees.Rows[i];
// returnValue.Append(
// "{\"id\": \"" + dr["Id"].ToString() + "\"," +
// "\"href\": \"" + dr["linkPage"].ToString() + "\"," +
// "\"hrefTarget\": \"" + "myiframe" + "\"," +
// "\"qTip\": \"" + dr["linkPage"].ToString() + "\"," +
// "\"text\": \"" + dr["title"].ToString() + "\",");

// isSupervisor = Convert.ToBoolean(dr["IsSupervisor"].ToString());

// if (isSupervisor)
// isLeaf = "false";
// else
// isLeaf = "true";

// returnValue.Append("\"leaf\": " + isLeaf + "}");
// if (i < employees.Rows.Count - 1)
// returnValue.Append(",");
// dr = null;
//}


returnValue.Append(
"{\"id\": \"" + "1" + "\"," +
"\"href\": \"" + "1.html" + "\"," +
"\"qTip\": \"" + "qTip1" + "\"," +
"\"text\": \"" + "Child1" + "\",");
returnValue.Append("\"leaf\": " + "false" + "},");

returnValue.Append(
"{\"id\": \"" + "2" + "\"," +
"\"href\": \"" + "2.html" + "\"," +
"\"qTip\": \"" + "qTip2" + "\"," +
"\"text\": \"" + "Child2" + "\",");
returnValue.Append("\"leaf\": " + "false" + "}");

return "[" + returnValue.ToString() + "]";

}

}

To be easy for you to test I have skipped the database operations and replace them with the final result. This is what "TreeLoader.aspx" will return for the first tree:

[{"id": "1","href": "1.html","qTip": "qTip1","text": "Child1","leaf": false},{"id": "2","href": "2.html","qTip": "qTip2","text": "Child2","leaf": false}]

as you can see also in the "firebug" screenshot.

How come all the attributes are recognized nicely by the tree(id, text, href, hrefTarget, leaf) but not the "qtip". I have tried many things and now I'm really tired of this. Any help will be greatly appreciated.

15 Sep 2009, 5:44 AM
the property label should be qtip, not qTip

Voodoo
15 Sep 2009, 11:13 PM
Oh my god...stupid me. Thank you.