« previous next »
Pages: [1] 2

Author Topic: linked/url columns break when grouped  (Read 7380 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>
Logged

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6210
    • View Profile
Re: linked/url columns break when grouped
« Reply #1 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
Logged

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>";
            }
        });
Logged

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6210
    • View Profile
Re: linked/url columns break when grouped
« Reply #3 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>";
       }
}
Logged

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!
Logged

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]}
                }
            }
        });
Logged

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6210
    • View Profile
Re: linked/url columns break when grouped
« Reply #6 on: April 16, 2020, 09:15:26 am »
Please move the else part/logic from render callback to renderLabel callback.
« Last Edit: April 16, 2020, 09:24:46 am by paramvir »
Logged

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] ;
                }
            }
        });
Logged

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6210
    • View Profile
Re: linked/url columns break when grouped
« Reply #8 on: April 16, 2020, 04:40:16 pm »
Count is available as ui.rowData.pq_items

return aval[1] + " (" + ui.rowData.pq_items + ")"
Logged

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!
Logged

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


Logged

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6210
    • View Profile
Re: linked/url columns break when grouped
« Reply #11 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
Logged

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];
                    }
                     */
                }
Logged

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6210
    • View Profile
Re: linked/url columns break when grouped
« Reply #13 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.
Logged

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

Logged
Pages: [1] 2
« previous next »