Nested grid

[dbadmin]

Hi!

I'm using a nested grid option and I was wondering if I have to put an empty first column into data array in order to display collapse icon? If I don't do that, my data gets shifted to the left.

When I export the main grid to excel, first column gets exported as well (I believe it's the one with collapse icons). Is there a way to avoid getting it exported as it doesn't hold any data?

Thanks!

[paramvir]

Please take the following steps on click of export button:

1) make first column.hidden = true

2) make call to exportExcel

3) make first column.hidden = false


there is no need to call refresh during the process.

[dbadmin]

So would it physically hide and show the column for a user? If so, that would look weird. It'd be nice to have an attribute on a column to specify that it should be ignored by excel.

Also, I noticed when I reload data into a grid, collapse icon does not change from + to - (it only does so on the first load of the grid). Am I doing something wrong? I was looking for a demo with reloading grid and nested data but can't seem to find one.

Thank you!

[paramvir]

No it won't change visibility of the column to the user if done this way.

var column = $grid.pqGrid( "getColumn", { dataIndx: 'pq_detail' });
column.hidden = true;

make a call to exportExcel

column.hidden = false;


I assume you mean reload of data in the main grid. You can check this demo for reload of data. Data is reloaded when you click on the refresh button in the pager.

http://paramquery.com/pro/demos/detail

[dbadmin]

Ok, I'll try your solution for the excel problem.

As for the grid, you're right I'm talking about reloading of the main grid. In the example you shared paging seems to be local. My situation is I change a filter outside of the grid, then click "search", and reload the grid by calling a similar function to the one in the demo. So when I click "Search" second time, the collapse icon doesn't switch to "-" after clicking on a "+".

[paramvir]

I get it from last line of your message, when you click on + it doesn't change to -. In other words when you try to collapse the row it remains in expanded state.

Please share a small test case for us to check it.

[dbadmin]

When I open up the row, it does open up, but the icon "+" doesn't change to "-". I can collapse the row. The only problem is that icon image doesn't change.

Below is my code. The idea is when a user clicks "Submit" grid gets reloaded. So when it happens 2nd time, the problem occurs.

$( "#btnSubmit" ).click(function() {     
   LoadGrid();
});

function LoadGrid()
{         
   var columnModel = [
               {title: "", minWidth: 27, width: 27, type: "detail", resizable: false, editable:false, dataIndx:"CollapseID" },
                         {title:"ID", dataIndx: "ID", hidden:true},     
                  {title:"Plant ", width:200, dataType:"string", align:"right", className:'grid-col', editable:true},
                  {title:"Current status", width:200, dataType:"string", align:"right", className:'grid-col', editable:false}
                  ];

   var dataModel = {
           location: "remote",
           sorting: "local",           
           dataType: "JSON",
           method: "POST",
           recIndx: "ID",
           rPPOptions: [1, 10, 20, 30, 40, 50, 100, 500, 1000],
           getUrl: function ()
              {
                 var filters = {'name': $("#txName").val()
                   } ;
                   return {
                    url: "/services/svc_Search.php",
                     data: { dataBuffer: filters }
                };
            },
           getData: function (dataJSON)
           {
               var data = dataJSON.DataArray;
               return { curPage: 1, totalRecords: 1, data: data };
           }
       };
   
    var $gridMain = $("#grid_array").pqGrid({
       dataModel: dataModel,
       recIndx: "ID",
       showTitle: false,
        showBottom: false,
        collapsible:false,
        scrollModel:  {pace: 'fast', horizontal: false},
        flexHeight:true,
        flexWidth:true,
        sortable:true,
        columnBorders:false,
        editModel: {clicksToEdit: 1, saveKey: 13},
        toolbar: {
            cls: 'pq-toolbar-export',
            items: [{
                    type: 'button',
                    label: "Excel",
                    icon: 'ui-icon-document',
                    listeners: [{
                        "click": function (evt) {
                            $("#grid_array").pqGrid("exportCsv", { url: "/DownloadGrid.php" });
                        }
                    }]
            }]
        },
        //editable: false,
        colModel: columnModel,
        wrap: false,
        hwrap: false,           
        numberCell: { show: false },                     
        resizable: true,
        freezeCols: 1,
        freezeRows: 0,
        selectionModel: {type: 'row', mode: 'multiple'},
        detailModel:
         {
            cache: true,
            collapseIcon: "ui-icon-plus",
            expandIcon: "ui-icon-minus",
            init: function (ui)
            {
                var rowData = ui.rowData,
                    plantID = rowData[1];
                //make a deep copy of gridDetailModel
                var objCopy = $.extend(true, {}, gridDetailModel);
 
                objCopy.dataModel.url = "/services/svc_PlantStatusHistory.php?PlantID=" + plantID;
                objCopy.dataModel.error = function ()
                {
                     $gridMain.pqGrid("rowInvalidate", {rowData:rowData});
                };
                var $grid = $("<div></div>").pqGrid(objCopy);                   
                return $grid;
            }
        }
    });
     
    var gridDetailModel =
    {
         dataModel: {
             location: "remote",
             sorting: "local",
             dataType: "JSON",
             method: "GET",            
             getData: function (dataJSON)
             {
                 return { data: dataJSON.DataArray };
             }
         },
         colModel: [
               { title: "Date", width: 100, dataType: "date"},
             { title: "Status", width: 200},
             { title: "Note", width: 200}
         ],
         editable: false,
         freezeCols: 0,
         flexHeight: true,
         flexWidth: true,
         numberCell: { show: false },        
         showTop: false,
         showBottom: false
     };
   $("#grid_array").pqGrid("refreshDataAndView");   
}

[paramvir]

This is not the right way to refresh data in the grid, it would only lead to undefined behavior.

your LoadGrid function should look like

Code: [Select]

function LoadGrid(){
  $("#grid_array").pqGrid("refreshDataAndView");   
}

All other initialization code should be called only once.

[dbadmin]

Got it! Thank you!

So is there a way to only initialize grid but not load data into it? And only load data when I explicitly call $("#grid_array").pqGrid("refreshDataAndView");

(without introducing a flag for the first load)

[dbadmin]

Also, excel solution worked! The only thing I had to struggle with is I was trying to explicitly set DataIndex on the detail column, and it looks like 'pq_detail' is default data index for type:detail columns.

Thank you!

[paramvir]

you can check whether the grid is already initialized with

Code: [Select]

  if ( $( '.selector' ).hasClass( 'pq-grid') == true )


[dbadmin]

That worked, thank you!