Question

I am trying to create a grid builder object. This grid builder has a method, buildGrid, which I’ve designed to expect an object defining a bunch of paramaters for a grid:

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;
}

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

    grid.jqGrid({
        datatype: 'local',
        colNames: data.colNames,
        colModel: data.colModel,
        gridview: true,
        height: 'auto',
        pager: gridPager,
        viewrecords: true,
        multiselect: true,
        defaultCaption: data.defaultCaption,
        caption: data.defaultCaption,
        shrinkToFit: false
    });

    return grid;
}

Something like that, but it’s really new code, so open to advice on how to improve.

Now, I would like to extend this buildGrid method such that it can take non-predefined properties and give them to the jqGrid. Something like:

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: 'TaskID', 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]
        },
        ondblClickRow: function (rowid) {
            $(this).trigger('taskDoubleClicked', selector.getRowData(rowid));
        } 
    });

    return tasksGrid;
}

I’m not sure how I should best ‘find’ the unanticipated properties and give them to the grid. Any ideas?

Answer 1

I think you can use this http://api.jquery.com/jQuery.extend/