$(function () { var gridName = "grid_export"; var agg = pq.aggregate, format = function(val){ return pq.formatNumber(val, "$##.00"); } //define custom aggregate "all" and now it can be used in any column. agg.allNum = function(arr, col){ return "Sum: " + format( agg.sum(arr, col) ) +"<BR>Max: " + format( agg.max(arr, col) ) +"<BR>Min: " + format( agg.min(arr, col) ); } var columns = [ { title: "Order ID", width: 100, dataIndx: "OrderID", hidden: true }, { title: "Customer Name", width: 140, dataIndx: "CustomerName" }, { title: "Product Name", width: 150, dataIndx: "ProductName" }, { title: "Unit Price", width: 120, dataIndx: "UnitPrice", format: '$##,###.00', align: "right", summary: { edit: false, type: "allNum" //use custom aggregate. } }, { title: "Quantity", width: 100, dataIndx: "Quantity", align: "right" }, { title: "Order Date", width: 100, dataIndx: "OrderDate" }, { title: "Required Date", width: 100, dataIndx: "RequiredDate", hidden: true }, { title: "Shipped Date", width: 100, dataIndx: "ShippedDate", hidden: true }, { title: "ShipCountry", width: 100, dataIndx: "ShipCountry"}, { title: "Freight", width: 100, align: "right", dataIndx: "Freight", summary: { type: "max", edit: false }, }, { title: "Shipping Name", width: 120, dataIndx: "ShipName" }, { title: "Shipping Address", width: 180, dataIndx: "ShipAddress", hidden: true }, { title: "Shipping City", width: 100, dataIndx: "ShipCity" }, { title: "Shipping Region", width: 110, dataIndx: "ShipRegion", hidden: true }, { title: "Shipping Postal Code", width: 160, dataIndx: "ShipPostalCode", hidden: true } ]; var dataModel = { location: "remote", dataType: "JSON", method: "GET", url: "/Content/invoice.json" } var groupModel = { on: true, dataIndx: ['CustomerName'], collapsed: [false], //header: false, headerMenu:false, showSummary: [true], //merge: true, summaryEdit: false, //grandSummary: true, }; var gridDiv = "div#" + gridName; var toolbar = { items: [ { type: '<span>Select columns:</span>' }, { type: 'select', //label: 'Select visible columns:', cls: 'columnSelector', attr: "multiple='multiple'", style: "height:60px;", options: function (ui) { var CM = this.getColModel(), opts = []; for (var i = 0; i < CM.length; i++) { var obj = {}, column = CM[i]; obj[ column.dataIndx ] = column.title; opts.push(obj); } return opts; }, listener: function (evt) { var arr = $(evt.target).find("option:selected").map(function(){ return this.value; }).get(), CM = this.getColModel(); for (var i = 0; i < CM.length; i++) { var column = CM[i], dataIndx = column.dataIndx; //hide the column if not a selected option. column.hidden = ($.inArray(dataIndx, arr) == -1); } this.option("colModel", this.option("colModel")); //refresh the colModel. this.refresh(); } }, { type: '<BR>', }, { type: 'select', label: 'Format: ', attr: 'id="export_format"', options: [{ xlsx: 'Excel', csv: 'Csv', htm: 'Html', json: 'Json'}] }, { type: 'button', label: "Export", icon: 'ui-icon-arrowthickstop-1-s', listener: function () { var format = $("#export_format").val(), blob = this.exportData({ //url: "/pro/demos/exportData", format: format, render: true }); if(typeof blob === "string"){ blob = new Blob([blob]); } saveAs(blob, "pqGrid."+ format ); } }, { type: '<span>| Groupings (drag to area below):</span>' } ] }; $(gridDiv).pqGrid({ width: "100%", height: 500, dataModel: dataModel, groupModel: groupModel, numberCell: { show: false }, pageModel: { type: 'local', rPP: 20, rPPOptions: [1, 5, 10, 15, 20] }, scrollModel: { lastColumn: null }, colModel: columns, showTop : true, showToolbar : true, collapsible: false, stripeRows: false, create: function (evt, ui) { $("<span id='btnHeader'>Settings ▼</span>").prependTo("div.pq-slider-icon"); var CM = this.getColModel(), opts = []; for (var i = 0; i < CM.length; i++) { var column = CM[i]; if (column.hidden !== true) { opts.push(column.dataIndx); } } //initialize the selected options in toolbar select list. $(".columnSelector").val(opts); console.log(opts); //disable OrderDate column. $(".columnSelector").find("option[value='OrderDate']").prop('disabled', true); //convert it into pqSelect. $(".columnSelector").pqSelect({ checkbox: true, multiplePlaceholder: 'Select visible columns', maxDisplay: 0, label: 'Select', width: '80%' }); }, complete: function( event, ui ) { var grid = this; //pq.grid(gridDiv); $(gridDiv).pqGrid({ refresh: function( event, ui ) { $("span.pq-group-icon").hide(); $("span.pq-group-toggle").hide(); } }); $("pq-select-button").pqSelect( "option", "width", 800); grid.refresh(); }, toolbar: toolbar, title: "Shipping Orders", resizable: true }); pq.grid(gridDiv).on("complete", function( event, ui ) { var grid = this; //pq.grid(gridDiv); $("div.pq-toolbar").hide(); $("div.pq-group-header").hide(); $("span.pq-group-icon").hide(); $("span.pq-group-toggle").hide(); $('span#btnHeader').css( 'cursor', 'pointer' ); $("span#btnHeader").on("click", function () { if ( $("div.pq-toolbar").is( ":hidden" ) ) { $("span#btnHeader").html("Settings ▲" ); $("div.pq-toolbar").slideDown( "fast"); $("div.pq-group-header").slideDown( "fast", function(){ grid.refresh(); }); } else { $("span#btnHeader").html("Settings ▼" ); $("div.pq-toolbar").slideUp("fast"); $("div.pq-group-header").slideUp( "fast", function(){ grid.refresh(); }); } }); }); });