Jqgrid Free : Help On Design Of Handling Multiple Yearly Calendars With Monthly Breakdown Data

As a side project, I'm writing a custom tailored resource management web app which will allow project managers within a company to input resources time allocation as a monthly brea

Solution 1:

The main problem is the content/format of input data, which you have. For example, if the input data are already prepared for displaying in jqGrid like

vardata = [
        {code:"A", name:"Project A",
            jan2017:1, feb2017:0, mar2017:0, apr2017:0,
            may2017:0, jun2017:0, jul2017:0, aug2017:0,
            sep2017:0, oct2017:0, nov2017:0, dec2017:1},
        {code:"A", name:"Project A",
            jan2017:1, feb2017:1, mar2017:0, apr2017:0,
            may2017:1, jun2017:0, jul2017:0, aug2017:0,
            sep2017:0, oct2017:1, nov2017:0, dec2017:0}
    ];

then you can create the colModel directly. It could be something like

colModel: [
    { name: "code", label: "Code", width: 50, align: "center" },
    { name: "name", label: "Name", width: 70 },
    { name: "jan2017", label: "Jan", template: intTemplate },
    { name: "feb2017", label: "Feb", template: intTemplate },
    { name: "mar2017", label: "Mar", template: intTemplate },
    { name: "apr2017", label: "Apr", template: intTemplate },
    { name: "may2017", label: "May", template: intTemplate },
    { name: "jun2017", label: "Jun", template: intTemplate },
    { name: "jul2017", label: "Jul", template: intTemplate },
    { name: "aug2017", label: "Aug", template: intTemplate },
    { name: "sep2017", label: "Sep", template: intTemplate },
    { name: "oct2017", label: "Oct", template: intTemplate },
    { name: "nov2017", label: "Nov", template: intTemplate },
    { name: "dec2017", label: "Dec", template: intTemplate },
    { name: "jan2018", label: "Jan", template: intTemplate },
    { name: "feb2018", label: "Feb", template: intTemplate },
    { name: "mar2018", label: "Mar", template: intTemplate },
    { name: "apr2018", label: "Apr", template: intTemplate },
    { name: "may2018", label: "May", template: intTemplate },
    { name: "jun2018", label: "Jun", template: intTemplate },
    { name: "jul2018", label: "Jul", template: intTemplate },
    { name: "aug2018", label: "Aug", template: intTemplate },
    { name: "sep2018", label: "Sep", template: intTemplate },
    { name: "oct2018", label: "Oct", template: intTemplate },
    { name: "nov2018", label: "Nov", template: intTemplate },
    { name: "dec2018", label: "Dec", template: intTemplate }
]

where the column template is, for example, the following

varintTemplate= {
        width:20, template:"integer",
        align:"center", editable:true
    };

The demo https://jsfiddle.net/d8auuc5r/31/ demonstrates the approach.

Another common case: you have input data, which correspond an item, which describes the resource of a project in a month. Something like

{code:"A", name:"Project A", year: 2017, month: 2, value: 3}

or like

{code:"A", name:"ProjectA", year:2017, month:2, week:1, value:1},
{code:"A", name:"ProjectA", year:2017, month:2, week:2, value:2}

The week or an additional fields could specify every resource more exactly. In the way one will have more as one item for a {code, name, year, month} combination. jqPivot will first of all sort the input data by properties, which you specifies, then group there and finally the value of some properties (value property in above example) will be aggregated with respect of some aggregation function, for example sum function.

jqPivot allows generates new data and the corresponding colModel. Then it calls setGroupHeaders to create grouping headers and optionally (if frozenStaticCols: true is used) it calls setFrozenColumns to make first columns frozen. The demo https://jsfiddle.net/d8auuc5r/76/ shows both approaches. It uses the following code:

$("#grid2").jqGrid("jqPivot",input, {
    xDimension: [
        { dataName:"name", width:70, label:"Name" },
        { dataName:"code", width:50, align:"center",
            skipGrouping:true, label:"Code" }
    ],
    yDimension: [
        { dataName:"year" },
        { dataName:"month", sorttype:"integer",
            label:function(options) { returnmonthNames[options.yData-1]; }
        }
    ],
    aggregates: [
        {
            member:"value",
            aggregator:"sum",
            template:"integer",
            align:"center",
            width:20,
            editable:true
        }
    ],
    frozenStaticCols:true,
    useColSpanStyle:true
},
{
    cmTemplate: { autoResizable:true },
    autoResizing: { compact:true },
    pager:true,
    width:360,
    iconSet:"fontAwesome",
    caption:"Pivot test",
    shrinkToFit:false,
    viewrecords:false,
    inlineEditing: { keys:true },
    navOptions: { add:false, edit:false, del:false, search:false },
    inlineNavOptions: { add:true, edit:true },
    onInitGrid:function() {
        var$self=$(this),
            p=$self.jqGrid("getGridParam"),
            toRotate= [], i;for(i=2;i<p.colModel.length;i++) {
            toRotate.push(p.colModel[i].name);
        }

        $self.jqGrid("rotateColumnHeaders", toRotate);
    }
}).jqGrid("navGrid").jqGrid("inlineNav");

where

varinput= [
        {code:"A", name:"ProjectA", year:2017, month:1, value:1},
        {code:"A", name:"ProjectA", year:2017, month:2, value:2},
        {code:"A", name:"ProjectA", year:2017, month:2, value:0},
        {code:"A", name:"ProjectA", year:2017, month:3, value:1},
        {code:"A", name:"ProjectA", year:2017, month:4, value:0},
        {code:"A", name:"ProjectA", year:2017, month:5, value:1},
        {code:"A", name:"ProjectA", year:2017, month:6, value:0},
        {code:"A", name:"ProjectA", year:2017, month:7, value:0},
        {code:"A", name:"ProjectA", year:2017, month:8, value:0},
        {code:"A", name:"ProjectA", year:2017, month:9, value:0},
        {code:"A", name:"ProjectA", year:2017, month:10, value:1},
        {code:"A", name:"ProjectA", year:2017, month:11, value:0},
        {code:"A", name:"ProjectA", year:2017, month:12, value:1},
        {code:"A", name:"ProjectA", year:2018, month:1, value:1},
        {code:"A", name:"ProjectA", year:2018, month:2, value:0},
        {code:"A", name:"ProjectA", year:2018, month:3, value:1},
        {code:"A", name:"ProjectA", year:2018, month:4, value:0},
        {code:"A", name:"ProjectA", year:2018, month:5, value:1},
        {code:"A", name:"ProjectA", year:2018, month:6, value:0},
        {code:"A", name:"ProjectA", year:2018, month:7, value:0},
        {code:"A", name:"ProjectA", year:2018, month:8, value:0},
        {code:"A", name:"ProjectA", year:2018, month:9, value:0},
        {code:"A", name:"ProjectA", year:2018, month:10, value:1},
        {code:"A", name:"ProjectA", year:2018, month:11, value:0},
        {code:"A", name:"ProjectA", year:2018, month:12, value:1},
    ],monthNames= [
        "Jan", "Feb", "Mar", "Apr", "May", "Jun", 
        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
    ];

One will have some problems with editing such grid, because the columns will be generated dynamically. I just want to explain main ideas of jqPivot and not explain here all features of jqPivot and free jqGrid in general.