jQWidgets Forums

Forum Replies Created

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts

February 22, 2013 at 12:20 pm in reply to: Frames, IE8 and IE9 Frames, IE8 and IE9 #15693

Member

BINGO!!

Sorted!! Many many thanks Peter. This is such a great bit (if that’s the right word) of code but I was tearing my hair out trying to sort it out!

Thanks again.
Martin

February 22, 2013 at 12:16 pm in reply to: Frames, IE8 and IE9 Frames, IE8 and IE9 #15692

MartinWalke

Member

Ah. A sneaky update Give me a minute or so.

February 22, 2013 at 12:07 pm in reply to: Frames, IE8 and IE9 Frames, IE8 and IE9 #15688

MartinWalke

Member

Whoops sorry Peter.
Versions as follows:

jQuery – 1.9
jqxWidgets 2.6.1

February 22, 2013 at 11:59 am in reply to: Frames, IE8 and IE9 Frames, IE8 and IE9 #15686

MartinWalke

Member

Peter,

The code is in 3 sections:

1. Frame set page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Complex Data Visualisation</title>
</head>
<frameset cols="200" frameborder="0" border="0" framespacing="0">
	<frame name="tree" src="jqxtest.htm" marginheight="0" marginwidth="0" scrolling="auto">
<noframes>
<p>We're sorry but this web page requires that the ability to display frames is turned on in your browser and so is unable to display.</p>
</noframes>
</frameset>
</html>

2. Actual jqxTree code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>Tree</title>
  <meta name="generator" content="TSW WebCoder">
  <script type="text/javascript" src="jquery.js"></script>
  <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="jqwidgets/styles/jqx.ui-sunny.css" type="text/css" />
  <script type="text/javascript" src="scripts/gettheme.js"></script>
  <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
  <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
  <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
  <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
  <script type="text/javascript" src="jqwidgets/jqxpanel.js"></script>
  <script type="text/javascript" src="jqwidgets/jqxtree.js"></script>
<style>
body {
      font-family:arial;
      font-size:0.8em;
     }
</style>
</head>
<body>
  <script type="text/javascript">
  var loadedXml;
  var jsonData = new Array();
  var detailFrame;
  var filterFrame;
  $(document).ready(function () {
    var theme = 'ui-sunny';
    $.get('vt.xml',
          function(xml){
            loadedXml = xml;
            for (i=0;i<xml.getElementsByTagName("node").length;i++) {
              var node = xml.getElementsByTagName("node")[i];
              var xmlNode = new Object();
              xmlNode["id"] = node.getAttribute("id");
              xmlNode["text"] = node.getAttribute("name");
              xmlNode["parentid"] = node.getAttribute("parentid");
              jsonData.push(xmlNode);
            }
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'id' },
                    { name: 'parentid' },
                    { name: 'text' }
                ],
                id: 'id',
                localdata: jsonData
            };
            // create data adapter.
            var dataAdapter = new $.jqx.dataAdapter(source);
            // perform Data Binding.
            dataAdapter.dataBind();
            // get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents
            // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter
            // specifies the mapping between the 'text' and 'label' fields.
            var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
            var thisFrame = top.frames["tree"];
            $('#jqxWidget').jqxTree({
               source: records,
               width: $(thisFrame).width(),
               theme: theme,
               toggleMode: 'none' });
            $('#jqxWidget').css("border", 0);
          },
          'xml');
  });
  </script>
  <div id='jqxWidget'>
  </div>
</body>
</html>
</body>
</html>

3. Input xml file – vt.xml

<?xml version="1.0" encoding="UTF-8"?>
<cat>
	<node name="Capabilities" id="capability_top" parentid="-1" type="capability"/>
	<node name="ATC Service Delivery Management" id="F16E7535_52ED_423e_A1ED_D63C90FCFA29" parentid="capability_top" type="capability"/>
	<node name="ATC Staff Management" id="E49484B5_F80A_44c4_BFDD_0FC01CEC5439" parentid="capability_top" type="capability"/>
	<node name="ATM Service Status" id="4DE48D86_AA03_4036_AE2A_1A254F97FA4D" parentid="capability_top" type="capability"/>
	<node name="Actual" id="7B3A11E3_FE2A_4b39_80B3_3F3E3FC3071B" parentid="capability_top" type="capability"/>
</cat>

I’ll be intrigued to what the problem is. It could easily be of my own making The parentLocation error occurs in the jqxscrollbar file.

Thanks
Martin

February 22, 2013 at 11:45 am in reply to: Frames, IE8 and IE9 Frames, IE8 and IE9 #15684

MartinWalke

Member

Hi Peter,

Thanks for the quick reply. I’ll send it asap

Martin

February 19, 2013 at 3:12 pm in reply to: Double click tree node Double click tree node #15479

MartinWalke

Member

