jQWidgets Forums

jQuery UI Widgets Forums Grid Custom event is removed on scrolling

This topic contains 2 replies, has 2 voices, and was last updated by  mrwest 10 years, 10 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Custom event is removed on scrolling #58736

    mrwest
    Blocked

    Hello.

    I have a urgent concern regarding custom events thats bound to a gridcell. I have duplicated my issue on a a JSFiddle sample with some modifications. Please see jqWidgets sample at: http://jsfiddle.net/jqwidgets/74CTB/

    Then modify with following code:

     $('#jqxgrid').on('bindingcomplete', function (event) {
         $('.click-option').on('click',function() {
             alert('works until scroll!');
         });
     });

    And add this to jqxGrid columns:
    cellsrenderer : function (row, columnfield, value, defaulthtml, columnproperties) { return '<div class="click-option">'+value+'</div>' }

    This will render a <div> element with class click-option, then on bindingcomplete we bind this class with a click event. The click event works until you will scroll down the grid.

    Please advise a workaround for this asap.

    Thanks in advance,
    Jan

    Custom event is removed on scrolling #58741

    Peter Stoev
    Keymaster

    Hi Jan,

    Custom events are not supported. Supported are the events documented in the API. For handling cell clicks, use the “cellclick” event.

    Best Regards,
    Peter Stoev

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

    Custom event is removed on scrolling #58771

    mrwest
    Blocked

    Hello Peter,

    Ok, thanks for information, however; we had to enable this possiblity to have multiple icons in one cell that represents functions outside of grid. We did find a workaround that does not affect the grid what I’ve seen so far. In short, we are passing a custom HTML element containing a function which is required to be realized upon click.

    What I did was adding a click event on the parent element containing jqxGrid. This allowed me to check for a specific class and execute function.
    Ill paste the code snippet from our object if someone else might find it useful.

    Regards,
    Jan

        initOptionClick: function() {
    
            var _this = this;
            this.customDataGrid.off('click.rowclickoption');
            this.customDataGrid
                .on('click.rowclickoption', function (clickevent) {
                    // get target 
                    var $target = $(clickevent.target);
                    // check if target has click function, if not, check parent and set as target if it exists.
                    if (!$target.hasClass('webster-jqx-grid-row-click-option')) {
                        if (!$target.parent().hasClass('webster-jqx-grid-row-click-option')) return;
                        else $target = $target.parent();
                    };
    
                    // get json data from target if it exists
                    var objJson = $target.attr('data-json') || {};
                    // parse if objJson is string 
                    if (typeof (objJson) === 'string') objJson = JSONfn.parse(objJson);
                    // execute the "onClick" property function 
                    if (typeof objJson.onClick === 'function') {
                        objJson.onClick({ clickevent: clickevent, customDataGrid: _this, objectData: objJson, selectedRecords: _this.selectedRecords() });
                    }
                });
        },
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.