Recent Posts

61

Help for ParamQuery Pro / Re: "Loading" box not displayed for Nesting of grids with lazy loading

« Last post by RamC on March 06, 2025, 11:08:16 am »

I have updated the code as per new V 9.1, please JSFiddle- https://jsfiddle.net/s270rzho/latest/ and find below code block and let me know if you found anything missing.

//common options used in all grids.
var options = {
fillHandle: 'all',
blur: function () {
this.Selection().removeAll();
}
};

//Initialize the Main Grid
function InitialiseDevicesgrid() {

//initialize main grid
$("#DeviceList").pqGrid(Object.assign({}, options, {
width: '100%',
height: CalculateGridHeight(),
dataModel: { location: "local" },
scrollModel: {autoFit:true, flexContent: true },
stripeRows: true,
collapsible: false,
flex: { one: true },
selectionModel: { type: 'row' },
hwrap: false,
wrap: false,
create: function (evt, ui) {
var colMod = [{ value: "Gateway", title: "Gateway" }, { value: "DataSource", title: "DataSource" }, { value: "DataTransfer", title: "DataTransfer" }, { value: "System", title: "System" }, { value: "Module", title: "Module" }],
$sel = $("#SearchList"),
optionElement = '';

// add column to the dropdown
$.each(colMod , function (i, column) {
optionElement = '<option value="' + column.value + '">' + column.title + '</option>';
$sel.append(optionElement);
});
// Refresh to show
$sel.selectpicker('refresh');
},

colModel: [
{
title: "", minWidth: 27, maxWidth: 27, type: "detail", resizable: false, editable: false, sortable: false,
render: function (ui) { ui.rowData.rowId = 'DeviceList_' + ui.rowIndx; }
},
{ title: 'Customer', dataIndx: 'customer_name', editable: false, render: filterRender }
],
numberCell: { show: false },
sortModel: { sorter: [{ dataIndx: "customer_name", dir: "up" }], cancel: false, type: "local" },
resizable: true,
toolbar: {
cls: "pq-toolbar-search",
items: [
{
type: 'textbox',
attr: 'placeholder="' + "Find" + '"',
cls: "filterValue clearable",
listeners: [
{ 'keyup': DevicesSearchHandler },
{ 'change': DevicesSearchHandler }
]
},
{
type: '<select id="SearchList" class="search-list" data-width="150px" data-height="10px" data-style="btn-default btn-sm" data-dropup-auto=false></select>'
}
],
},

detailModel: {
cache: true,
collapseIcon: "ui-icon-plus",
expandIcon: "ui-icon-minus",
init: function (ui) {
var rowData = ui.rowData,
dataHubDetailObj = gridDataHubDetailModel(this, rowData), //get a copy of gridDetailModel
$grid = $("<div id=" + rowData.rowId + "></div>").pqGrid(dataHubDetailObj); //init the detail grid.
return $grid;
}

},
cellClick: function (event, ui) {
if (typeof ui.rowData.pq_detail != 'undefined') {
$("DeviceList_1").pqGrid("showLoading");
//$('#' + ui.rowData.rowId).pqGrid("showLoading");
if ((typeof ui.rowData != 'undefined') && (ui.rowData.pq_detail.show)) {
if (initialisedDataHubsGridIds.indexOf(ui.rowData.rowId) < 0) { initialisedDataHubsGridIds.push(ui.rowData.rowId); }
} else if ((typeof ui.rowData != 'undefined') && (!ui.rowData.pq_detail.show)) {
initialisedDataHubsGridIds.pop(ui.rowData.rowId);
}
}

}
}));

$("#SearchList").on('changed.bs.select', function (e, clickedIndex, newValue, oldValue) {
//Reset the Grid and then continue searching with the changed value
for (var i = 0; i < searchGridIds.length; i++) {
$(searchGridIds).pqGrid("reset", { filter: true });
}
DevicesSearchHandler();
});
}

function onTabsActive(evt, ui) {
//grid requires refresh whenever corresponding tab is refreshed.
ui.newPanel.find(".pq-grid").pqGrid("refresh");
};

