Problems to initialize flexGrid in nav-tabs

Posted by: javieragr99 on 13 February 2018, 4:17 am EST

    • Post Options:
    • Link

    Posted 13 February 2018, 4:17 am EST

    Hello, im actually have a problem when I charge my template, using a flexGrid

    I need to resize mi window to refresh and watch my flexGrid because it doesn´t initialize it ,

    here ir mi code I make the intance and when I click on tab, I just initialize the instancy, but I need to click two times for see the result,

    My question is, how can initialize correctly or initialize only using one click… thanks

    
      $scope.flex = new wijmo.grid.FlexGrid('#flex')
       $scope.init = function () {
         
               $scope.flex.initialize({
                   autoGenerateColumns: false,
                   itemsSource: countries,
                   allowMerging: 'All',
                   allowSorting: false,
                   allowDragging: 0,
                   allowDelete: false,
                   //  selectionMode:3,
                   columns: [
                       { binding: 'country', header: 'Country' },
                       { binding: 'sales', header: 'Sales' },
                       { binding: 'expenses', header: 'Expenses' },
                       { binding: 'downloads', header: 'Downloads' }
                   ]
    
    
               });                                
    
       }
    
    
    ```[img]public\uploads\de4153879b6d84617e36ad16eb8f09e21518541865152.png[/img]
  • Posted 13 February 2018, 7:43 pm EST

    When you change Tab’s please call the Invalidate() method on the FlexGrid instance . It should fix the issue you are facing

  • Posted 14 February 2018, 2:44 am EST

    it doesn´t work, it works after second click

  • Posted 14 February 2018, 2:44 pm EST

    Please send me a sample which replicates the issue, I will investigate this and provide a solution

  • Posted 15 February 2018, 5:35 am EST

    this is the example

    You must doble click to view the grid or resize the page to view the change

    http://jsfiddle.net/javieragr/rxkhcotk/103/

  • Posted 15 February 2018, 12:19 pm EST

  • Posted 15 February 2018, 4:20 pm EST

    I have modified the fiddle. Please test out the Tab Three which includes the fix

    http://jsfiddle.net/t4ypmura/

  • Posted 12 March 2018, 11:42 am EST

    another solution? it does not work on all cases, thanks

  • Posted 12 March 2018, 8:58 pm EST

    Could you please elaborate the Use Case under which the solution is not working. It would help us to investigate it.

  • Posted 12 March 2018, 9:04 pm EST

    Hi Javier,

    You may use Bootstrap Tabs shown.bs.tab event to invalidate FlexGrid. Please refer to the following demo sample fiddle using pureJS:

    http://jsfiddle.net/mkgupta911/qvffrm9g/

    Please let us know if you any further query.

    ~Manish

  • Posted 13 March 2018, 4:53 am EST

    it works perfect, thanks my friend.

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels