ParamQuery

General Category => Help for ParamQuery Pro => Topic started by: gmswsd on April 12, 2020, 11:11:56 pm

Title: linked/url columns break when grouped
Post 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>
Title: Re: linked/url columns break when grouped
Post by: paramvir on April 13, 2020, 10:05:11 am
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
Title: Re: linked/url columns break when grouped
Post by: gmswsd on April 13, 2020, 10:50:56 am
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>";
            }
        });
Title: Re: linked/url columns break when grouped
Post by: paramvir on April 13, 2020, 04:13:52 pm
Please use this to exclude undesired values:

Code: [Select]
render: function( ui ){
       if( ui.cellData ){
              return "<a href='https://" + ui.cellData + "' target='_blank'>" + ui.cellData + "</a>";
       }
}
Title: Re: linked/url columns break when grouped
Post by: gmswsd on April 13, 2020, 07:43:46 pm
Thanks Paramvir,
That worked perfectly!
Title: Re: linked/url columns break when grouped
Post by: gmswsd on April 16, 2020, 01:50:27 am
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]}
                }
            }
        });
Title: Re: linked/url columns break when grouped
Post by: paramvir on April 16, 2020, 09:15:26 am
Please move the else part/logic from render callback to renderLabel callback.
Title: Re: linked/url columns break when grouped
Post by: gmswsd on April 16, 2020, 10:28:17 am
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] ;
                }
            }
        });
Title: Re: linked/url columns break when grouped
Post by: paramvir on April 16, 2020, 04:40:16 pm
Count is available as ui.rowData.pq_items

return aval[1] + " (" + ui.rowData.pq_items + ")"
Title: Re: linked/url columns break when grouped
Post by: gmswsd on April 16, 2020, 04:45:26 pm
That worked perfectly.
Your the best Paramvir!
Title: Re: linked/url columns break when grouped
Post by: gmswsd on April 19, 2020, 10:22:15 pm
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


Title: Re: linked/url columns break when grouped
Post by: paramvir on April 20, 2020, 11:06:27 am
Filter dropdown is based on pqgrid, so its column renderer can also be customized.

Code: [Select]
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
Title: Re: linked/url columns break when grouped
Post by: gmswsd on April 21, 2020, 09:13:35 am
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];
                    }
                     */
                }
Title: Re: linked/url columns break when grouped
Post by: paramvir on April 21, 2020, 11:59:25 am
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.
Title: Re: linked/url columns break when grouped
Post by: gmswsd on April 21, 2020, 10:04:27 pm
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

Title: Re: linked/url columns break when grouped
Post by: paramvir on April 21, 2020, 10:34:11 pm
ui.obj inside selectGridObj points to initialization object of pqgrid in filter dropdown.

Code: [Select]
        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/
Title: Re: linked/url columns break when grouped
Post by: gmswsd on April 21, 2020, 11:01:32 pm
Thanks Paramvir,
That worked perfectly.
Title: Re: linked/url columns break when grouped
Post by: gmswsd on April 23, 2020, 04:45:35 am
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/
Title: Re: linked/url columns break when grouped
Post by: paramvir on April 23, 2020, 02:17:54 pm
Quote
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"
Title: Re: linked/url columns break when grouped
Post by: gmswsd on April 23, 2020, 07:22:19 pm
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/
Title: Re: linked/url columns break when grouped
Post by: paramvir on April 23, 2020, 10:30:52 pm
Ok, if you mean to group "nba" together like

nba (3)
espn (1)

then you need to keep data like

Code: [Select]
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.
Title: Re: linked/url columns break when grouped
Post by: gmswsd on April 27, 2020, 10:01:48 pm
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/
Title: Re: linked/url columns break when grouped
Post by: paramvir on April 28, 2020, 11:02:21 am
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.