Author Topic: linked/url columns break when grouped  (Read 4640 times)

gmswsd

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 40
    • View Profile
linked/url columns break when grouped
« 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>

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5290
    • View Profile
Re: linked/url columns break when grouped
« Reply #1 on: April 13, 2020, 10:05:11 am »
[ Only Pro members may read this post. ]

gmswsd

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 40
    • View Profile
Re: linked/url columns break when grouped
« Reply #2 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>";
            }
        });

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5290
    • View Profile
Re: linked/url columns break when grouped
« Reply #3 on: April 13, 2020, 04:13:52 pm »
[ Only Pro members may read this post. ]

gmswsd

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 40
    • View Profile
Re: linked/url columns break when grouped
« Reply #4 on: April 13, 2020, 07:43:46 pm »
Thanks Paramvir,
That worked perfectly!

gmswsd

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 40
    • View Profile
Re: linked/url columns break when grouped
« Reply #5 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]}
                }
            }
        });

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5290
    • View Profile
Re: linked/url columns break when grouped
« Reply #6 on: April 16, 2020, 09:15:26 am »
[ Only Pro members may read this post. ]
« Last Edit: April 16, 2020, 09:24:46 am by paramvir »

gmswsd

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 40
    • View Profile
Re: linked/url columns break when grouped
« Reply #7 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] ;
                }
            }
        });

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5290
    • View Profile
Re: linked/url columns break when grouped
« Reply #8 on: April 16, 2020, 04:40:16 pm »
[ Only Pro members may read this post. ]

gmswsd

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 40
    • View Profile
Re: linked/url columns break when grouped
« Reply #9 on: April 16, 2020, 04:45:26 pm »
That worked perfectly.
Your the best Paramvir!

gmswsd

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 40
    • View Profile
Re: linked/url columns break when grouped
« Reply #10 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



paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5290
    • View Profile
Re: linked/url columns break when grouped
« Reply #11 on: April 20, 2020, 11:06:27 am »
[ Only Pro members may read this post. ]

gmswsd

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 40
    • View Profile
Re: linked/url columns break when grouped
« Reply #12 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];
                    }
                     */
                }

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5290
    • View Profile
Re: linked/url columns break when grouped
« Reply #13 on: April 21, 2020, 11:59:25 am »
[ Only Pro members may read this post. ]

gmswsd

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 40
    • View Profile
Re: linked/url columns break when grouped
« Reply #14 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