[parthrawalParticipant]

Thanks I think this should do it

[parthrawalParticipant]

Thanks for the reply. It really helped.

[parthrawalParticipant]

Sorry guys,

I have figured out the issue. Instead of changing event. I need to use Grid Cell changed event. It did the trick!

Thanks again!!

[parthrawalParticipant]

Thanks I really appreciate this. However, i have created an alternative based on my observation. If i do not have any groups in grid then tabs, click and everything works just fine. so, created 2 buttons i.e. group, ungroup. to edit grid i make sure user first click on ungroup button and then edit the grid.

Hope this helps someone

[parthrawalParticipant]

Thanks for the reply. but is there any way i can avoid this ?
Users are not able to edit as it keeps going to the top.
Is there anyway i can stop this behaviour ?

[parthrawalParticipant]

Hi

I have made this fiddle, it’s not perfect but it might give you some idea

https://jsfiddle.net/P3Dev/v1jf7os2/28/

If you want to reproduce go to the middle of the grid and click cell and then place TAB, grid will jump back to top again

[parthrawalParticipant]

Hi,
I have posted the code also, Can you help me now ?

[parthrawalParticipant]

All Column creation Code

function createAllColumnsArray(curGridId,month) {
    var finalArray = new Array();
    var _cellsrenderer = function (row, column, value, defaultRender, column, rowData) {
        if (value.toString().indexOf("Sum") >= 0) {
            return defaultRender.replace("Sum:", "");
        }
    };
    finalArray.push(
        { text: 'Parent', datafield: 'Parent', width: 100, pinned: true, hidden: true },
        { text: 'Category', datafield: 'Category', width: 100, pinned: true, hidden: true },
        { text: 'Title', datafield: 'Child', width: 170, pinned: true,draggable:true },
        { text: '', datafield: 'img', width: 20,cellclassname:'comment',hidden:true,
            createwidget: function (row, column, value, htmlElement) {
                var datarecord = value;
                var imgurl = '../SiteAssets/PortfolioGrid/images/card.png';
                var img = '<img style="margin-top: 4px;" height="16" width="16" src="' + imgurl + '"/>';
                var button = $("<div style='border:none;'>" + img + "<div class='buttonValue'>" + value + "</div></div>");
                $(htmlElement).append(button);
                button.jqxButton({ height: '100%', width: '100%' });
                button.click(function (event) {
                    var clickedButton = button.find(".buttonValue")[0].innerHTML;
                    // show the popup window.
                    var CurrentDate = moment();
                    $("#Month").val(CurrentDate.format('MMM')+"-"+CurrentDate.format('YYYY'));
                    var Name= row.bounddata.Parent+"."+row.bounddata.Category+"."+row.bounddata.Child;
                    $("#Title").val(Name);
                    $("#popupWindow").jqxWindow('show');
                });
            },
            initwidget: function (row, column, value, htmlElement) {
                var imgurl = '../SiteAssets/PortfolioGrid/images/card.png';
                $(htmlElement).find('.buttonValue')[0].innerHTML = value;
                $(htmlElement).find('img')[0].src = imgurl;
            }
        },
        {text: 'Comment', datafield: 'Comment', width: 170, pinned: true,cellclassname:"comment",hidden:true }
    );
    //////////////////////////////////////////////edited cell color change//////////////////////////////////////////////
    var cellclass = function (row, datafield, value, rowdata) {
        for (var i = 0; i < editedCells.length; i++) {
            if (editedCells[i].row == row && editedCells[i].column == datafield) {
                return "editedCell";
            }
        }
    }

    var cellvaluechanging = function (row, datafield, columntype, oldvalue, newvalue) {
        if (oldvalue != newvalue) {
            editedCells.push({ row: row, column: datafield });
        }
    };
    editedCells = new Array();
    //////////////////////////////////Edited Cell Color Change////////////////////////////////////////////////////////
    //new Function('row', 'column', 'value', 'defaultRender', 'column', 'rowData', 'return defaultRender');
    var _cellsrenderer = function (row, column, value, defaultRender, column, rowData) {
        if (value.toString().indexOf("Sum") >= 0) {
            return defaultRender.replace("Sum:", "");
        }
    };

    for (var iMonth = 0; iMonth < month.length; iMonth++) {
        var monthColumns = {}
        monthColumns['text'] = month[iMonth];
        monthColumns['datafield'] = month[iMonth]; //+ iMonth.toString();
        monthColumns['map'] = iMonth.toString();
        monthColumns['width'] = 125;
        monthColumns['cellsalign'] = 'Right';
        monthColumns['aggregates'] = ["sum"];//[{'Sum': aggregated1}];
        monthColumns['cellsrenderer'] = _cellsrenderer;
        monthColumns['aggregatesrenderer'] = renderaggregated;
        monthColumns['cellsformat'] = 'c2';
        monthColumns['draggable'] = false;
        monthColumns['groupable']=false;
        monthColumns['cellclassname'] = cellclass;
        monthColumns['cellvaluechanging'] = cellvaluechanging;
        monthColumns['type']='number';
        //monthColumns['columntype'] = 'numberinput';
        finalArray.push(monthColumns);
    }
    return finalArray;
}

