Created a jqGrid builder object. I'm not sure where I should put some common methods of the built objects

Question

I have an object, WorkflowGridBuilder, which is responsible for building a jqGrid object and decorating it appropriately based on the type of grid being built.

Here is my builder:

var WorkflowGridBuilder;

$(WorkflowGridBuilder = function () {
    'use strict';

    function buildGrid(data) {
        var grid = $('#' + data.gridElementID);
        var gridPager = $('#' + data.gridPagerElementID);

        grid.jqGrid(
            $.extend({
                datatype: 'local',
                gridview: true,
                height: 'auto',
                pager: gridPager,
                viewrecords: true,
                multiselect: true,
                minHeight: 350,
                caption: data.defaultCaption,
                shrinkToFit: false,
                loadError: function (error) {
                    console.error(error);
                },
                ondblClickRow: function (rowid) {
                    $(this).trigger('gridOnDblClickRow', $(this).getRowData(rowid));
                }
            }, data)
        );

        grid.getSelectedRows = function () {
            var selectedRows = [];

            $.each(grid.getGridParam('selarrrow'), function () {
                selectedRows.push(grid.getRowData(this));
            });

            return selectedRows;
        };

        return grid;
    }

    return {
        buildOrdersGrid: function () {
            var ordersGrid = buildGrid({
                gridElementID: 'OrdersGrid',
                gridPagerElementID: 'OrdersGridPager',
                colNames: ['Order ID', 'Project Subcode', 'Incident Number', 'Cost Center', 'Name', 'Customer'],
                colModel: [
                    { name: 'ID', hidden: true },
                    { name: 'ProjectSubcode' },
                    { name: 'IncidentNumber' },
                    { name: 'CostCenter' },
                    { name: 'Name' },
                    { name: 'Customer' }
                ],
                defaultCaption: 'Orders: no filter applied'
            });
            return ordersGrid;
        },

        buildTaskGrid: function () {
            var tasksGrid = buildGrid({
                gridElementID: 'TasksGrid',
                gridPagerElementID: 'TasksGridPager',
                colNames: ['Order', 'Task ID', 'Task #', 'Type', 'Status', 'Assignee', 'Current Location', 'Dest Location', 'Change No', 'Net Patched', 'SAN Patched'],
                colModel: [
                    { name: 'Order' },
                    { name: 'ID', hidden: true },
                    { name: 'TaskNo' },
                    { name: 'Type' },
                    { name: 'Status' },
                    { name: 'Assignee' },
                    { name: 'CurrentLocation' },
                    { name: 'DestLocation' },
                    { name: 'ChangeNo' },
                    { name: 'NetPatched' },
                    { name: 'SANPatched' }
                ],
                defaultCaption: 'Tasks: no filter applied',
                //Decorate with task-specific properties.
                grouping: true,
                groupingView: {
                    groupField: ['Order'],
                    groupColumnShow: [false]
                }
            });

            return tasksGrid;
        }
    };
} ());

Each of the built objects is stored in their own, respective object. I noticed that the methods I am defining in these objects are being duplicated. I'm not sure if these methods can (or should) be moved down to the builder, or possibly out to another object altogether.

function TasksGrid() {
    'use strict';
    var tasksGrid = WorkflowGridBuilder.buildTaskGrid();

    //Public methods:
    return {
        setWidth: function (width) {
            tasksGrid.setGridWidth(width, true);
        },
        reload: function (queueName, queueID) {
            tasksGrid.clearGridData();
            tasksGrid.setCaption(tasksGrid.defaultCaption);
            $('#load_' + tasksGrid.prop('id')).show();

            $.getJSON('../../csweb/Orders/GetTasks/?queueID=' + queueID, function (data) {
                tasksGrid.setGridParam({
                    data: data
                }).trigger('reloadGrid');

                tasksGrid.setCaption(queueName + ' Tasks');
            });
        },
        getSelectedTasks: tasksGrid.getSelectedRows,
        setEventListener: function (eventName, onEvent) {
            tasksGrid.bind(eventName, onEvent);
        }
    };
};

function OrdersGrid() {
    'use strict';
    var ordersGrid = WorkflowGridBuilder.buildOrdersGrid();

    //Public methods:
    return {
        setWidth: function (width) {
            ordersGrid.setGridWidth(width, true);
        },
        reload: function (queueName, queueID) {
            ordersGrid.clearGridData();
            ordersGrid.setCaption(ordersGrid.defaultCaption);
            $('#load_' + ordersGrid.prop('id')).show();

            $.getJSON('../../csweb/Orders/GetOrders/?queueID=' + queueID, function (data) {
                ordersGrid.setGridParam({
                    data: data
                }).trigger('reloadGrid');

                ordersGrid.setCaption(queueName + ' Orders');
            });
        },
        getSelectedOrders: ordersGrid.getSelectedRows,
        setEventListener: function (eventName, onEvent) {
            ordersGrid.bind(eventName, onEvent);
        }
    };
};

As you can see, TasksGrid and OrdersGrid both return the same methods.

I started by trying to move the 'setWidth' function down to WorkflowGridBuilder:

//WorkflowGridBuilder's return:
return {
    gridMethods: {
        setWidth: function (width) {
            //grid.setGridWidth(width, true);
      }
    },
    buildOrdersGrid: ...
}

At this point I realized that my code would not work. There is no 'grid' object to call setGridWidth on. This object will not exist until one of my builder methods is called.

Does this mean that TasksGrid and OrdersGrid are forced to repeat their public methods in the way seen above? I don't see any good solutions.

Answer 1

You could try using the prototype design pattern.

function GridFactory(name, queueUrl, obj) {
    this.name = name;
    this.gridObj = obj;
    this.url = {
        queue : queueUrl
    };
};
GridFactory.prototype.setWidth = function(width){
    this.gridObj.setGridWidth(width, true);
};
GridFactory.prototype.setEventListener = function (eventName, onEvent) {
    this.gridObj.bind(eventName, onEvent);
};
GridFactory.prototype.reload = function (queueName, queueID) {
    this.gridObj.clearGridData();
    this.gridObj.setCaption(this.gridObj.defaultCaption);
    $('#load_' + this.gridObj.prop('id')).show();

    $.getJSON(this.url.queue + queueID, function (data) {
        this.gridObj.setGridParam({
            data : data
        }).trigger('reloadGrid');

        this.gridObj.setCaption(queueName + ' ' + this.name);
    });
};
GridFactory.prototype.getSelectedRows = function(){
    return this.gridObj.getSelectedRows;
};

function TasksGrid() {
    return new GridFactory('Task', 
        '../../csweb/Orders/GetTasks/?queueID=', 
        WorkflowGridBuilder.buildTaskGrid()
    );
}

function OrdersGrid() {
    return new GridFactory('Orders', 
        '../../csweb/Orders/GetOrders/?queueID=', 
        WorkflowGridBuilder.buildOrdersGrid()
    );
}