jQWidgets Forums

This topic contains 9 replies, has 2 voices, and was last updated by Hristo 5 years, 1 month ago.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Group Total Position with Scroll bar Posts

February 16, 2020 at 11:35 am Group Total Position with Scroll bar #108096

Participant

Hi
I am using this Exampleto create totals for the dynamic columns in Grid and i could successfully create the total as shown below, However, Total values are positioned fixed and does not move with scroll bar in Grid

Grid with Group Total

February 16, 2020 at 11:37 am Group Total Position with Scroll bar #108097

parthrawal

Participant

February 24, 2020 at 9:33 am Group Total Position with Scroll bar #108187

Hristo

Participant

Hello parthrawal,

Could you provide us with one simplified example that demonstrates your case?
As I understand you, in your case use custom created elements and you wondering why the behavior is not appropriate.
If you want to create an example you could use the online editor here: jseditor.
I look forward to hearing from you.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

April 29, 2020 at 5:10 pm Group Total Position with Scroll bar #111861

parthrawal

Participant

I figured the issue, it seems if column is pinned=true then group total header does not move. but if i make it pinned=false then it works okay and total moves when I scroll to right or left. however, group total shows for the grid columns which are part of screen and when move it does not have totals. Please check jsfiddle here https://jseditor.io/?key=grid-ver-2

April 30, 2020 at 6:18 am Group Total Position with Scroll bar #111865

parthrawal

Participant

some how, not able to share code over jseditor.