//Datahub Grid function called by Main Grid
var gridDataHubDetailModel = function (gridMain, rowData) {
var datahubGridId = '#' + rowData.rowId;
return Object.assign({}, options, {
width: "100%",
pageModel: { type: "local", rPP: 10, curPage: 1, strDisplay: "{0} to {1} of {2}" },
columnBorders: false,
showTop: false,
showBottom: true,
scrollModel: { autoFit: true, flexContent: true },
dataModel: {
location: "remote",
dataType: "JSON",
method: "GET",
url: "../connections/datahubs/" + updatedEncodeURIComponent(rowData.customer_name) + "?customerName=" + updatedEncodeURIComponent(rowData.customer_name) + "&region=" + updatedEncodeURIComponent(rowData.region) + "&country=" + updatedEncodeURIComponent(rowData.country) + "&city=" + updatedEncodeURIComponent(rowData.city),
getData: function (dataJSON) {
var data = dataJSON.datahubs;
if (typeof data != "undefined" && JSON.stringify(data) != "") {
for (var i = 0; i < dataJSON.datahubs.length; i++) {
data.hub_name = data.name;
}
}
return { curPage: dataJSON.curPage, totalRecords: dataJSON.length, data: data };
}
},
colModel : [
{ title: "", minWidth: 27, maxWidth: 27, type: "detail", resizable: false, editable: false, sortable: false },
{
title: "Lab Name", width: "15%", dataType: "string", dataIndx: "hub_name", editable: false, sortable: true, render: filterRender
},
         {
title: "Gateway Name", width: "25%", dataType: "string", dataIndx: "dns_name", editable: false, sortable: true, render: function (ui) {
var gatewayName = (typeof ui.rowData.dns_name != 'undefined' && ui.rowData.dns_name.trim() != '')?ui.rowData.dns_name:ui.rowData.datahub_id;
return {
text: "<span title='" + ReplaceSpecialCharacter(gatewayName) + "'>" + gatewayName + "</span>"
};
            }
},
{
title: "Status", dataType: "string", dataIndx: "status", editable: false, sortable: true, width: "15%",
render: function (data) {
return {
text: "<span class='" + GetStatusBitforConnectionStatus(data.rowData.status)["css"] + "'></span>" + "<span> " + filterRender(data) + "</span>"
};
}
},
{
title: "Last Contact Time", dataType: "date", dataIndx: "last_contact_time", editable: false, sortable: true, width: "20%",
render: function (data) {
var lastContactDate = new Date(data.rowData.last_contact_time);
var currentDate = new Date();
var cellHTML = '';
if (currentDate - lastContactDate <= 360000) {
cellHTML = cellHTML + "<span class='status-text-green'";
}
else if (currentDate - lastContactDate <= 86400000 && data.rowData.statusBit == 1) {
cellHTML = cellHTML + "<span class='status-text-orange'";
}
else {
cellHTML = cellHTML + "<span class='status-text-red'";
}
cellHTML = cellHTML + " title = '" + ReplaceSpecialCharacter(getDisplayDateTime(new Date(data.rowData.last_contact_time))) + "'>" + getDisplayDateTime(new Date(data.rowData.last_contact_time)) + '</span>';
return {
text: cellHTML
};
}
},
{
title: "",
dataIndx: "DeleteDataHub",
align: "center",
editable: false,
sortable: false, width: "12%",
render: function (ui) {
ui.rowData.rowId = rowData.rowId + "_" + ui.rowIndx;
return {
text: "<a class='my-tool-tip' data-toggle='tooltip' data-placement='left' title='Delete Gateway'><i class='glyphicon glyphicon-trash' style='font-family:Glyphicons Halflings'></i></a>",
};
}
         },
         {
            title: "",
            dataIndx: "AnonymizeDataHub",
            align: "center",
            editable: false,
sortable: false, width: "12%",
            render: function (ui) {
               ui.rowData.rowId = rowData.rowId + "_" + ui.rowIndx;
               return {
text: (ui.rowData.status.toLowerCase() != 'anonymized')?
"<a class='my-tool-tip' data-toggle='tooltip' data-placement='left' title='Anonymize Gateway'><i class='glyphicon glyphicon-user' style='font-family:Glyphicons Halflings'></i></a>":
"<a class='my-tool-tip' data-toggle='tooltip' data-placement='left' title='Gateway successfully anonymized' style='cursor: not-allowed' disabled><i class='glyphicon glyphicon-user' style='font-family:Glyphicons Halflings;color:Gray'></i></a>"
               };
            }
         }
],
refresh: function (evt, ui) {
if (ui.source != "flex") {
this.flex();
}
},
flex: { one: true },
height: 'flex',
numberCell: { show: false },
complete: function (event, ui) {
AddRefreshTextInParamQueryGrid();
},
sortModel: { sorter: [{ dataIndx: "hub_name", dir: "up" }], cancel: false, type: "local" },
detailModel: {
collapseIcon: "ui-icon-plus",
expandIcon: "ui-icon-minus",
cache: false,
init: function (ui) {
var rowData = ui.rowData,
rdata = rowData,
dataHubDetailObj = gridDataSourceDetailModel($(this).pqGrid('instance'), rdata),
html = $("#tmpl").html(),
//create new detail place holder
$grid = $("<div tabindex='0'></div>");

dtsDetailObj = gridDTSDetailModel($(this).pqGrid('instance'), rdata),
$grid = $("<div tabindex='1'></div>");

html = html.replace("%=1", "#" + rowData.rowId);
html = html.replace("%=2", "#DTS" + rowData.rowId);
html = html.replace("%=id-1", rowData.rowId);
html = html.replace("%=id-2", "DTS" + rowData.rowId);

$grid.html(html);

$grid.find(".pq-tabs").tabs().on("tabsactivate", onTabsActive);

//append pqGrid in the 2nd tab.
var id = "#" + rowData.rowId;
$("<div/>").appendTo($(id, $grid)).pqGrid(dataHubDetailObj);
$grid.find(id + "> .pq-grid").attr('id', "Tab" + rowData.rowId);
var dtsId = "#DTS" + rowData.rowId;
$("<div/>").appendTo($(dtsId, $grid)).pqGrid(dtsDetailObj);
$grid.find(dtsId + "> .pq-grid").attr('id', "TabDTS" + rowData.rowId);
gridId = rowData.rowId;
return $grid;
}
},
cellClick: function (event, ui) {
if (typeof ui.rowData.pq_detail != 'undefined') {
if ((typeof ui.rowData != 'undefined') && (ui.rowData.pq_detail.show)) {
if (initialisedDataSourceGridIds.indexOf("Tab" +ui.rowData.rowId) < 0) {
initialisedDataSourceGridIds.push("Tab" + ui.rowData.rowId);
}
if (initialisedDTSGridIds.indexOf("TabDTS" + ui.rowData.rowId) < 0) {
initialisedDTSGridIds.push("TabDTS" + ui.rowData.rowId);
}
} else if ((typeof ui.rowData != 'undefined') && (!ui.rowData.pq_detail.show)) {
initialisedDataSourceGridIds.pop("Tab" + ui.rowData.rowId);
initialisedDTSGridIds.pop("TabDTS" + ui.rowData.rowId);
}
}
if (ui.column != undefined && ui.column.dataIndx == 'DeleteDataHub') {
var id = ui.rowData.id, level = "datahub";
if(ui.rowData.status != "Connected") {
var url = "../api/GetDeviceCount/" + updatedEncodeURIComponent(id) + "/" + updatedEncodeURIComponent(level);
var requestResult = Ajax(url);
requestResult.done(function (data) {
if (data == 0) {
var Id = { level: "datahub", datahubId: ui.rowData.id, datasourceId: null, systemId: null, moduleId: null };
ShowDeviceManagementAlert('confirmGatewayDeletion', {"Id":Id, "datahubGridId": datahubGridId });
} else {
ShowDeviceManagementAlert('dataSourceDelete');
}
});
} else {
ShowDeviceManagementAlert('connectedDevice', {"deviceType": "Gateway"});
}
         }
else if (ui.column != undefined && ui.column.dataIndx == "AnonymizeDataHub" && ui.rowData.status.toLowerCase() != 'anonymized') {
var id = ui.rowData.id, level = "datahub";
            var url = "../api/GetAnonymizationRequestStatus/" + updatedEncodeURIComponent(id) + "/" + updatedEncodeURIComponent(level);
ShowLoading("Checking...");
var requestResult = Ajax(url);
requestResult.done(function (data) {
HideLoading();
if (data == 0) {
ShowDeviceManagementAlert('confirmAnonymization', { 'dns_name': ui.rowData.dns_name, "ui":ui })
} else if (data == 1) {
ShowDeviceManagementAlert('anonymizationScheduled',{'dns_name': ui.rowData.dns_name})
} else if (data == 2) {
ShowDeviceManagementAlert('anonymizationCompleted', { 'dns_name': ui.rowData.dns_name })
               } else {
                  alert('There was error while adding Gateway anonymization request. Kindly try after some time.');
               }
            });
         }
}
});
};

