This project is read-only.

Welcome to the ODataQueryBuilder JavaScript library project! The documentation on this site should help you Getting Started quickly and provide you an Overview of the functionality you can gain by using this library, as well as detailed References on everything that's available.
ODataQueryBuilder is a working project. Therefore, you are free to contribute and requests features.

Feedback and questions

We would love to hear some feedback/questions from you, by getting in touch with the community through the Discussions section of the site.


The ODataQueryBuilder is a simple JavaScript library that allows you to easily create OData queries. We have decided to favor simple and intuitive UI versus “completeness”; we do not claim that any OData filter can be composed using this UI. For example, all Where conditions are “and”-ed (and there is no UI to “or”), but the majority of naïve user filters can be composed this way, even such non-trivial ones as navigational conditions. You can find more information about it in the blog.


The library only has two external dependencies

  1. jquery-2.0.0
  2. datajs-1.1.0

Getting Started

In the file index.html you can find a simple example about how to add the ODataQueryBuilder to your webpage. The steps are simple:

1) Reference the JavaScript and the css files in your html head

  • External dependencies
     <script type="text/javascript" src=""></script>
     <script type="text/javascript" src="Scripts/datajs-1.1.0.min.js"></script> 


  • ODataQueryBuilder dependencies
     <link type="text/css" href="Content/odata-query-builder.css" rel="stylesheet" />
     <script type="text/javascript" src="Scripts/odata-query-builder.js"></script> 


2) Initialize the query builder in the <script> section:

<script type="text/javascript">
        // Document ready event handler.
        $(document).ready(function () {
            var createdQueryBuilder = new OData.explorer.DataExplorer(
                    // An array containing the different endpoints.
                    endpoints: [
                            name: 'Northwind',
                            url: '',
                            name: 'OData',
                            url: '',
                }); }); </script>


3) Add the div container where the ODataQueryBuilder will be automatically loaded in your page

<h1>OData Query Builder</h1>
<div id="queryBuilderContainer"></div>



There are many features packed in this library. Some of them are:

1) Support of multiple endpoints at the same time (live or cached)


2) Support of hierarchical models.


3) Easy query of navigation properties (


4) Order of the results by column


5) Expansion ($expand) is modeled by presenting the list of navigational links from which you can select the navigator and expand the list of related items as shown above.


Reference Documentation

See the API Documentation


Frequently Asked Questions

This page provides some answers to frequently asked questions about ODataQueryBuilder. If you have a question that is not covered here, try searching or asking in the discussions area.

1) My service does not work? Why

the ODataQueryBuilder is run from a browser and makes AJAX calls to the specified service(s) so you need to be aware of the browser same origin policy and how to handle cross origin resource sharing (a.k.a. CORS) within your service if you host your service and the Query Builder on separate domains. If your service does not support CORS you may cache the $metadata of the service endpoint and the ODataQueryBuilder can run off of the cached version. For more information about how to cache the $metadata please see demos.

References for CORS:

References for the Same Origin Policy:

Last edited Apr 21, 2014 at 8:35 AM by howang, version 20


No comments yet.