w2ui grid hide and show not working properly

Question

I am working on w2ui grid and I need to hide and show it based on certain condition. Grid is not showing back even though visibility:visible property is applied after it is hidden. It is just showing a line.

Please have a look at my code below:

HTML:

<div id="LastMileGrid" class="col-lg-6 col-sm-12 col-md-6" style="width: 100%; height: 150px"></div>

Javascript:

 $('#LastMileGrid').w2grid({
        name: 'LastMile',
        show: {
            toolbar: true,
            footer: true,
            toolbarReload: false,
            toolbarColumns: false,
            lineNumbers: true,
        },
        columns: [
            { field: 'recid', caption: 'ID', size: '10%', sortable: true },
        //{ field: 'Header', caption: 'Header', size: '20%', editable: { type: 'text' }, sortable: true },
        { field: 'Description', caption: 'Description', size: '50%', editable: { type: 'text' }, sortable: true }
        ],
        toolbar: {
            items: [
                { id: 'add', type: 'button', caption: 'Add Record', icon: 'w2ui-icon-plus' },
                  { id: 'remove', type: 'button', caption: 'Remove Record', icon: 'w2ui-icon-cross' }
            ],
            onClick: function (event) {
                if (event.target == 'add') {
                    var Index = w2ui['LastMile'].records.length;
                    w2ui['LastMile'].add({ recid: w2ui['LastMile'].records.length + 1 });
                }
                if (event.target == 'remove') {
                    var grid = w2ui["LastMile"];
                    grid.method = 'DELETE';
                    grid.delete();
                }
            }
        },
        //records: [{ recid: 'AAA' }, { recid: 'BBB' }, { recid: 'CCC' }]
    });

And when opening the pop up I call the function,

    $('#popup').w2popup('open', {
        onOpen: function () {
            if ($("#ddlMode").val() == "AIR" && ($("#drpServiceScope").val() == "D2D" || $("#drpServiceScope").val() == "A2D")) {
                $('#LastMileGrid').attr("style", "visibility:visible;height:160px:")

            }
            else {

                $('#LastMileGrid').attr("style", "visibility:collapse;")

            }

        },

        modal: true,
    });  

Answer 1

Answering to help others as I am late :D.

After spending a lot of time to resolve the issue,I have formulize below 2 solutions for w2ui grid show hide issue or column size issue :

1.Change the size of columns to px instead of %.

ie. use

{ field: 'lname', caption: 'Last Name', size: '30px' }

instead of

{ field: 'lname', caption: 'Last Name', size: '30%' },

2. If you wish to keep column size in % due to some requirement:

Depending on where you are rendering grid,you need to handle the resizing.

Calling refresh on grid will send data request again to server.

I don't wanted grid to make call to server each time I show/hide grid, hence written the resize of my own.

To help understand the function please note that in my application,

I have followed naming convention as follows:

If I create a grid then it will be id+"_grid",

If create a form that it will be id+"_form", same for layout id+"_layout".

So I can get the associated component to a id and establish relation between them. Call resize() function after you call show().

If below function doesn't help, try adding some milli seconds delay between show and my function resize().

function resize(id){
    var grid=id+"_grid";
    var layout=id+"_layout";
    var form=id+"_form";
    
     if(w2ui[layout]){
   if($(w2ui[layout].el("main")).hasClass("w2ui-grid")){ /*means in w2ui layouts main has grid  hence call resize. Calling refresh on layout "main"  will make grid to reload data again ,hence  grid resizing is handled in next case  */
    w2ui[layout].resize();
    }else{
       w2ui[layout].refresh();/*means main has element other than grid so refresh */
      }
  }
       
   if(w2ui[form])
     w2ui[form].resize();
   
   if(w2ui[grid])
      w2ui[grid].resize();  //if grid is directly rendered without a layout resize helps

}
   

Answer 2

You can try to call w2ui["LastMile"].refresh() after hiding or showing.