Grid Initialisation

var dataAdapter = new $.jqx.dataAdapter(source, {
        loadComplete: function (data) { },
        loadError: function (xhr, status, error) { }
    });

    var groupsrenderer = function (text, group, expanded, data) {
        var number = dataAdapter.formatNumber(group, data.groupcolumn.cellsformat);
        var text = data.groupcolumn.text + ': ' + number;
        return '<div style="position: absolute;"><span style="font-weight: bold;">' + number + '</span></div>';
    }
    $(curGridId).jqxGrid(
        {
            width: '99%',
            height: '99%',
            source: dataAdapter,
            groupable: true,
            groupsrenderer: groupsrenderer,
            groups: ['Parent', 'Category'],
            showgroupsheader: false,
            editable: true,
            theme: 'energyblue',
            selectionmode: 'multiplecellsextended',
            showgroupaggregates: false,
            showstatusbar: true,
            showaggregates: true,
            statusbarheight: 25,
            columns: allColumnsArray,
            autowidth: false,
            editmode: 'click',
            localization:{ currencysymbol: projectCurrency},
            ready: function () {
                $(curGridId).jqxGrid('hidecolumn', 'Parent');
                $(curGridId).jqxGrid('hidecolumn', 'Category');
                var rows = $(curGridId).jqxGrid('getrows');
                var columns = $(curGridId).jqxGrid("columns").records;
                //in case of dates are extended we need to populate grid with 0s
                $.each(rows,function(r,row){
                    $.each(columns,function(c,column){
                        var colName=column.datafield;
                        var colval=$(curGridId).jqxGrid('getcellvalue',row.uid,colName);
                        try{
                            if(colName.indexOf("-")>-1 && colName !="img" && colName!="ID"){
                                if(colval==null && colval==undefined){
                                    $(curGridId).jqxGrid('setcellvalue', row.uid,colName, 0);
                                }
                            }
                        }catch(error){}
                    });
                });
                //in case of project exists in list but Budget data does not exists then disable grid
                if(curGridId.indexOf("Budget")>-1 && jsonData==null){
                    var columns = $(curGridId).jqxGrid("columns").records;
                    for (var i = 0; i < columns.length; i++) {
                        var datafield = columns[i].datafield
                        $(curGridId).jqxGrid('setcolumnproperty', datafield, 'editable', false);
                    }
                }
            }
        });
    $(curGridId).jqxGrid('expandallgroups');
    $(curGridId).jqxGrid('setcolumnproperty', 'Child', 'editable', false);

[parthrawalParticipant]

Hi Guys,

Can someone help me please. it’s bit urgent. Yavor can you please help me create fiddle which i can modify to create same scenario ?

[parthrawalParticipant]

My Grid has selectionmode: ‘multiplecellsadvanced’

Will this help ?

[parthrawalParticipant]

Hi Hristo

Any thoughts ?

[parthrawalParticipant]

[parthrawalParticipant]

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….

[parthrawalParticipant]

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>

[parthrawalParticipant]

Hi

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

[Author]

Posts