jQWidgets Forums

This topic contains 6 replies, has 2 voices, and was last updated by rajuk 12 years, 6 months ago.

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

Author

select Tree item by data-* attribute Posts

January 11, 2013 at 7:28 am select Tree item by data-* attribute #13487

rajuk

Member

I would like to select a tree node by its data-* attrbute. but its not working , I am not able to find whats wrong in scenario. let us check the code

var elementByCid = $("#nodes").find("span[data-cid="+ model.cid+"]")[0];
$("#nodes").jqxTree('selectItem', elementByCid);

simple use case get element by data attribute then select it.

I am getting element but it is not selecting.

January 11, 2013 at 8:14 am select Tree item by data-* attribute #13492

Dimitar

Participant

Hello rajuk,

The parameter of the selectItem method must be a li element, and not a span element as is the case in the code which you provided.

Best Regards,
Dimitar

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

January 11, 2013 at 8:17 am select Tree item by data-* attribute #13493

rajuk

Member

then how can i select the element.

January 11, 2013 at 8:22 am select Tree item by data-* attribute #13494

Dimitar

Participant

Hi rajuk,

Could you, please, provide us with your jqxTree code so that we may better be able to assist you?

Best Regards,
Dimitar

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

January 11, 2013 at 8:33 am select Tree item by data-* attribute #13496

rajuk

Member

tree has only home element and all elements adding dynamically with the html

<span data-cid="some unique id"> name</span>

January 11, 2013 at 9:07 am select Tree item by data-* attribute #13501

Dimitar

Participant

Hi rajuk,

Here is an example with a button which selects a tree item:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Tree, Tree Widget, TreeView" />
    <meta name="description" content="The jqxTree can easily display images next to each item. In order to achieve that, you need to add 'img' element inside a 'li' element." />
    <title id='Description'>The jqxTree in this demo displays images next to the tree items.
    </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.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            // Create jqxTree
            $('#jqxTree').jqxTree({ theme: theme });
            // Create jqxExpander
            $('#jqxExpander').jqxExpander({ showArrow: false, toggleMode: 'none', width: '300px', height: 'auto', theme: theme });
            $("#selectElement").click(function () {
                var elementByCid = $("#jqxTree").find("span[data-cid='001']").parent()[0].parentElement;
                $("#jqxTree").jqxTree('selectItem', elementByCid);
            });
        });
    </script>
</head>
<body class='default'>
    <button id="selectElement">
        Select Calendar item</button>
    <div id='jqxWidget'>
        <div id='jqxExpander'>
            <div>
                Folders</div>
            <div id='jqxTree'>
                <ul>
                    <li item-expanded='true'>
                        <img style='float: left; margin-right: 5px;' src='../../images/mailIcon.png' /><span
                            item-title="true">Mail</span>
                        <ul>
                            <li item-expanded='true'>
                                <img style='float: left; margin-right: 5px;' src='../../images/calendarIcon.png' /><span
                                    item-title="true" data-cid="001">Calendar</span> </li>
                            <li>
                                <img style='float: left; margin-right: 5px;' src='../../images/contactsIcon.png' /><span
                                    item-title="true">Contacts</span> </li>
                            <li>
                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                    item-title="true"> <span>Inbox</span><span style='color: Blue;'> (3)</span></span>
                                <ul>
                                    <li>
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                            item-title="true">jQWidgets</span>
                                        <ul>
                                            <li>
                                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                                    item-title="true">Admin</span> </li>
                                            <li>
                                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                                    item-title="true">Corporate</span> </li>
                                            <li>
                                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                                    item-title="true">Finance</span> </li>
                                            <li>
                                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                                    item-title="true">Other</span> </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                            item-title="true">Personal</span> </li>
                                </ul>
                            </li>
                            <li item-expanded='true'>
                                <img style='float: left; margin-right: 5px;' src='../../images/recycle.png' /><span
                                    item-title="true"> <span>Deleted Items</span><span style='color: Blue;'> (10)</span></span>
                                <ul>
                                    <li>
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                            item-title="true">Today</span> </li>
                                    <li>
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                            item-title="true">Last Week</span> </li>
                                    <li>
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                            item-title="true">Last Month</span> </li>
                                </ul>
                                <li>
                                    <img style='float: left; margin-right: 5px;' src='../../images/notesIcon.png' /><span
                                        item-title="true">Notes</span> </li>
                                <li>
                                    <img style='float: left; margin-right: 5px;' src='../../images/settings.png' /><span
                                        item-title="true">Settings</span> </li>
                                <li>
                                    <img style='float: left; margin-right: 5px;' src='../../images/favorites.png' /><span
                                        item-title="true">Favorites</span> </li>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

January 11, 2013 at 9:29 am select Tree item by data-* attribute #13504

rajuk

Member

Thank you it is working

Author

Posts

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

You must be logged in to reply to this topic.