ejDataManager

Communicates with data source and returns the desired result based on the Query provided.

Syntax

  • html
  • var dataManager = new ej.DataManager(datasource, query, adaptor)
    Name Type Description
    datasource Object Sets the data source to create the Data Manager.
    query ej.Query Sets the default query for the data source.
    adaptor Object Configures the adaptor based on the data source type of the Data Manager.

    Example

  • html
  • <style>
            .table,tr,td{ border:1px solid; padding:3px;}
        </style>
        <table class="table" style="border-collapse:collapse">
            <tbody></tbody>
        </table>
    
        <script>
            var dataManger = ej.DataManager(window.gridData);
            var tableBody = ""; 
            for(var i=0;i<5;i++)
            { 
                row="dataManger.dataSource.json[0];;" 
                tableBody="" +="String.format("<tr><td>{0}</td><td>{1}</td><td>{2}</td><td>{3}</td><td>{4}</td></tr>"," row.OrderID,="" row.CustomerID,="" row.EmployeeID,="" row.ShipCity,="" row.freight);
                $(".table="" tbody").html(tableBody);
            }
        </script>

    Callback Functions

    beforeSend(request, settings)

    Custom headers can be set using pre-request callback beforeSend as follows. The setRequestHeader method can be used to modify the XMLHTTPRequest.

    Name Type Description
    request Object Sets the default query for the data source.
    settings Object A set of key/value pairs that configure the AJAX request.

    Example

  • html
  • <div class="datatable" style="padding:10px">
            <table id="table1" class="table table-striped table-bordered" style="width:700px" >
                <thead>
                <tr>
                    <th>Order ID</th>
                    <th>Customer ID</th>
                    <th>Employee ID</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <script type="text/javascript">
            $(function () {
                var customAdaptor = new ej.UrlAdaptor().extend({
                    beforeSend: function (request, settings) {
                        settings.setRequestHeader("myData1", "Syncfusion");
                        settings.setRequestHeader("myData2", 23243);
                    
                    }
                });
    
                var dataManager1 = ej.DataManager({ url: "TreeViewFeatures.aspx/Data", adaptor: new customAdaptor() });
                var query = ej.Query().take(3).skip(2);
                var execute = dataManager1.executeQuery(query) // executing query
                        .done(function (e) {
                            renderTable(e.result);
                        });
            });
        </script>

    done(args)

    A function to be called if the request succeeds.

    Name Type Description
    result Object Contains filtered results on the data based on query.
    query ej.Query A set of key/value pairs that configure the AJAX request.
    xhr Object XMLHTTPRequest object.
    actual Object Contains all the records as it is from the data source.
    getKnockoutModel function The DataManager contains a default method to subscribe the view model properties as KO observable. This is done at the success of the executeQuery using the getKnockoutModel. You can also provide computed properties to the view model using the getKnockoutModel.
    getTableModel function The DataManager contains a default support to bind a TableModel to the element. You can make the data observable using the getTableModel method. The getTableModel method also accept extra properties or properties with computed value that can be added to the TableModel. In the view, you can create a simple view by using the bindings getTableModel
    count number Contains total count of records when the requiresCount() method is enabled in the ej.Query()
    request Object Contains all the necessary data before posting a request
    aggregates Object Aggregates data such as sum, average , min and max
    virtualSelectRecords Object It will have virtually loaded records, when the lazy loading or virtual scrolling is enabled.

    Example

  • html
  • <div class="datatable">
            <table id="table1" class="table table-striped table-bordered" style="width:700px">
                <thead>
                    <tr>
                        <th>ItemID</th>
                        <th>ItemName</th>
                        <th>ItemType</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    
    <script type="text/javascript">
        $(function () {
    
            var dataManager = ej.DataManager({
                url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Foods",
                crossDomain: true
            });
            var query = ej.Query()
                .sortBy("ItemID", "descending", false)
                    .select("ItemID", "ItemName", "ItemType")
            var updateData = { ItemID: 14, ItemName: "Grapes Juice", ItemType: "Veg" };
            dataManager.update("ItemID", updateData);
            // executing query
            var dataSource = dataManager.executeQuery(query).done(function (args) {
                // Result is successful
                renderTable(args.result);
            });
        });
    
        // This function can be better replaced with any template engine. We used this for simplicity in demo.
        function renderTable(data) {
            var tableBody = "", row;
            for (var i = 0; i < data.length; i++) {
                row = data[i];
                tableBody += String.format("<tr><td>{0}</td><td>{1}</td><td>{2}</td></tr>", row.ItemID, row.ItemName, row.ItemType);
            }
            $(".table tbody").html(tableBody);
        }
    </script>

    fail(args)

    A function to be called if the request fails.

    Name Type Description
    query ej.Query A set of key/value pairs that configure the AJAX request.
    error Object When an HTTP error occurs, error thrown receives error status of HTTP object.

    Example

  • html
  • <div class="datatable">
            <table id="table1" class="table table-striped table-bordered" style="width:700px">
                <thead>
                    <tr>
                        <th>ItemID</th>
                        <th>ItemName</th>
                        <th>ItemType</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    
    <script type="text/javascript">
        $(function () {
    
            var dataManager = ej.DataManager({
                url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Foods",
                crossDomain: true
            });
            var query = ej.Query()
                .sortBy("ItemID", "descending", false)
                    .select("ItemID", "ItemName", "ItemType")
            var updateData = { ItemID: 14, ItemName: "Grapes Juice", ItemType: "Veg" };
            dataManager.update("ItemID", updateData);
            // executing query
            var dataSource = dataManager.executeQuery(query).done(function (args) {
    
            renderTable(args.result);
            }).fail(function (args) {
                // handling of error
            });
    
        });
    
        // This function can be better replaced with any template engine. We used this for simplicity in demo.
        function renderTable(data) {
            var tableBody = "", row;
            for (var i = 0; i < data.length; i++) {
                row = data[i];
                tableBody += String.format("<tr><td>{0}</td><td>{1}</td><td>{2}</td></tr>", row.ItemID, row.ItemName, row.ItemType);
            }
            $(".table tbody").html(tableBody);
        }
    </script>

    always(args)

    A function to be called when the request finishes (after success and error callbacks are executed).

    If the request is success, arguments list will be as below.

    Name Type Description
    result Object Contains filtered results on the data based on query.
    query ej.Query A set of key/value pairs that configure the AJAX request.
    xhr Object XMLHTTPRequest object.
    actual Object Contains all the records as it is from the data source.
    getKnockoutModel function The DataManager contains a default method to subscribe the view model properties as KO observable. This is done at the success of the executeQuery using the getKnockoutModel. You can also provide computed properties to the view model using the getKnockoutModel.
    getTableModel function The DataManager contains a default support to bind a TableModel to the element. You can make the data observable using the getTableModel method. The getTableModel method also accept extra properties or properties with computed value that can be added to the TableModel. In the view, you can create a simple view by using the bindings getTableModel
    count number Contains total count of records when the requiresCount() method is enabled in the ej.Query()
    request Object Contains all the necessary data before posting a request
    aggregates Object Aggregates data such as sum, average , min and max
    virtualSelectRecords Object It will have virtually loaded records, when the lazy loading or virtual scrolling is enabled.

    If the request is fail, the argument list will be as below.

    Name Type Description
    query ej.Query A set of key/value pairs that configure the AJAX request.
    error Object When an HTTP error occurs, error thrown receives error status of HTTP object.

    Example

  • html
  • <div class="datatable">
            <table id="table1" class="table table-striped table-bordered" style="width:700px">
                <thead>
                    <tr>
                        <th>ItemID</th>
                        <th>ItemName</th>
                        <th>ItemType</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    
    <script type="text/javascript">
        $(function () {
    
            var dataManager = ej.DataManager({
                url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Foods",
                crossDomain: true
            });
            var query = ej.Query()
                .sortBy("ItemID", "descending", false)
                    .select("ItemID", "ItemName", "ItemType")
            var updateData = { ItemID: 14, ItemName: "Grapes Juice", ItemType: "Veg" };
            dataManager.update("ItemID", updateData);
            // executing query
            var dataSource = dataManager.executeQuery(query).always(function (args) {
                    // if it is success result can be obtained otherwise it display the error report
                    renderTable(args.result);
            });
        });
    
        // This function can be better replaced with any template engine. We used this for simplicity in demo.
        function renderTable(data) {
            var tableBody = "", row;
            for (var i = 0; i < data.length; i++) {
                row = data[i];
                tableBody += String.format("<tr><td>{0}</td><td>{1}</td><td>{2}</td></tr>", row.ItemID, row.ItemName, row.ItemType);
            }
            $(".table tbody").html(tableBody);
        }
    </script>

    Methods

    executeLocal(query)

    This method does not execute more than one operation at a time; it waits for one operation to complete, and then executes the next operation.

    Name Type Description
    query ej.Query Sets the default query for the data source.

    Returns:

    JQueryPromise

    Example

  • html
  • <div class="datatable">
            <table id="table1" class="table table-striped table-bordered" style="width:700px">
                <thead>
                    <tr>
                        <th>Order ID</th>
                        <th>Customer ID</th>
                        <th>Employee ID</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    
    <script type="text/javascript">
        $(function () {
    
            var data = [{ OrderID: 10248, CustomerID: "VINET", EmployeeID: 5 },
                            { OrderID: 10249, CustomerID: "AANAR", EmployeeID: 9 },
                            { OrderID: 10250, CustomerID: "VICTE", EmployeeID: 2 },
                            { OrderID: 10251, CustomerID: "TOMSP", EmployeeID: 7 },
                            { OrderID: 10252, CustomerID: "SUPRD", EmployeeID: 6 }];
            var dataManager = ej.DataManager(data);
            var query = ej.Query()
                .from("Orders")
                .sortBy("OrderID", "descending", false)
            // executing query
            var dataSource = dataManager.executeLocal(query);
            renderTable(dataSource);
    
        });
    
        // This function can be better replaced with any template engine. We used this for simplicity in demo.
        function renderTable(data) {
            var tableBody = "", row;
            for (var i = 0; i < data.length; i++) {
                row = data[i];
                tableBody += String.format("<tr><td>{0}</td><td>{1}</td><td>{2}</td></tr>", row.OrderID, row.CustomerID, row.EmployeeID);
            }
            $(".table tbody").html(tableBody);
        }
    </script>

    executeQuery(query, done, fail, always)

    The executeQuery property is used to process the data based on the query on URL Binding.

    Name Type Description
    query ej.Query Sets the default query for the data source.
    done function A function to be called if the request succeeds.
    fail function A function to be called if the request fails.
    always function A function to be called when the request finishes (after success and error callbacks are executed).

    Returns:

    JQueryPromise

    Example

  • html
  • <script>
    
        var dataManager = ej.DataManager("http://mvc.syncfusion.com/Services/Northwnd.svc/");
        var query =  ej.Query().select(["OrderID", "CustomerID", "ShipName"]).from("Orders").take(3);
        var promise = dataManager.executeQuery(query);
        promise.done(function(e){});
        promise.fail(function(e){});
    
    </script>

    insert(data, tableName, query)

    Inserts a data item in the data table.

    Name Type Description
    data Object JSON data or JSON array
    tableName string Name of the table
    query ej.Query Sets the default query for the data source.

    Returns:

    Object

    Example

  • html
  • <div class="datatable">
            <table id="table1" class="table table-striped table-bordered" style="width:700px">
                <thead>
                    <tr>
                        <th>Order ID</th>
                        <th>Customer ID</th>
                        <th>Employee ID</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    
    <script type="text/javascript">
    
        $(function () {
    
            var data = [{ OrderID: 10248, CustomerID: "VINET", EmployeeID: 5 },
                            { OrderID: 10249, CustomerID: "AANAR", EmployeeID: 9 },
                            { OrderID: 10250, CustomerID: "VICTE", EmployeeID: 2 },
                            { OrderID: 10251, CustomerID: "TOMSP", EmployeeID: 7 },
                            { OrderID: 10252, CustomerID: "SUPRD", EmployeeID: 6 }];
            var dataManager = ej.DataManager(data);
            var query = ej.Query()
                .from("Orders")
                .sortBy("OrderID", "descending", false)
            var record = { OrderID: 10253, CustomerID: "STRPQ", EmployeeID: 4 };
            dataManager.insert(record);
            // executing query
            var dataSource = dataManager.executeLocal(query);
            renderTable(dataSource);
    
        });
    
        // This function can be better replaced with any template engine. We used this for simplicity in demo.
        function renderTable(data) {
            var tableBody = "", row;
            for (var i = 0; i < data.length; i++) {
                row = data[i];
                tableBody += String.format("<tr><td>{0}</td><td>{1}</td><td>{2}</td></tr>", row.OrderID, row.CustomerID, row.EmployeeID);
            }
            $(".table tbody").html(tableBody);
        }
    
    </script>

    remove(keyField, value, tableName, query)

    It is used to remove the data from the dataSource.

    Name Type Description
    keyField string KeyColumn to find the data
    value string Specified value for the keyField
    tableName string Name of the source table
    query ej.Query Sets the default query for the data source.

    Returns:

    Object

    Example

  • html
  • <div class="datatable">
            <table id="table1" class="table table-striped table-bordered" style="width:700px">
                <thead>
                    <tr>
                        <th>Order ID</th>
                        <th>Customer ID</th>
                        <th>Employee ID</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    
    <script type="text/javascript">
    
        $(function () {
            var query = ej.Query().sortByDesc("EmployeeID");
            var data = [{ OrderID: 10248, CustomerID: "VINET", EmployeeID: 5 },
                            { OrderID: 10249, CustomerID: "AANAR", EmployeeID: 9 },
                            { OrderID: 10250, CustomerID: "VICTE", EmployeeID: 2 },
                            { OrderID: 10251, CustomerID: "TOMSP", EmployeeID: 7 },
                            { OrderID: 10252, CustomerID: "SUPRD", EmployeeID: 6 }];
            var dataManager = ej.DataManager(data);
            dataManager.remove("OrderID", 10252, data);
            var dataSource = dataManager.executeLocal(query);
            renderTable(dataSource);
    
        });
    
        function renderTable(data) {
            var tableBody = "", row;
            for (var i = 0; i < data.length; i++) {
                row = data[i];
                tableBody += String.format("<tr><td>{0}</td><td>{1}</td><td>{2}</td></tr>", row.OrderID, row.CustomerID, row.EmployeeID);
            }
            $(".table tbody").html(tableBody);
        }
    
    </script>

    saveChanges(changes, key, tableName, query)

    This method is used to save the changes to the corresponding table. You can add a new record, edit an existing record, or delete a record by using this method.

    Name Type Description
    changes Object Specified values for the Data Table
    key String KeyColumn to find the data
    tableName string Name of the source table
    query ej.Query Sets the default query for the data source.

    Returns:

    Object

    Example

  • html
  • <div class="datatable">
            <table id="table1" class="table table-striped table-bordered" style="width:700px">
                <thead>
                    <tr>
                        <th>Order ID</th>
                        <th>Customer ID</th>
                        <th>Employee ID</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    
    <script type="text/javascript">
        $(function () {
    
            var data = [{ OrderID: 10248, CustomerID: "VINET", EmployeeID: 5 },
                            { OrderID: 10249, CustomerID: "AANAR", EmployeeID: 9 },
                            { OrderID: 10250, CustomerID: "VICTE", EmployeeID: 2 },
                            { OrderID: 10251, CustomerID: "TOMSP", EmployeeID: 7 },
                            { OrderID: 10252, CustomerID: "SUPRD", EmployeeID: 6 }];
    
            var newData = { "added": [{ OrderID: 10258, CustomerID: "JOHN", EmployeeID: 25 }], "deleted": {} , "changed":{} };
            
            var dataManager = ej.DataManager(data);
                var query = ej.Query()
                            .from("Orders")
                            .sortBy("OrderID", "descending", false)
    
                var dataManagerObj = dataManager.saveChanges(newData);
            
                renderTable(data);
        });
    
        // This function can be better replaced with any template engine. We used this for simplicity in demo.
        function renderTable(data) {
            var tableBody = "", row;
            for (var i = 0; i < data.length; i++) {
                row = data[i];
                tableBody += String.format("<tr><td>{0}</td><td>{1}</td><td>{2}</td></tr>", row.OrderID, row.CustomerID, row.EmployeeID);
            }
            $(".table tbody").html(tableBody);
        }
    </script>

    update(keyField, value, tableName, query)

    Updates existing record and saves the changes to the table.

    Name Type Description
    keyField String KeyColumn to find the data
    value String Specified value for the keyField
    tableName String Name of the source table
    query ej.Query Sets the default query for the data source.

    Returns:

    Object

    Example

  • html
  • <div class="datatable">
            <table id="table1" class="table table-striped table-bordered" style="width:700px">
                <thead>
                    <tr>
                        <th>Order ID</th>
                        <th>Customer ID</th>
                        <th>Employee ID</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    
    <script type="text/javascript">
        $(function () {
            var query = ej.Query().sortByDesc("EmployeeID");
            var data = [{ OrderID: 10248, CustomerID: "VINET", EmployeeID: 5 },
                        { OrderID: 10249, CustomerID: "AANAR", EmployeeID: 9 },
                        { OrderID: 10250, CustomerID: "VICTE", EmployeeID: 2 },
                        { OrderID: 10251, CustomerID: "TOMSP", EmployeeID: 7 },
                        { OrderID: 10252, CustomerID: "SUPRD", EmployeeID: 6 }];
            var updateData = { OrderID: 10252, CustomerID: "ZAUDS", EmployeeID: 4 };
            var dataManger = ej.DataManager(data);
            dataManger.update("OrderID", updateData, data);
            var result = dataManger.executeLocal(query);
            renderTable(result);
    
        });
    
        function renderTable(data) {
            var tableBody = "", row;
            for (var i = 0; i < data.length; i++) {
                row = data[i];
                tableBody += String.format("<tr><td>{0}</td><td>{1}</td><td>{2}</td></tr>", row.OrderID, row.CustomerID, row.EmployeeID);
            }
            $(".table tbody").html(tableBody);
        }
    </script>