<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to display nested Grid plugins.</title>
    <link rel="stylesheet" href="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <script type="text/javascript" src="https://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var _curGridId ="#grid"
            var data=[{"Parent":"CAPEX","Child":"Salaried","Category":"Labor","img":"Salaried","Comment":"","June-20190":0},{"Parent":"CAPEX","Child":"Consultant","Category":"Labor","img":"Consultant","Comment":"","June-20190":0},{"Parent":"CAPEX","Child":"Construction","Category":"Non-Labor","img":"Construction","Comment":"","June-20190":0},{"Parent":"CAPEX","Child":"Equipment","Category":"Non-Labor","img":"Equipment","Comment":"","June-20190":0},{"Parent":"CAPEX","Child":"Technology - Hardware & Software","Category":"Non-Labor","img":"Technology - Hardware & Software","Comment":"","June-20190":0},{"Parent":"CAPEX","Child":"Other","Category":"Non-Labor","img":"Other","Comment":"","June-20190":0},{"Parent":"OPEX","Child":"Salaried","Category":"Labor","img":"Salaried","Comment":"","June-20190":0},{"Parent":"OPEX","Child":"Purchased Services","Category":"Labor","img":"Purchased Services","Comment":"","June-20190":0},{"Parent":"OPEX","Child":"Technology - Hardware & Software","Category":"Non-Labor","img":"Technology - Hardware & Software","Comment":"","June-20190":0},{"Parent":"OPEX","Child":"Medical/Surgical/Drug Supplies","Category":"Non-Labor","img":"Medical/Surgical/Drug Supplies","Comment":"","June-20190":0},{"Parent":"OPEX","Child":"Office and General Supplies","Category":"Non-Labor","img":"Office and General Supplies","Comment":"","June-20190":0},{"Parent":"OPEX","Child":"Other","Category":"Non-Labor","img":"Other","Comment":"","June-20190":0},{"Parent":":REVEX","Child":"Expense Reduction","Category":"REVEX","img":"Expense Reduction","Comment":"","June-20190":0},{"Parent":":REVEX","Child":"Revenue Enhancement","Category":"REVEX","img":"Revenue Enhancement","Comment":"","June-20190":0}];
            var source = { localdata: data, datatype: "array" };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
             var groupsrenderer = function (text, group, expanded, data) {
        var _grptext = dataAdapter.formatNumber(group, data.groupcolumn.cellsformat);
        var _columns=$(_curGridId).jqxGrid("columns").records;
        var text = data.groupcolumn.text + _grptext;
        var subItems = data.subItems.length;
        var html='<div class="jqx-grid-groups-row" style="position: relative;">'+text.replace(':','');
        var totalSum = 0;
        var totalWidth=160;
        if(group=="Labor" || group=="Non-Labor" || group=="CAPEX" || group==":REVEX" || group=="OPEX"){
            totalWidth=160;
        }
        else if(group=="REVEX"){
            totalWidth=190;
        }
        else{
            totalWidth=-160;
        }
        
       //Below to populate Sub group vaues i.e. Labor/ Non-Labor
        if(_grptext!="CAPEX" && _grptext!="OPEX" && _grptext!=":REVEX"){
            $.each(_columns,function(i,col){
                if(col.datafield!=null && (col.datafield.indexOf('-')>0 || col.datafield=="Total")){
                    data.subItems.forEach(function(element){
                        totalSum += element[col.datafield];
                    });                    
                    if(group=="Labor" && col.datafield=="Total"){
                        totalWidth=totalWidth+140;
                    }
                    else if(group=="Non-Labor" && col.datafield=="Total"){
                        totalWidth=totalWidth+105;
                    }
                    else if(group=="REVEX" && col.datafield=="Total"){
                        totalWidth=totalWidth+105;
                    }
                    else{
                        totalWidth=totalWidth+1;
                    }
                    html=html +"<span style='text-align:right;height: 100%; display: inline-block;background-color:#e5edf9;position: relative;width: 125px;text-overflow: ellipsis;overflow: hidden; left:"+totalWidth.toString()+"px'>$"+totalSum.toFixed(2)+"</span>"
                    totalSum=0;
                }
            });            
        }
        //Below to populate with the Total column with values
        if(_grptext=="CAPEX" || _grptext=="OPEX" || _grptext==":REVEX"){
            $.each(_columns,function(i,col){
                if((col.datafield=="Total")){
                    $.each(data.subGroups,function(i,grp){               
                        grp.subItems.forEach(function(element){
                            totalSum += element[col.datafield];
                        });                        
                    });
                    if(_grptext=="OPEX"){
                        totalWidth=totalWidth+170;
                    }
                    else{
                        totalWidth=totalWidth+165;
                    }
                    html=html +"<span style='text-align:right;height: 100%; display: inline-block;background-color:#e5edf9;position: relative;width: 125px;text-overflow: ellipsis;overflow: hidden; left:"+totalWidth.toString()+"px'>$"+totalSum.toFixed(2)+"</span>"
                    totalSum=0;
                }
            }); 
        }
        
        return html+'</div>';   
    }
            // creage grid
            $("#grid").jqxGrid(
            {
                width: '99%',
                height: '99%',
                source: dataAdapter,
                groupable: true,
                groupsrenderer: groupsrenderer,
                groups: ['Parent', 'Category'],
                showgroupsheader: false,
                editable: true,
                theme: 'energyblue',
                selectionmode: 'singlecell',
                enabletooltips:true,
                showgroupaggregates: false,
                showstatusbar: true,
                showaggregates: false,
                statusbarheight: 25,
                autowidth: false,
                editmode: 'click',
                ready: function () {},
                columns:[{"text":"Title","datafield":"Parent","width":100,"pinned":false,"hidden":true},
                         {"text":"","datafield":"Category","width":100,"pinned":false,"hidden":true},
                         {"text":"","datafield":"Child","width":170,"pinned":false},
                         {"text":"","datafield":"img","width":20,"cellclassname":"comment"},
                         {"text":"Comment","datafield":"Comment","width":170,"pinned":false,"cellclassname":"comment"},
                         {"text":"Total","datafield":"Total","width":125,"pinned":true,"cellsformat":"c2","cellsalign":"Right","align":"right","aggregates":[{}]},
                         {"text":"June-2019","datafield":"June-20190","map":"0","width":125,"cellsalign":"Right","align":"right","aggregates":[{}],"cellsformat":"c2","draggable":false,"groupable":true},
                         {"text":"Jul-2019","datafield":"Jul-20190","map":"0","width":125,"cellsalign":"Right","align":"right","aggregates":[{}],"cellsformat":"c2","draggable":false,"groupable":true},
                         {"text":"Aug-2019","datafield":"Aug-20190","map":"0","width":125,"cellsalign":"Right","align":"right","aggregates":[{}],"cellsformat":"c2","draggable":false,"groupable":true},
                         {"text":"Spet-2019","datafield":"Sep-20190","map":"0","width":125,"cellsalign":"Right","align":"right","aggregates":[{}],"cellsformat":"c2","draggable":false,"groupable":true},
                         {"text":"Oct-2019","datafield":"Oct-20190","map":"0","width":125,"cellsalign":"Right","align":"right","aggregates":[{}],"cellsformat":"c2","draggable":false,"groupable":true},
                         {"text":"Nov-2019","datafield":"Nov-20190","map":"0","width":125,"cellsalign":"Right","align":"right","aggregates":[{}],"cellsformat":"c2","draggable":false,"groupable":true}
                         ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="grid">
    </div>
</body>
</html>

April 30, 2020 at 9:52 am Group Total Position with Scroll bar #111869

Hristo

Participant

Hello parthrawal,

Thank you for the example, the jseditor example works, too.
Could you clarify it, what you mean about the “Total” column?
Do you need to visualize some data there?
Please, provide us with more details about your final goal.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

April 30, 2020 at 12:43 pm Group Total Position with Scroll bar #111871

parthrawal

Participant

Thanks for the prompt reply. If you notice, Group total line is limited to the screen which we see, it does not extend
What changes i should make so it extends for whole line….

Group Total line

April 30, 2020 at 12:46 pm Group Total Position with Scroll bar #111874

parthrawal

Participant

Group total not extending for whole line

May 1, 2020 at 3:47 pm Group Total Position with Scroll bar #111879

parthrawal

Participant

Hi Hristo

Any thoughts ?

May 5, 2020 at 9:03 am Group Total Position with Scroll bar #111907

Hristo

Participant

Hello parthrawal,

There is a lot of customization.
Also, I would like to mention the style settings are a personal choice.
I try to create one fast example and it shows text fine, just background color is a crop to the initially visible columns.
Please, take a look at this example.
You could contact the Sales Department (sales@jqwidgets.com) with this request.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.