jQuery UI Widgets Forums Plugins AngularJS Dynamically change the grid's width

Tagged: ,

This topic contains 6 replies, has 2 voices, and was last updated by  bobmazzo 5 years, 8 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • Dynamically change the grid's width #62230

    bobmazzo
    Participant

    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

    Dynamically change the grid's width #62240

    Peter Stoev
    Keymaster

    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/

    Dynamically change the grid's width #62324

    bobmazzo
    Participant

    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

    • This reply was modified 5 years, 9 months ago by  bobmazzo.
    • This reply was modified 5 years, 9 months ago by  bobmazzo.
    • This reply was modified 5 years, 9 months ago by  bobmazzo. Reason: propery format code snippet
    Dynamically change the grid's width #62334

    Peter Stoev
    Keymaster

    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/

    Dynamically change the grid's width #62401

    bobmazzo
    Participant

    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 !

    Dynamically change the grid's width #62418

    Peter Stoev
    Keymaster

    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/

    Dynamically change the grid's width #63308

    bobmazzo
    Participant

    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.

    • This reply was modified 5 years, 8 months ago by  bobmazzo.
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.