jQWidgets Forums

Forum Replies Created

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

Author

Posts

June 18, 2013 at 5:24 am in reply to: 'click' event issue while using jqxTree with drag&drop 'click' event issue while using jqxTree with drag&drop #23290

roach

Member

Hi Peter,

Just checking to see if you have had any time to try the below issue on an iPad:

FYI, related to jqxGrid, I’ve tried on your demo site http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/dragdrop.htm?web on iPad and found that drag & drop works but the previous/next buttons do not work – e.g. not responding.

Just FYI, no issues found on desktop browsers.

A quick reply would be greatly appreciated.

Roach

June 4, 2013 at 8:51 am in reply to: 'click' event issue while using jqxTree with drag&drop 'click' event issue while using jqxTree with drag&drop #22495

roach

Member

Hi Peter,

Just update and clarification below,

I’d like to talk about the click issue on iPad. I’m getting the issue where the click event for buttons is not working on my application with jqxTree and jqxGrid.

FYI, related to jqxGrid, I’ve tried on your demo site http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/dragdrop.htm?web on iPad and found the previous/next buttons do not respond. FYI, no issues on desktop browsers.

Can you try the same link above on your iPad? And let me know if you have the same issue?

This is the issue I’m trying to explain above that needs to be fixed.

Look forward to hearing back from you soon!

Roach

April 29, 2013 at 4:38 am in reply to: 'click' event issue while using jqxTree with drag&drop 'click' event issue while using jqxTree with drag&drop #20178

roach

Member

Hi Peter,

My code is nearly same as yours, as below,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Tree, Tree Widget, TreeView" />
    <meta name="description" content="The jqxTree displays a hierarchical collection of items. You
        can populate it from 'UL' or by using its 'source' property." />
    <title id='Description'>The sample demonstrates the Tree's drag and drop functionality.
    </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.3.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/jqxdragdrop.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            // Create jqxTree
            $('#treeA').jqxTree({ allowDrag: true, allowDrop: true, height: '300px', width: '220px', theme: theme,
                dragStart: function (item) {
                    if (item.label == "Community")
                        return false;
                }
            });
            $('#treeB').jqxTree({ allowDrag: true, allowDrop: true, height: '300px', width: '220px', theme: theme,
                dragEnd: function (item, dropItem, args, dropPosition, tree) {
                    if (item.label == "Forum")
                        return false;
                }
            });
            $("#treeA, #treeB").on('dragStart', function (event) {
                $("#dragStartLog").text("Drag Start: " + event.args.label);
                $("#dragEndLog").text("");
            });
            $("#treeA, #treeB").on('dragEnd', function (event) {
                $("#dragEndLog").text("Drag End");
                 if (event.args.label) {
                    var ev = event.args.originalEvent;
                    var x = ev.pageX;
                    var y = ev.pageY;
                    if (event.args.originalEvent && event.args.originalEvent.originalEvent && event.args.originalEvent.originalEvent.touches) {
                        var touch = event.args.originalEvent.originalEvent.changedTouches[0];
                        x = touch.pageX;
                        y = touch.pageY;
                    }
                    var offset = $("#textarea").offset();
                    var width = $("#textarea").width();
                    var height = $("#textarea").height();
                    var right = parseInt(offset.left) + width;
                    var bottom = parseInt(offset.top) + height;
                    if (x >= parseInt(offset.left) && x <= right) {
                        if (y >= parseInt(offset.top) && y <= bottom) {
                            $("#textarea").val(event.args.label);
                        }
                    }
                }
            });
			
			$("#test_btn").click(function(){
				alert("works");
			});
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div style='float: left;'>
            <div id='treeA' style='float: left; margin-left: 0px;'>
                <ul>
                    <li id='home' item-selected='true'>Home</li>
                    <li item-expanded='true'>Solutions
                        <ul>
                            <li>Education</li>
                        </ul>
                    </li>
                    <li>Financial services</li>
                    <li>Community</li>
                </ul>
            </div>
            <div style='float: left; margin-left: 20px;' id="treeB">
                <ul>
                    <li>Products
                    </li>
                    <li item-expanded='true'>Support
                        <ul>
                            <li>Support home</li>
                            <li>Customer Service</li>
                        </ul>
                    </li>
                    <li>Knowledge base</li>
                    <li>Forum</li>
                </ul>
            </div>
            <div style="width: 200px; height: 200px; float: left; margin-left: 20px;">
                <textarea rows="5" id="textarea"></textarea>
            </div>
        </div>
        <div style="font-size: 13px; font-family: Verdana; padding-top: 20px; clear: both;">
                <b>Events Log:</b>
                <div id="dragStartLog">
                </div>
                <div id="dragEndLog">
                </div>
                <br />
                <b>Note:</b>
                <br />
                Dragging of "Community" is disabled.
                <br />
                Dropping of "Forum" is disabled.
        </div>
    </div>
	<div><input type="button" value="test" id="test_btn"/></div>
</body>
</html>

I also tried your code above, but it still didn’t work on iPad (iOS version 6.1.2 and 6.1.3). But on my iPod(iOS version 4.2.1), samsung tablet and android phones, it worked well.

Best Regards,
Roach

April 10, 2013 at 9:52 am in reply to: Minimum jQuery version Minimum jQuery version #18986

roach

Member

Hi Peter,

Additionally, do you have any recommendation/advice, as to what is best and most ideal version of jQuery for jQWidgets v2.8.0? Say to help with stability, performance, etc?

Best Regards,
roach

Author

Posts

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