jcwren's Replies

Forum Replies Created

Viewing 15 posts - 1 through 15 (of 32 total)

1 2 3 →

Author

Posts

December 2, 2015 at 4:42 pm in reply to: Left/right arrow keys reversed when rtl is true Left/right arrow keys reversed when rtl is true #78812

jcwren

Participant

I could accept that if all the widgets rtl behavior was the same. Why should the arrow keys behave differently for jqxNumberInput vs jqxInput?

And why in the world would anyone WANT the cursor to move in the opposite direction of the arrow keys, anyway?

November 10, 2015 at 8:17 pm in reply to: Detect click on already selected item? Detect click on already selected item? #77979

jcwren

Participant

Thanks, that’s exactly what I needed.

October 26, 2015 at 1:47 pm in reply to: Set width of tab header? Set width of tab header? #77335

jcwren

Participant

That does the trick nicely, thank you 🙂

–jcwren

October 23, 2015 at 2:23 pm in reply to: Disabling/enabling jqxDragDrop Disabling/enabling jqxDragDrop #77265

jcwren

Participant

The sample code above was intended to demonstrate the error message that occurs when re-rendering the grid from inside the context menu close event.

In my actual code it’s necessary to re-render the grid to get drag-n’drop to work after programmatically disabling it, per post #1. The suggestions you provided in your two replies resolved the issue of disabling drag’n-drop while the context menu is open.

The error that appears now is a results of some change between 3.8.2 and 3.9.0. The setTimeout call to delay re-rendering the grid does not feel like a proper solution. I was hoping you might have an idea of a better way to either re-enable the drag’n-drop functionality or re-render the grid.

October 22, 2015 at 6:21 pm in reply to: Disabling/enabling jqxDragDrop Disabling/enabling jqxDragDrop #77235

jcwren

Participant

Dimitar,

With jqWidgets 3.9.0, there appears to be an issue that’s cropped up with re-rendering the grid inside the ‘closed’ event for jqxMenu. In the code below, when the $("#grid").jqxGrid ('render'); is called, I get the following error:

Uncaught TypeError: Cannot read property 'length' of undefined

If I put a 10 millisecond setTimeout() call to delay calling the render function, it works. However, that feels like a horrible kludge. Is there some better way to handle re-rendering the grid when the context menu is closed? If I don’t re-render the grid, then the drag-drop functionality doesn’t work afterwards.


