[sd#j.prizalParticipant]

I’ve made this fiddle. https://jsfiddle.net/jrppl89/UbK74/1139/

[sd#j.prizalParticipant]

Adding panels to layout.
Extend the jqxlayout object.

<script>
    $.extend($.jqx._jqxLayout.prototype, {
        // dynamically adds a new floatGroup
        __addPanel: function (groupToAdd, childObject) {
            var base = this;
            childObject.parent = groupToAdd;
            groupToAdd.items.push(childObject);

            base._rendered=false;
            base._createLayout(groupToAdd.items, groupToAdd.widget, groupToAdd);
            base._rendered=true;
            base.render();
        },
    });
</script>

Then call your extended method like this.

// Depending on your code you can call like this.
this.jqx('__addPanel', this.groups.CallRegistryGroup, new CallRegistryPanel(title) );
// or
$("#jqxLayout").jqxLayout('__addPanel', this.groups.CallRegistryGroup, new CallRegistryPanel(title) );
// or
// contentContainer should be an already added dom element because they look for [data-container], if not you must change to content: "<div class='panel-content'></div>"
$("#jqxLayout").jqxLayout('__addPanel', this.groups.CallRegistryGroup, {title:'new Panel', type:'layoutPanel', contentContainer: 'CallRegistryPanel', initContent:function(){ alert('initializing components'); } );

// this.groups.CallRegistryGroup represents the group layout where you wanna add the new panel.
// Which means e.g .
// var layout = $("#jqxLayout").jqxLayout('layout');
// var group = layout.items[0]; // This represents autoHideGroup for example
// new CallRegistryPanel(title) - Should be the new item not initialized like layoutPanel
// $("#jqxLayout").jqxLayout('__addPanel', group, new CallRegistryPanel(title) );

I’ve made this and its working, so far…
If anyone needs an fiddle I can make one.

[sd#j.prizalParticipant]

Sorry I’ve forgot, I don’t know if this happened only with me , but for example I have 3 grids with filterrow on different documentPanels, of course different objects. Somehow the first grid filters works great, the other 2 the filter input does not have the bind attached … I had to call jqxGRid(‘clearfilters’) after bindingcomplete in order to re bind and make it work …

[sd#j.prizalParticipant]

Bah this should be an core functionality, we should be able to create dynamically every component type supported. Now I have to do magic , add some dom new elements, add to the layout and call methods from your api hoping that it renders correctly :/ . Please consider this features , because this tool is really great. Some jqxRibbon methods should be published, on the documentation refers that documentPanel is an jqxribbon, when I managed to grab the widget attribute , some of the jqxribbon methods does not work at all, hopefully the select event is, because I needed to grab that event to load the jqxgrid tables based on the user selection… Another thing when an jqxgrid with filterrow is not visible but initialized it throws an error to the console and breaks the js . After discovered the problem I managed to validate before the grid creation, but this could be an default functionality … Thank you

[sd#j.prizalParticipant]

Made an fiddle example

[sd#j.prizalParticipant]

Hi not something like this on the client side?

//
        this.focusFilterElement = function ($filter) {
            $filter.focus();
        };

        this.getFilterFocusedElement = function (event, callback) {
            let $focusedFilter = $(document.activeElement);
            if(typeof callback === 'function') callback($focusedFilter);
        };

                this.$elem.on('filter', function (event) {
                    let counter = scope.jqx('getrows').length;
                    if (counter !== 0) scope.jqx('autoresizecolumns', 'all');

                    scope.getFilterFocusedElement(event, function($focusedFilter){
                           
                        entityLayout.getEntityListPanelComponent().setCounter( scope.jqx('getrows').length );
                        // this was making loose my filter focus because of the jqxDockingLayout render
                        entityLayout.render();

                        scope.focusFilterElement( $focusedFilter );
                    });
                });

[Author]

Posts