CODEWITHSUNDEEP
javascriptw2ui
Jeff Millard
Jeff Millard

Reputation: 173

How do I replicate an existing w2ui grid to a div?

I have an application that has a large number (~50) of grids, each with different fields/column structures (and thus they cannot be merged). Users go through the app, add records to fields, and edit those records. The navigation uses the sidebar, and each sidebar element loads a different grid.

All these grids are constructed on startup, using the w2ui starter on github. Grids and forms are defined in configuration files. These files are called by the main.js to create each grid:

 import ABCconf from './ABC-conf.js'
 $().w2grid(ABCconf.ABC_grid)

In that same file, where the routes are created, is the logic to load the grid when the corresponding sidebar element is clicked:

w2ui.app_layout.html('main', w2ui.ABC_grid)

Important note - this loads a single grid in the 'main' panel. I want to load all grids with record lengths >0 on a summary page, which means they all need to go into a single panel (assume it is 'main'). I have assumed I would use a series of appropriately named div elements, eg div id='ABC'.

At this point I am stuck getting the grid inserted into the div. For debugging purposes I have tried:

  // this works and puts text into div
  document.getElementById("ABC").innerHTML = `different data`; 

  // this puts '[object Object]' into div
  document.getElementById("ABC").innerHTML = w2ui.ABC_grid;

I get how to use the w2grid constructor to build the grid and populate the div, but not how to take the starter framework + existing grids and replicate many of them in the same panel. I have poured through the documentation but I am just not getting it.

Upvotes: 0

Views: 510

Answers (1)

Mike Scotty
Mike Scotty

Reputation: 10782

You can use the grid's render method to change the container into which the grid is rendered.

In the following code I'm initially creating the grid in grid1 and by clicking the button the container is changed to grid2.

$(function () {
    $("#btn_grid_render").click(function(){
        w2ui.grid.render('#grid2')
    });

    $('#grid1').w2grid({ 
        name: 'grid', 
        columns: [                
            { field: 'email', text: 'Email', size: '100%' },
            { field: 'profit',text: 'Profit', size: '120px', render: 'money' },
            { field: 'sdate', text: 'Start Date', size: '120px', render: 'date' }
        ],
        records: [
            { recid: 1, fname: 'John', lname: 'Doe', email: '[email protected]', profit: 2500, sdate: '1/3/2012' },
            { recid: 2, fname: 'Stuart', lname: 'Motzart', email: '[email protected]', profit: 1004, sdate: '4/13/2012' },
            { recid: 3, fname: 'Jin', lname: 'Franson', email: '[email protected]', profit: 473, sdate: '3/3/2012' },
            { recid: 4, fname: 'Susan', lname: 'Ottie', email: '[email protected]', profit: 304, sdate: '5/3/2012' },
            { recid: 5, fname: 'Kelly', lname: 'Silver', email: '[email protected]', profit: 9300, sdate: '8/19/2012' },
            { recid: 6, fname: 'Francis', lname: 'Gatos', email: '[email protected]', sdate: '6/12/2012' },
            { recid: 7, fname: 'Mark', lname: 'Welldo', email: '[email protected]', profit: 3400, sdate: '8/13/2012' },
            { recid: 8, fname: 'Thomas', lname: 'Bahh', email: '[email protected]', profit: 2030, sdate: '4/31/2012' },
            { recid: 10, fname: 'John', lname: 'Doe', email: '[email protected]', profit: 13004, sdate: '1/3/2012' },
        ]
    });    
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" rel="stylesheet"/>
<script src="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>

<button id="btn_grid_render">Render Grid to second div</button>
<div id="grid1" style="width: 100%; height: 200px; background: red"></div>
<div id="grid2" style="width: 100%; height: 200px; background: blue"></div>

Fiddle: http://jsfiddle.net/zvbgf873/

Upvotes: 0

Related Questions