63

Help for ParamQuery Pro / Re: Show tabular data in cell hover over

« Last post by paramvir on March 05, 2025, 03:45:07 pm »

Rich html content can be displayed in the cell tooltips by using attr property in column.render callback.

Code: [Select]

render: function( ui ){
   return {
	attr: {
		title: "<b>Rich</b> <i>Text<i>!"
	}
   }
}

and creating pqTooltip in the create callback in main grid options.

Code: [Select]

create: function (evt, ui) {                
        this.widget().pqTooltip();
}

65

Help for ParamQuery Pro / "Loading" box not displayed for Nesting of grids with lazy loading

« Last post by RamC on March 04, 2025, 05:40:29 pm »

Hello,

I have updated PQ Grid to Ver 9.1 from 3.3, and have some nested grids with "remote" Datamodel.
In newer version "Loading" box not displaying for nested grids , I also gone through https://paramquery.com/pro/demos91 and updated the code as well.

Please let me know if i missed any thing or have any other impacts.

Thanks.

67

Suggest new features / An option to automatically set the cell title attribute

« Last post by jplevene on March 01, 2025, 12:13:19 am »

At the moment the only way to do it is in colModel.render:

Code: [Select]

render: function(ui){
	return {
		text: ui["cellData"], // This is not needed, included here for clarity
		attr: 'title="'+ui["cellData"].replace('"',"&quot;")+'"'
	}
}

