Setting default values for Kendo UI and DataTables controls

Most JavaScript controls take a JSON object for their settings.  Here's how you initialize a Kendo UI grid:

$("#myGrid").kendoGrid({
    pageable: true,
    sortable: { mode: "multiple", allowUnsort: true },
    filterable: true,
    dataSource: {
        data: myData,
        pageSize: 10
    }
});

And here's how you initialize a DataTables grid:

$("#myGrid").dataTable({
    "bSort": true,
    "bAutoWidth": false,
    "bProcessing": true,
    "bJQueryUI": true,
    "bPaginate": true,
    "bServerSide": true,
    "bSortCellsTop": true,
    "sPaginationType": "full_numbers",
    "iDisplayLength": 25,
    "aLengthMenu": [[5, 10, 25, 100], [5, 10, 25, 100]],
    "aaSorting": [],
    "sAjaxSource": "/Api/MyData",
    "sAjaxDataProp": "Data"
});

Both controls take an object literal with all the settings to style how the control looks, works, etc.

But look at all those settings!  We have to set all that sorting and paging and filtering every time if we want non-default behavior?  And what if we change our mind later and want to use virtual paging instead of page numbers or another application-wide change?

If there was only a way to centralize the common settings and reuse them with each call…

Reuse common settings

Here's a snippet of JavaScript to store common settings for a Kendo UI grid:

var kendoGridDefaults = {
    filterable: {
        pageable: true,
        sortable: { mode: "multiple", allowUnsort: true },
        filterable: true
    },
    nonFilterable: {
        pageable: true,
        sortable: { mode: "multiple", allowUnsort: true },
        filterable: false
    },
    extend: function (defaults, settings) {
        return $.extend(true, {}, this[defaults], settings);
    }
};

And here are some common settings for a DataTables grid:

var dataTableDefaults = {
    serverSide: {
        "bSort": true,
        "bAutoWidth": false,
        "bProcessing": true,
        "bJQueryUI": true,
        "bPaginate": true,
        "bServerSide": true,
        "bSortCellsTop": true,
        "sPaginationType": "full_numbers",
        "iDisplayLength": 25,
        "aLengthMenu": [[5, 10, 25, 100], [5, 10, 25, 100]],
        "aaSorting": []
    },
    extend: function(defaults, settings) {
        return $.extend(true, {}, this[defaults], settings);
    }
};

In both cases, you build up an object literal with with the common settings you want to reuse, then create an "extend" function (or another name, if you like) using the jQuery $.extend function, which merges your default settings with any new settings you pass in.

More than one set of common settings

You will likely have more than one set of reusable settings (server-side grid and client side grid, filterable and non-filterable grids, etc.).  Just define new objects in your settings object.  Above, I've got "filterable", "nonFilterable", and "serverSide" as property sets.

Usage

To take advantage of the default settings, call your control code and pass in the common settings object, then call the extend function with your overrides and/or additional settings:

$("#myGrid").kendoGrid(kendoGridDefaults.extend("filterable", {
    dataSource: {
        data: myData,
        pageSize: 10
    }
}));

$("#myGrid").dataTable(dataTableDefaults.extend("serverSide", {
    "sAjaxSource": "/api/myData",
    "sAjaxDataProp": "Data"
}));

This technique isn't limited to grids, or to Kendo UI or DataTables.  It can be used with any controls that set their properties with a JavaScript object literal.