<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.grouping.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsreorder.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var source =
            {
                localdata: generatedata(10),
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' }
                ],
                datatype: "array"
            };

            var dataAdapter = new $.jqx.dataAdapter(source);
            var columns = [
                  { text: 'First Name', dataField: 'firstname', width: 100 },
                  { text: 'Last Name', dataField: 'lastname', width: 100 },
                  { text: 'Product', dataField: 'productname' }
                ];

            $("#grid").on('rowclick', function () {
                // put the focus back to the Grid. Otherwise, the focus goes to the drag feedback element.
                $("#grid").jqxGrid('focus');
            });

            var dragDropEnabled = true;

            $('#contextMenu').jqxMenu ({
              width: 100,
              height: null,
              autoOpenPopup: false,
              mode: 'popup'
            });

            $('#contextMenu').on ('closed', function () {
              $('#grid').jqxGrid ('render');
            });

            $('#grid').on ('contextmenu', function () {
              return false;
            });
            // create data grids.
            $("#grid").jqxGrid(
            {
                width: 600,
                source: dataAdapter,
                autoheight: true,
                pageable: true,
                sortable: true,
                columns: columns,
                rendered: function () {
                    if (dragDropEnabled === true) {
                        // select all grid cells.
                        var gridCells = $('#grid').find('.jqx-grid-cell');
                        if ($('#grid').jqxGrid('groups').length > 0) {
                            gridCells = $('#grid').find('.jqx-grid-group-cell');
                        }

                        // initialize the jqxDragDrop plug-in. Set its drop target to the second Grid.
                        gridCells.jqxDragDrop({
                            appendTo: 'body', dragZIndex: 99999,
                            dropAction: 'none',
                            initFeedback: function (feedback) {
                                feedback.height(70);
                                feedback.width(220);
                            }
                        });

                        // initialize the dragged object.
                        gridCells.off('dragStart');
                        gridCells.on('dragStart', function (event) {
                            var value = $(this).text();
                            var position = $.jqx.position(event.args);
                            var cell = $("#grid").jqxGrid('getcellatposition', position.left, position.top);
                            $(this).jqxDragDrop('data', $("#grid").jqxGrid('getrowdata', cell.row));
                            var groupslength = $('#grid').jqxGrid('groups').length;
                            // update feedback's display value.
                            var feedback = $(this).jqxDragDrop('feedback');
                            var feedbackContent = $(this).parent().clone();
                            var table = '<table>';
                            $.each(feedbackContent.children(), function (index) {
                                if (index < groupslength)
                                    return true;

                                table += '<tr>';
                                table += '<td>';
                                table += columns[index - groupslength].text + ': ';
                                table += '</td>';
                                table += '<td>';
                                table += $(this).text();
                                table += '</td>';
                                table += '</tr>';
                            });

                            table += '</table>';
                            feedback.html(table);
                        });
                        gridCells.off('dragEnd');
                        gridCells.on('dragEnd', function (event) {
                            var value = $(this).jqxDragDrop('data');
                            var position = $.jqx.position(event.args);
                            var pageX = position.left;
                            var pageY = position.top;
                            var $form = $("#form");

                            var targetX = $form.offset().left;
                            var targetY = $form.offset().top;
                            var width = $form.width();
                            var height = $form.height();

                            // fill the form if the user dropped the dragged item over it.
                            if (pageX >= targetX && pageX <= targetX + width) {
                                if (pageY >= targetY && pageY <= targetY + height) {
                                    $("#firstName").val(value.firstname);
                                    $("#lastName").val(value.lastname);
                                    $("#product").val(value.productname);
                                }
                            }
                        });
                    }
                }
            });

            $('#grid').on ('cellclick', function (event) {
              if (event.args.rightclick) {
                var rowindex = event.args.rowindex;
                $('#grid').jqxGrid ('render');
                $('#grid').jqxGrid ('selectrow', rowindex);
                var scrollTop = $(window).scrollTop ();
                var scrollLeft = $(window).scrollLeft ();
                $('#contextMenu').jqxMenu ('open', parseInt (event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt (event.args.originalEvent.clientY) + 5 + scrollTop);
                return false;
              }
            });

            $("#form").jqxExpander({ width: 250, toggleMode: 'none', showArrow: false });

            $('#disableDragDrop, #enableDragDrop').jqxButton();

            $('#disableDragDrop').click(function () {
                dragDropEnabled = false;
                $("#grid").jqxGrid('render');
            });

            $('#enableDragDrop').click(function () {
                dragDropEnabled = true;
                $("#grid").jqxGrid('render');
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div style="float: left;" id="grid">
        </div>
        <div style="margin-left: 20px; float: left;" id="form">
            <div>
                Form Panel
            </div>
            <div>
                <form>
                <table>
                    <tr>
                        <td>
                            First Name:
                        </td>
                        <td>
                            <input id="firstName" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Last Name:
                        </td>
                        <td>
                            <input id="lastName" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Product:
                        </td>
                        <td>
                            <input id="product" />
                        </td>
                    </tr>
                </table>
                </form>
            </div>
        </div>
    </div>
    <div style="clear: both;">
        <button id="disableDragDrop" style="margin-top: 25px;">
            Disable cell drag and drop</button>
        <button id="enableDragDrop">
            Enable cell drag and drop</button>
    </div>
    <div style="display: none;" id="contextMenu">
      <ul>
        <li id="contextEdit">Edit This</li>
        <li id="contextAdd"> Add New</li>
        <li id="contextDelete">Delete This</li>
      </ul>
    </div>
</body>
</html>

October 12, 2015 at 4:35 pm in reply to: values source field not updated on dataBind()? values source field not updated on dataBind()? #76726

jcwren

Participant

OK, I can do that.

There are other places in the various widgets where you can pass either a jqxDataAdapter or an array. If would be nice if the source field could handle that also. That way, regardless of when the agesAdapter is updated, any time the playerSource referenced the sh_age_fmt field, it would pick up the most current agesAdapter records. This would also be more consistent with the way it appears dataAdapters are intended to be used.

October 11, 2015 at 2:27 am in reply to: values source field not updated on dataBind()? values source field not updated on dataBind()? #76660

jcwren

Participant

Yes, that’s my question. Within the jqx frankwork, what is the *correct* way to handle that? Something like the following?

playerSource.datafields [_.findIndex (playerSource.datafields, {name: 'sh_age_fmt'})].values.source = agesAdapter.records;

Or do you have a more correct suggestion?

August 10, 2015 at 1:41 pm in reply to: Disabling/enabling jqxDragDrop Disabling/enabling jqxDragDrop #74677

jcwren

Participant

Excellent. It works, but for it to work correctly, I had to do it like this:

if (dragDropEnabled === true) {
  ...
} else
  $('body').css('cursor', 'default');

Doing it immediately after the $('#grid').jqxGrid ('render') call caused the cursor to change to the default, but as soon as the mouse was back over the grid, it reverted to the ‘move’ cursor. Moving it into the rendered function gets it all working correctly.

Thank you.

August 7, 2015 at 4:23 pm in reply to: Disabling/enabling jqxDragDrop Disabling/enabling jqxDragDrop #74626

jcwren

Participant

Dimitar,

Thanks. That comes *very* close, there’s still one behavior I’d like to eliminate, if possible. In the grid’s ‘cellclick’ handler, I set dragDropEnabled=false, and call the grid’s render function, then open the context menu. The context menu opens, but the cursor remains the ‘move’ cursor until the next movement of the mouse. As soon as the mouse is moved at all, the cursor reverts to the arrow.

Would you have a suggestion to get the cursor to change immediately, without requiring any mouse movement?

Thank you,
–jc

June 19, 2015 at 2:00 pm in reply to: Disabled menu item still triggers click event Disabled menu item still triggers click event #72767

jcwren

Participant

So you’re saying that your examples are flawed, and should not be using href tags for the menu actions? Because, if you’ll notice, neither your example or mine directly binds anything to either the ‘click’ or ‘itemclick’ event. The default functionality example doesn’t show binding anything to ‘itemclick’, and implies that for a menu bar, the correct pattern for linking to another page is href tags.

Are you instead implying that an ‘itemclick’ handler should be installed, and that should check if an href tag is present, and redirect if necessary? Or is there just no example showing how a real-world application might actually use jqxMenu?

It seems that based on your reply that you must have stopped reading after the first sentence.

June 16, 2015 at 2:21 pm in reply to: Calling endcelledit on sorted grid causes two exceptions Calling endcelledit on sorted grid causes two exceptions #72588

jcwren

Participant

Can you please provide an example of how one should implement this? The grid has several drop-down lists. When the cell with a drop-down list is double-clicked, it should open immediately. When the user selects the item, it should close the drop-down list.

In regards to the ‘hack’, except for the editor.jqxDropDownList (‘open’);, that method came straight out of your example Fire endcelledit on editor.jqxDropDownList select?.

In this thread, set a different editmode for a specific cell, you explicitly state, “No, it is not possible to set a different edit mode for a specific cell. However, in the “initeditor” callback function of your column, you can call editor.jqxDropDownList(‘open’); to open the DropDownLsit automatically.“

June 5, 2015 at 5:56 pm in reply to: Switching from pageable to non-pageable creates screen artifact Switching from pageable to non-pageable creates screen artifact #72104

jcwren

Participant

Dimitar,

Thanks, that did the trick.

May 27, 2015 at 2:42 am in reply to: jqxGrid with jqxObservableArray causing 'Uncaught TypeError' exception. jqxGrid with jqxObservableArray causing 'Uncaught TypeError' exception. #71597

jcwren

Participant

Could youanswer the question in regards to the ‘Uncaught TypeError’, please?

Thank you.

May 21, 2015 at 2:22 pm in reply to: div tags in a jqxWindow cause jqxTree not to render div tags in a jqxWindow cause jqxTree not to render #71413

jcwren

Participant

Ah. I don’t believe I saw that documented anywhere. While the API documentation is fairly extensive, and has links to seful jsFiddles and such, if a control has HTML requirements (like a div for the window title), that doesn’t seem to be covered.

Just because an example might show one, the example and/or documentation doesn’t indicate what’s necessary vs optional.

On this topic, I also frequently see disparities between the documentation in the Demo tab and the documentation under the ‘Documentation’ tab. Generally, it seems that the Demos documentation is more up to date.

May 20, 2015 at 2:01 pm in reply to: jqxGrid with jqxObservableArray causing 'Uncaught TypeError' exception. jqxGrid with jqxObservableArray causing 'Uncaught TypeError' exception. #71349

jcwren

Participant

1) I don’t want to change fields of other records, I want to know if it’s safe to change other fields within the *same* record, and what the preferred way of doing this might be.

2) On the ‘Uncaught TypeError’, can you confirm that you see this problem also, please?

Author

Posts

Viewing 15 posts - 1 through 15 (of 32 total)

1 2 3 →