Dynamically change the grid's width

[bobmazzoParticipant]

Hello friends,
Just about to purchase a jqw license, and very impressed with their widgets.
In the meantime, I’m trying to figure out the best way to dynamically change the grid’s width as I expand the section wrapped around it.

As you’ll see in my HTML below, there is an id called “section1″. I then attempt to access this via the directive and then increase the grid’s width.

The grid does get wider, but then goes completely BLANK at this line (see directive below) !

$(‘#section1’).jqxGrid().width(900);

Here’s my HTML def, using bootstrap’s col-md-6 class and a custom directive called ‘data-cc-widget-header’ which allows me to min/max the div section:

` <div class=”col-md-6″> <!– GRID (DYNAMIC) –>
<div class=”widget wlightblue”>
<div data-cc-widget-header title=”{{vm.mainGridTitle}}” subtitle=”” allow-collapse=”true”></div>
<div class=”widget-content user”>
<!– JQX GRID HERE –>
<jqx-tree-grid id=”section1″ jqx-instance=”jqGridHierObj” jqx-settings=”vm.jqGridHierSettings”></jqx-tree-grid>
</div>
<div class=”widget-foot”>
<div class=”clearfix”></div>
</div>
</div>
</div>`

Note: The ‘data-cc-widget-header’ directive above pulls in an external html page, which in turn contains the ‘data-cc-widget-maximize’ directive.

Here’s my Angular directive which is triggered when I expand the div :

app.directive('ccWidgetMaximize', function () {
        // Usage: <a data-cc-widget-maximize></a>
        var directive = {
            link: link,
            template: '<i class="fa fa-expand"></i>',
            restrict: 'A'
        };
        return directive;

        function link(scope, element, attrs) {
            attrs.$set('href', '#');
            attrs.$set('wmaximize');
            element.click(maximize);

            function maximize(e) {
                e.preventDefault();
                var $wcontent = element.parent().parent().next('.widget-content');
                var iElement = element.children('i');
                $wcontent = element.parent().parent().parent().parent().first('.col-md-6');

                if ($wcontent.outerWidth() < 800) {
                    iElement.removeClass('fa fa-expand');
                    iElement.addClass('fa fa-compress');                    
                    $wcontent.outerWidth('70%');
                    $('#section1').jqxGrid().width(900);          // ATTEMPT HERE TO INCREASE THE JQ GRID'S WIDTH; THE GRID GOES BLANK HERE !!
                } else {
                    iElement.removeClass('fa fa-compress');
                    iElement.addClass('fa fa-expand');
                    $wcontent.outerWidth('50%');
                }                
            }
        }
    });

Your advice is appreciated,

Bob

[Peter StoevKeymaster]

Hello bobmazzo,

Setting the size of our widgets should be done by setting the “width” and “height” properties of the widgets. That is not what I see in the provided code. I would suggest you to start with our Help Documentation before trying to use these widgets and especially look at the Getting Started help topics and the API Docs.

Best Regards,
Peter Stoev

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

[bobmazzoParticipant]

My apologies for not posting my Angular js code as well.
Here’s my jqwGrid init code where I set the width :

   var myColumnsJQ = gridHierarchyService.getColumnDefsJQ(reportType, data);
    myModel["localData"] = myData;
    var dataAdapter = new $.jqx.dataAdapter(myModel);
    vm.jqGridHierSettings = {       // jqwidgets grid settings binded to html
                altrows: true,
                sortable: true,
                columnsResize: true,
                editable: true,
                showToolbar: false,
                width: '100%',         // SET WIDTH HERE !!
                height: 400,
                source: dataAdapter,
                columns: myColumnsJQ  
            };

I’d like to somehow increase the width on-the-fly to fill out the outer div. i.e. The user can “expand” the outer div, and it would be nice if the jqxGrid could be automatically reset to fill out the outer div.

Kind regards,

Bob

[Peter StoevKeymaster]

Hello Bob,

If the user resize the browser’s window and the Grid’s width is in percentages, then the Grid will resize automatically. If you resize with some custom code an outer DIV of the Grid, you will have to set the Grid’s width property again.

Best Regards,
Peter Stoev

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

[bobmazzoParticipant]

Hi Peter,
I would like to do exactly what you said in your reply: “you will have to set the Grid’s width property again.”

If see in your docs how to set the width, but I cannot seem to reset the widget on-the-fly. See sample line here :

$('#section1').jqxGrid().width(900);

FYI: What’s also interesting is that after I expand my div, once I manually widen one of the grid columns, then the grid automatically refreshes and expands to fit my div !

[Peter StoevKeymaster]

Hello bobmazzo,

I’d suggest you to see the Getting Started help topic about jqxGrid and the API Documentation page to learn how to set properties and invoke methods using jQWidgets.

Best Regards,
Peter Stoev

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

[bobmazzoParticipant]

It turns out that this API Reference is what I was looking for, under the ‘getkey’ method: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/index.htm?%28arctic%29#demos/jqxtreegrid/defaultfunctionality.htm

And this jsfiddle shows how to getrows and getkey: http://jsfiddle.net/jqwidgets/S3q9c/

In a custom Angular directive, I used these 3 lines of code so the treeview would auto-expand :

`var rows = $(“#treeGrid”).jqxTreeGrid(‘getRows’);
var key = $(“#treeGrid”).jqxTreeGrid(‘getKey’, rows[0]);
$(“#treeGrid”).jqxTreeGrid(‘expandRow’, key);`

I hope this is helpful to someone.

[Author]

Posts