ODATA enabled datagrid

[phunksta]

Hi all,

In a recent project that will hopefully use EasyUI, I have been trying to integrate datagrid with an c#.net WEB API 2 ODATA endpoint.
ODATA has some very nice features including a built-in set of operations for pagination and filtering, which do not require manual coding in the controller.

http://www.odata.org/documentation/odata-version-2-0/uri-conventions/

So in short ODATA expects URI parameters such as: $top, $orderby, $skip, $filter amongst others.

Back to EasyUI, and a datagrid with scrollview, filter row all in remote mode has a set of parameters that are passed: sort, order, page, rows and q,filterRules

My mission was to try to integrate the 2 so they would talk the same language. It would be fantastic if the EasyUI objects had a mode or switch to name the parameters; if anyone knows how to do this I would be very interested to hear as everything that follows might be superfluous!

Anyway, I present a couple of wrapper functions I have used to make this happen, for discussion, improvement, picking holes etc.
If you make use of these please let me know as I'd like to stay in touch regarding improving them!

Globals:
Here I am currently holding a map for translating filters, and a map for escaping literals

Code:

//maps
var fmap = {
    "contains": "substringof({v},{f}) eq true",
    "equal": "{f} eq {v}",
    "notequal": "{f} ne {v}",
    "beginwith": "startswith({f},{v}) eq true",
    "endwith": "endswith({f},{v}) eq true",
    "less": "{f} lt {v}",
    "lessorequal": "{f} le {v}",
    "greater": "{f} gt {v}",
    "greaterorequal": "{f} ge {v}"
};
var dtmap = {
    "String": "'{v}'",
    "DateTime": "DateTime'{v}'",
    "Default": "{v}"
};

On to datagrid:
Note that I had to ensure that the 'columns' property included a property for the datatype of the column, as I could not find another way to ensure that the literal values were included properly. I'd love to improve this.
Filterstringify property for datagrid:

Code:

        filterStringify: function (data) {
            var $cols = $(this).attr('columns')[0];

            $(data).each(function (ind, entry) {
                var result = $.grep($cols, function (e) { return e.field == entry.field; });
                entry._edmType = result[0]._edmType;
            });
            return odatafilterstringify(data);
        }

Filter stringify function:

Code:

function odatafilterstringify(filt) {
    var rv = "";

    $(filt).each(function (ind, entry) {
        if (ind != 0) rv += ' and ';
        var cst = dtmap[entry._edmType] || dtmap["Default"];
        if (entry._edmType == "DateTime") {
            var v = jsonDate(entry.value);
        }
        else
            var v = entry.value;
        rv += fmap[entry.op].replace(/{f}/g, entry.field).replace(/{v}/g, cst.replace(/{v}/g, v));
    });
    return rv;
}

Custom loader for the datagrid - I haven't found a way to pick up the url property from the datagrid's properties instead of hardcoding it here:

Code:

        loader: function (param, success, error) {
            lkpGetfieldsModel(id, param);
            var odataparam = odataparamwrapper(param, 'Name');
            showDebug(odataparam);
            jQuery.ajax({
                dataType: 'json',
                url: '/odata/entityname',
                data: odataparam,
                success: function (data) {
                    success(odataresponsewrapper(data));
                },
                error: function () {
                    error.apply(this, arguments);
                }
            });
        }

Parameter wrapper:

Code:

        loader: function (param, success, error) {
            lkpGetfieldsModel(id, param);
            var odataparam = odataparamwrapper(param, 'Name');
            showDebug(odataparam);
            jQuery.ajax({
                dataType: 'json',
                url: '/odata/Model',
                data: odataparam,
                success: function (data) {
                    success(odataresponsewrapper(data));
                },
                error: function () {
                    error.apply(this, arguments);
                }
            });
        }

Response wrapper:

Code:

function odataresponsewrapper(data) {
    var newdata = { rows: data.value, total: data["odata.count"] };
    return newdata;
}