onClick jqxTree focus move on top. - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: focus, iframe, jqxtree, Tree

This topic contains 3 replies, has 4 voices, and was last updated by Satyarao 4 years, 10 months ago.

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

Author

onClick jqxTree focus move on top. Posts

January 9, 2013 at 12:37 pm onClick jqxTree focus move on top. #13369

zohaib

Member

Hi,

I am calling jqxTree in Iframe and when I click on link then it move fucus on top instead of selected item.

Following is the example of the problem.

treeFrame.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tree Frame</title>
</head>
<body>
<table width="50%" border="0">
 <tr id="frameRow">
			<td>
				<iframe id="treeFrame" src="treeFrame2.htm" width="50%" height="100%" scrolling="yes" frameborder="0">
				</iframe>
			<td>
		 </tr>
</table>
</body>
</html>

treeFrame2.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title id='Description'>In this demo the jqxTree is built from JSON data.</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="scripts/gettheme.js"></script>
    <script type="text/javascript" src="scripts/jquery-1.7.2.min.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>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getTheme();
                var data = [
                { "id": "2",
                    "parentid": "1",
                    "text": "Hot Chocolate"
                }, {
                    "id": "3",
                    "parentid": "1",
                    "text": "Peppermint Hot Chocolate"
                }, {
                    "id": "4",
                    "parentid": "1",
                    "text": "Salted Caramel Hot Chocolate"
                }, {
                    "id": "5",
                    "parentid": "1",
                    "text": "White Hot Chocolate"
                }, {
                    "text": "Chocolate Beverage",
                    "id": "1",
                    "parentid": "-1"
                }, {
                    "id": "6",
                    "text": "Espresso Beverage",
                    "parentid": "-1"
                }, {
                    "id": "7",
                    "parentid": "6",
                    "text": "Caffe Americano"
                }, {
                    "id": "8",
                    "text": "Caffe Latte",
                    "parentid": "6"
                }, {
                    "id": "9",
                    "text": "Caffe Mocha",
                    "parentid": "6"
                }, {
                    "id": "10",
                    "text": "Cappuccino",
                    "parentid": "6"
                }, {
                    "id": "11",
                    "text": "Pumpkin Spice Latte",
                    "parentid": "6"
                }, {
                    "id": "12",
                    "text": "Frappuccino",
                    "parentid": "-1"
                }, {
                    "id": "13",
                    "text": "Caffe Vanilla Frappuccino",
                    "parentid": "12"
                }, {
                    "id": "15",
                    "text": "450 calories",
                    "parentid": "13"
                }, {
                    "id": "16",
                    "text": "16g fat",
                    "parentid": "13"
                }, {
                    "id": "17",
                    "text": "13g protein",
                    "parentid": "13"
                }, {
                    "id": "14",
                    "text": "Caffe Vanilla Frappuccino Light",
                    "parentid": "12"
                }]
                // 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: '300px', theme: theme });
				$('#jqxWidget').jqxTree('selectItem', $("#jqxWidget").jqxTree('expandAll'));
            });
			function expand_all(){
				$('#jqxWidget').jqxTree('expandAll');
			}
			function collapse_all(){
				$('#jqxWidget').jqxTree('collapseAll');
			}
        </script>
        <div id='jqxWidget'>
        </div>
    </div>
</body>
</html>

– Thanks
Zohaib.

January 10, 2013 at 8:58 am onClick jqxTree focus move on top. #13425

Dimitar

Participant

Hello Zohaib,

There seems to be an issue with the focus of the elements and therefore the iframe automatically scrolls to the top. Unfortunately, we cannot offer you any solution on the matter.

Best Regards,
Dimitar

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

January 28, 2013 at 1:53 pm onClick jqxTree focus move on top. #14265

harish kumar

Member

Hello Zohaib,

Issue is that you have set the toggle mode to “dblClick” (or) by default its set to dblclick in jqxTree, To fix the issue you need to replace the below modified code in “_updateItemEvents” event find h.toggleMode!=”click” condition and replace with modified code.

Actual Code :

if (h.toggleMode != “click”) {
h.addHandler(c, “click”, function (l) {
h.selectItem(k.element);
if (h.panel != null) {
h.panel.jqxPanel({ focused: true })
}
h.host.focus()
})
}

Modified Code :

if (h.toggleMode != “click”) {
h.addHandler(c, “click”, function (l) {
if (d.length > 0) {
clearTimeout(d.data(“timer”).hide)
} if (h.panel != null) {
h.panel.jqxPanel({ focused: true })
}
h.selectItem(k.element);
if (k.isExpanding == undefined) {
k.isExpanding = false
}
if (k.isCollapsing == undefined) {
k.isCollapsing = false
}
h.panel.jqxPanel({ autoUpdate: false });
if (d.length > 0) {
if (!k.isExpanded) {
if (false == k.isExpanding) {
k.isExpanding = true; h._expandItem(h, k)
}
}
}

h.panel.jqxPanel({ autoUpdate: true })

})
}

Best Regard,
Harish Kumar A

December 11, 2019 at 7:47 am onClick jqxTree focus move on top. #107552

Satyarao

Participant

Hi Harish Kumar,
The suggested change didn’t help. JqxTreeGrid is still jumping for the first click in my webapp.

Regards,
Satyarao.

Author

Posts

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

You must be logged in to reply to this topic.