Thanks bartsimp. Although Dimitar implied that it wasn’t possible, I’ve done something similar.

            $("#jqxWidget").bind('dblclick click', function(event) {
              var element = $(this);
              var evtType = event.type;
              switch(evtType) {
                case 'click':
                  singleClick (event);
                  break;
                case 'dblclick':
                  doubleClick (event);
                  break;
                default:
                  break;
              }
            });

All sorted now – until the next problem

February 12, 2013 at 9:48 am in reply to: Double click tree node Double click tree node #15044

MartinWalke

Member

Brilliant!!! Many thanks Dimitar for your patience and help!

I misunderstood the distinction between jqxWidget div and the jqxTree. Now, looking at it again, it makes perfect sense (of course). Although the only one that was not so clear, is the line

$("#jqxTree .jqx-tree-item").click(function (event) {

but I thought, because the .jqx-tree-item class is included in the jqxWidget, it would be reachable but having now looked at the created tree at run time, I can see why it’s not. jqxTree doesn’t actually exist and is only used as a function definition/prototype.

February 11, 2013 at 4:11 pm in reply to: Double click tree node Double click tree node #15021

MartinWalke

Member

Ok – I understand all that.. however…
Below is a cut-down version of my code which doesn’t do what I was expecting. It’s probably something really simple but I can’t see it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>Tree</title>
  <meta name="generator" content="TSW WebCoder">
  <script type="text/javascript" src="jquery.js"></script>
  <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="jqwidgets/styles/jqx.ui-sunny.css" type="text/css" />
  <script type="text/javascript" src="scripts/gettheme.js"></script>
  <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
  <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
  <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
  <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
  <script type="text/javascript" src="jqwidgets/jqxpanel.js"></script>
  <script type="text/javascript" src="jqwidgets/jqxtree.js"></script>
</head>
<body>
  <script type="text/javascript">
  
  $(document).ready(function () {
    var theme = 'ui-sunny';
    var data = new Array();
    
    var xmlNode;
    
    xmlNode = new Object();
    xmlNode["id"] = "1";
    xmlNode["text"] = "Top Node";
    xmlNode["parentid"] = "-1";
    data.push(xmlNode);
    xmlNode = new Object();
    xmlNode["id"] = "2";
    xmlNode["text"] = "Level 1 Node";
    xmlNode["parentid"] = "1";
    data.push(xmlNode);
    xmlNode = new Object();
    xmlNode["id"] = "3";
    xmlNode["text"] = "Level 1 Node";
    xmlNode["parentid"] = "1";
    data.push(xmlNode);
    xmlNode = new Object();
    xmlNode["id"] = "4";
    xmlNode["text"] = "Level2 Node";
    xmlNode["parentid"] = "2";
    data.push(xmlNode);
    // prepare the data
    var source =
    {
        datatype: "json",
        datafields: [
            { name: 'id' },
            { name: 'parentid' },
            { name: 'text' }
        ],
        id: 'id',
        localdata: data
    };
    // create data adapter.
    var dataAdapter = new $.jqx.dataAdapter(source);
    // perform Data Binding.
    dataAdapter.dataBind();
    // get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents
    // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter
    // specifies the mapping between the 'text' and 'label' fields.
    var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
    $('#jqxWidget').jqxTree({
       source: records,
       width: 200,
       theme: theme,
       toggleMode: 'none' });
    function singleClick(event) {
      var _item = event.target;
      if (_item.tagName != "LI") {
        _item = $(_item).parents("li:first");
      };
      var item = $('#jqxTree').jqxTree('getItem', _item[0]);
      if (item.isExpanded == true) {
        $('#jqxTree').jqxTree('collapseItem', _item[0]);
      } else {
        $('#jqxTree').jqxTree('expandItem', _item[0]);
      };
    };
    function doubleClick(event) {
      var text = event.target.textContent;
      var text2 = text.replace(/\s+/g, ' ');
      alert(text2);
    };
    $("#jqxTree .jqx-tree-item").click(function (event) {
      var that = this;
      setTimeout(function () {
        var dblclick = parseInt($(that).data('double'), 10);
        if (dblclick > 0) {
          $(that).data('double', dblclick - 1);
        } else {
          singleClick.call(that, event);
        }
      }, 300);
    }).dblclick(function (event) {
      $(this).data('double', 2);
      doubleClick.call(this, event);
    });
  });
  </script>
  <div id='jqxWidget'>
  </div>
</body>
</html>

BTW, could I use .bind (“click dblclick”, function()) instead of your construct? Or are they the same?

Thanks for your help in sorting me out Dimitar

Martin

February 11, 2013 at 10:03 am in reply to: Double click tree node Double click tree node #14977

MartinWalke

Member

Thanks Dimitar.

I’ll have a look and see if I can use this. I’m not sure what the expander class does, so I’ll need to read up about it. My tree expands without it, so I assumed I didn’t need it. Does it add some ‘hidden’ functionality that’s not clear, or simply not available, in the tree class?

My code doesn’t use any HTML tags, just creates the tree from from some JSON definitions and uses the dataAdapter.

Kind regards
Martin

Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)