ParamQuery grid support forum
General Category => Help for ParamQuery Pro => Topic started by: gmswsd on April 12, 2020, 11:11:56 pm
-
Hi
Links work great and groupings work great alone.
Combined it creates links columns that are not link columns.
Below is a code example which works fine till grouped.
<!DOCTYPE html>
<html>
<head>
<!--jQuery dependencies-->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<!--PQ Grid files-->
<link rel="stylesheet" href="pqgrid.min.css" />
<link rel="stylesheet" href="pqgrid.ui.min.css" />
<!--office theme-->
<link rel='stylesheet' href='themes/office/pqgrid.css' />
<script src="pqgrid.min.js"></script>
<!--for localization and intellisense -->
<script src="localize/pq-localize-en.js"></script>
<!--for touch devices-->
<script src="pqTouch/pqtouch.min.js"></script>
<!--jsZip for zip and xlsx import/export-->
<script src="jsZip-2.5.0/jszip.min.js"></script>
<style>
*{
font-size:12px;
}
</style>
<script>
function findTitle(data1, val) {
for (var i = 0; i < data1.length; i++) {
if (data1.title === val) return i
}
return ''
}
$(function () {
var groupModel= {
on: true,
summaryInTitleRow: 'all',
showSummary: [true]
};
var data = [
[1, 'Exxon Mobil',"'https://nba.com' target='_blank'> nba.com", 339938.0, 36130.0],
[2, 'Wal-Mart Stores',"'https://espn.com' target='_blank'> espn.com" , 315654.0, 11231.0]
];
var obj = {
numberCell:{resizable:true,title:"#",width:30,minWidth:30},
editor: {type: 'textbox'},
title: "ParamQuery Grid with Array data",
resizable:true,
groupModel: groupModel,
scrollModel:{autoFit:true, theme:true}
};
obj.colModel = [
{ title: "Rank", width: 100, dataType: "integer" },
{ title: "Company", width: 200, dataType: "string" },
{ title: "Subject", width: 200, dataType: "string" },
{ title: "Revenues ($ millions)", width: 150, dataType: "float", format: '$#,###.00' },
{ title: "Profits ($ millions)", width: 150, dataType: "float", format: '$#,###.00'}
];
$.extend(obj.colModel[findTitle(obj.colModel, 'Subject')], {
render: function( ui ){
return "<a href="+ ui.cellData + "</a>";
}
});
obj.dataModel = { data: data };
$("#grid_array").pqGrid(obj);
});
</script>
</head>
<body>
<div id="grid_array" style="margin:100px;"></div>
</body>
</html>
-
Please avoid any html in the json data.
The links can be displayed in normal columns with column.render callback while can be displayed in row grouping columns with column.renderLabel callback.
https://paramquery.com/pro/api#option-column-renderLabel
-
Thanks that got me closer.
Thanks Paramvir,
The html has been moved out of the json like you said.
Now the problem is when grouped the link shows as expected, but in that column above and below where there should be blank cells it gets filled with undefined.
I tried a few combinations of conditions in the render but could not get rid of undefined.
var data = [
[1, 'Exxon Mobil',"nba.com", 339938.0, 36130.0],
[2, 'Wal-Mart Stores',"espn.com" , 315654.0, 11231.0]
];
$.extend(obj.colModel[findTitle(obj.colModel, 'Subject')], {
render: function( ui ){
return "<a href='https://" + ui.cellData + "' target='_blank'>" + ui.cellData + "</a>";
}
});
-
Please use this to exclude undesired values:
render: function( ui ){
if( ui.cellData ){
return "<a href='https://" + ui.cellData + "' target='_blank'>" + ui.cellData + "</a>";
}
}
-
Thanks Paramvir,
That worked perfectly!
-
In order to have this work when grouping with a link I added this
if(!ui.rowData.pq_gtitle) - see code below
How can I show the second part (non link) as the grouping header.
Right now if there is no else it shows the whole line (nba.com:::nba) which is ugly but has the count or if I put an else and just show the second part it shows (nba) but with no number.
var data = [
[1, 'Celtics',"nba.com:::nba", 339938.0, 36130.0],
[2, 'Blazers',"espn.com:::espn" , 315654.0, 11231.0],
[3, 'Pistons',"nba.com:::nba" , 9954.0, 11231.0],
[2, 'Raptors',"nba.com:::nba" , 9954.0, 11231.0]
];
$.extend(obj.colModel[findTitle(obj.colModel, 'Contact Name/Project')], {
render: function( ui ){
if( ui.cellData) {
var aval = ui.cellData.split(':::');
if(!ui.rowData.pq_gtitle){
return "<a href='https://" + aval[0] + "' target='_blank'>" + aval[1] + "</a>";
} else
{ return aval[1]}
}
}
});
-
Please move the else part/logic from render callback to renderLabel callback.
-
Thanks Paramvir,
That works better but it does not show the count of how many are in the group.
$.extend(obj.colModel[findTitle(obj.colModel, 'Subject')], {
render: function( ui ){
if( !ui.rowData.pq_gtitle && ui.cellData) {
var aval = ui.cellData.split(':::');
return "<a href='https://" + aval[0] + "' target='_blank'>" + aval[1] + "</a>";
}
},
renderLabel: function( ui ){
if( ui.rowData.pq_gtitle && ui.cellData) {
var aval = ui.cellData.split(':::');
return aval[1] ;
}
}
});
-
Count is available as ui.rowData.pq_items
return aval[1] + " (" + ui.rowData.pq_items + ")"
-
That worked perfectly.
Your the best Paramvir!
-
This is working great, except when it comes to filtering.
Filtering on linked fields shows the whole value.
Where can I put code to split the string for the filter.
See attached image.
Thanks
-
Filter dropdown is based on pqgrid, so its column renderer can also be customized.
selectGridObj: function(ui){
//add renderLabel to first column.
ui.obj.colModel[0].renderLabel = function( ui ){
///add custom logic here.
}
}
Example of filter dropdown renderer in ShipCountry column: https://paramquery.com/pro/demos/filter_custom
-
Thanks Paramvir,
I could not get that to work.
Tried a number of combinations below and then some.
It seems that it either ignores the code or it blanks everything out when filter is equals.
$.extend(obj.colModel[findTitle(obj.colModel, 'Subject')], {
render: function (ui) {
if (!ui.rowData.pq_gtitle && ui.cellData) {
var aval = ui.cellData.split(':::');
return "<a href='https://" + aval[0] + "' target='_blank'>" + aval[1] + "</a>";
}
},
renderLabel: function (ui) {
if (ui.rowData.pq_gtitle && ui.cellData) {
var aval = ui.cellData.split(':::');
return aval[1] + " (" + ui.rowData.pq_items + ")";
}
},
selectGridObj: function (ui) {
//return "xxx";
//ui.renderLabel = "xxx";
//ui.obj.colModel[findTitle(obj.colModel, 'Subject')].renderLabel = "xxx";
/*
ui.renderLabel = function( ui ){
ui.obj.colModel[2].renderLabel =function( ui ){
var aval = ui.cellData.split(':::');
return aval[1];
}
*/
}
-
selectGridObj is a property of column.filter
Your code is being ignored because you have set selectGridObj as direct property of column.
API: https://paramquery.com/pro/api#option-column-filter
Example of usage of selectGridObj in ShipCountry column: https://paramquery.com/pro/demos/filter_custom
Please share a jsfiddle if you are still facing difficulty.
-
Thank Paramvir,
Still can not get it to work.
I tried with filter: in one of my iterations.
Here is a link to the jsfiddle.
https://jsfiddle.net/WebSalesDesign/0n95mgdp/5/
Also if extend gets the correct column, is it needed again in the filter for the ui?
ui.obj.colModel[findTitle(obj.colModel, 'Subject')].renderLabel
or would
ui.renderLabel be the same
-
ui.obj inside selectGridObj points to initialization object of pqgrid in filter dropdown.
filter: {
selectGridObj: function(ui) {
ui.obj.colModel[0].renderLabel = function(ui2) {
if (ui2.cellData) {
var aval = ui2.cellData.split(':::');
return aval[1];
}
}
}
}
https://jsfiddle.net/wqjo91xv/
-
Thanks Paramvir,
That worked perfectly.
-
Hi Paramvir,
That worked when the links where the same, however if the links are different it then groups and filters by the whole line.
Is it possible to sort on Link Text and not the url?
So it would group all nba together even though they have different urls.
var data = [
[1, 'Celtics',"nba.com/celtics:::nba", 339938.0, 36130.0],
[2, 'Blazers',"espn.com:::espn" , 315654.0, 11231.0],
[3, 'Pistons',"nba.com/pistons:::nba" , 9954.0, 11231.0],
[2, 'Raptors',"nba.com/raptors:::nba" , 9954.0, 11231.0]
];
https://jsfiddle.net/763518cL/
-
Is it possible to sort on Link Text and not the url?
Grouping takes place by cell data content rather than cell renderers so you need to reorder the data such that link text is placed before url.
something like "nba:::celtics/nba.com"
-
Thanks Paramvir,
Unfortunately, still doesn't group properly.
There was no difference putting it the way you suggested "nba:::celtics/nba.com"
https://jsfiddle.net/WebSalesDesign/hx1kz6fc/1/
-
Ok, if you mean to group "nba" together like
nba (3)
espn (1)
then you need to keep data like
var data = [
[1, 'Celtics', "nba", "nba.com/celtics:::nba", 339938.0, 36130.0],
[2, 'Blazers', "espn", "espn.com:::espn" , 315654.0, 11231.0],
[3, 'Pistons',"nba", "nba.com/pistons:::nba" , 9954.0, 11231.0],
[2, 'Raptors', "nba", "nba.com/raptors:::nba" , 9954.0, 11231.0]
];
keep the 4th column hidden and use values from 4th column in the renderer of 3rd column.
-
Hi, I made the render the link column and it groups the way I want, but then it just shows the information from "subject" and not the "subject-word" information that I want it to show. It also is not a clickable link anymore. Is there a way to have it group the way I want, and show the information from 'subject-word' and be a clickable link?
https://jsfiddle.net/xvpu03kb/
-
I guess we already covered how to use render and renderLabel callbacks in the previous posts, only difference now being that data has to be used from another column.
Is there a change in your requirements.
Can you please share a screenshot of the way you want to display data.