How to get all ID's of jqgrid including the paginated ones?

Question

I'm a newbie to JQuery.

I'm trying to use the function listed here.

The mya=$("#list").getDataIDs(); // Get All IDs is listing the IDs that are only in the current view. However my grid is paginated one. How can I fetch all the IDs?

Here is my code:

$(document).ready(function () {

    jQuery("#customer_list").jqGrid({
      url:'jq_customer_list',
      datatype: "json",
      colNames:['Col1','Col2','Col3'],
      colModel:[
{name:'Col1',index:'Col1', width:100},
{name:'Col2',index:'Col2', width:80},
{name:'Col3',index:'Col3', width:75},
     ],
     rowNum:20,
     rowList:[5,10,20],
     mtype:"GET",
     rownumber:true,
     rownumWidth:40,
     pager: $("#customer_list_pager"),
     viewrecords: true,
     gridview: true,
     caption:"My Data",
     height: '50%',
     pagination:true

    }).navGrid('#customer_list_pager', { search:true, del: false, add: false, edit: false,searchtext:"Search" },
               {}, // default settings for edit
               {}, // default settings for add
               {}, // delete
               {closeOnEscape: true, multipleSearch: true, 
                     closeAfterSearch: true }, // search options
               {}
             ).navButtonAdd('#customer_list_pager',{
                 caption:"Export to Excel", 
                 buttonicon:"ui-icon-save", 
                 onClickButton: function(){ 
                   exportExcel($(this));
                 }, 
                 position:"last"
             });

    function exportExcel($id){
        alert('excelExport');
          var keys=[], ii=0, rows="";
          var ids=$id.getRowData();  // Get All IDs
          var row=$id.getRowData(ids[0]);     // Get First row to get the labels
          for (var k in row) {
            keys[ii++]=k;    // capture col names
            rows=rows+k+"\t";     // output each Column as tab delimited
          }
          rows=rows+"\n";   // Output header with end of line
          for(i=0;i<ids.length;i++) {
            row=$id.getRowData(ids[i]); // get each row
            for(j=0;j<keys.length;j++) rows=rows+row[keys[j]]+"\t"; // output each Row as tab delimited
            rows=rows+"\n";  // output each row with end of line
          }
          rows=rows+"\n";  // end of line at the end
          var form = "<form name='csvexportform' action='excelExport' method='post'>";
          form = form + "<input type='hidden' name='csvBuffer' value='"+rows+"'>";
          form = form + "</form><script>document.csvexportform.submit();</sc"+"ript>";
          OpenWindow=window.open('', '');
          OpenWindow.document.write(form);
          OpenWindow.document.close();
        }

    $("#customer_list").filterToolbar({autosearch:true });

    });

Answer 1

You use datatype: "json" without loadonce:true. So the server is responsible to sorting and pagination. So I would implement the export in CSV or XLSX in the server code only. The jqGrid has no information about the full list of data ids or any other information about the full dataset. What you can do is just set window.location to the new url. The server part of the url will generate the CSV or XLSX return it in the HTTP body and set additional HTTP headers like Content-Type to ("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" for XLSX, "application/vnd.ms-excel" for XLS or "text/csv" for CSV) and "content-disposition" to "attachment; filename=youfilname.xslx" (of another file extension). In the case the web browser will save the data in the file with the corresponding name and open the file with respect of the corresponding application (Excel.exe for example).

Answer 2

As Oleg said, there is no built-in method to return all of the grid ID's for pages that are not displayed in the grid.

If you really need a list of all ID's in the grid, I suggest creating a custom web method to generate them. Then instead of using the grid, just call this method directly using one of the jQuery AJAX functions such as jQuery.get(). Since on the back-end you are already using a query to generate data for the grid, just tweak that query to return a list of ID's - or the ID's and associated data, if necessary.

But Oleg is also right in that if you are really trying to implement a CSV / Excel output, you are better off creating a server-side method to do this, since that way you can create a better user experience by setting HTTP headers correctly, allowing the browser to open an external application for the file, etc.

Does that help?