When the column is narrow and the value is trimmed (if not multiline), the value is cut off, so hovering over to show the full value in the popup is nice for the user.

Also it would be nice to also be able to pass the attr as an object like:

attr: {
"title": "Some message > this message & another bad char",
"data-temp": "Some data variable"
}

EDIT: YOU CAN MAKE ATTR AN OBJECT. I isn't mentioned in the API guide.

69

Suggest new features / Add a resized event

« Last post by jplevene on February 23, 2025, 04:18:31 am »

When the grid resizes, depending on your options like flex, etc, columns and rows get resized and or added to fit inside the grid.

It would be nice to have an event that is fired once all the resizing and render alterations have finished.

Day	Date	Hours
Wed	05-Mar-2025	8.00
Fri	07-Mar-2025	8.00

Recent Posts

Help for ParamQuery Pro / Re: "Loading" box not displayed for Nesting of grids with lazy loading

Help for ParamQuery Pro / Re: "Loading" box not displayed for Nesting of grids with lazy loading

Help for ParamQuery Pro / Re: Show tabular data in cell hover over

Help for ParamQuery Pro / Show tabular data in cell hover over

Help for ParamQuery Pro / "Loading" box not displayed for Nesting of grids with lazy loading

Bug Report / New row comit and pq_detail column

Suggest new features / An option to automatically set the cell title attribute

ParamQuery Pro Evaluation Support / Re: Preventing Row Height Transition When Applying CSS Styles to a Table

Suggest new features / Add a resized event

Suggest new features / Re: Option to allow horizontal scroll bar when needed when scrollModel.autofit=true