CreateWidget/InitWidget Row Selection

[jeffoParticipant]

Does CreateWidget and InitWidget override the selection of a row?

I had to use these functions to implement a link and bootstrap popover in a grid column. For example, in one column of my grid I display user Names. The requirement is that the Text is the Users Name; It must be a hyperlink to the User Page, and hovering over the user Name must display a bootstrap popover of some user details.

All of this is manageable by manipulating the element in createwidget and initwidget. However now that I have done that, I can not longer select the row properly.

I can assign a click event to call SelectRow, which works fine for a single selection grid. But if I want to allow multi row selections this does not work.

This is my function, assigned via knockout, to the CreateWidget and InitWidget.

        return function (row, column, value, cellElement) {
            var $el = $(cellElement);
            var rowdata = row.bounddata || $el.closest(".jqx-grid").jqxGrid('getrowdata', row);

            var $div = $('<div />');
            var $alink = $('<a />').attr('href', 'http://www.mysite.com/users/' + rowdata.ID).html(rowdata.UserName);

            $el.removeClass('jqx-grid-widget').addClass('jqx-grid-cell-left-align').attr('style', '').css('margin-top', '4px').empty().append($div.append($alink));

            var content = '';

            $alink.popover({
                html: true,
                container: 'body',
                title: '<strong>' + rowdata.UserName+ '</strong>',
                placement: 'right',
                trigger: 'hover',
                content: function () {
                    if (content !== '') {
                        return content;
                    }
                    else {
                        $.ajax({
                            url: 'users/popover/' + rowdata.ID,
                            cache: true,
                            type: 'GET',
                            success: function (data) {
                                content = data;

                                $alink.data('bs.popover').$tip.find(".popover-content").html(data);
                            }
                        });
                    }
                }
            });

            $div.click(function () {
                var $grid = $el.closest(".jqx-grid");
                $grid.jqxGrid("selectrow", row.boundindex || row);
            });
        };

thanks.

[Peter StoevKeymaster]

Hi jeffo,

They replace the cells content with a widget so it’s not possible to see a selection as it is under the widget.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[jeffoParticipant]

Is it possible to bubble up the mouse events? Or implement the above functionality within a widget?

thanks.

[Peter StoevKeymaster]

Hi jeffo,

Unfortunately, I do not think that this is possible.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts