DataGrid - WSBuilder Usage Example

WSBuilder Usage Example

This example demonstrates how to use soby_WSBuilder class to apply custom api.
"soby_WSBuilder" class can be initialized and "GetPagingQuery", "GetOrderByFieldsQuery", "GetViewFieldsQuery", "GetWhereQuery", "GetMainQuery", "DataBeingParsed" functions can be overwritten to apply parameters required for your custom api. You can check the following code;

"RowLimit" property states number of records will be displayed per page.

customerDataSourceBuilder.RowLimit = 3;

"CountQuerySupported" property states whether total item count will be retrieve throught another api call or retrieved from the main call.
"false" value means component will NOT make an api call to retrieve the total item count.
"true" value means component will make an an api call to retrieve the total item count.

customerDataSourceBuilder.CountQuerySupported = false;

"GetPagingQuery" function is used to get data will be sent to api for paging information. "GetPagingQuery" function is being called if "CountQuerySupported" property is set true. The following example checks if api is a "POST" call than sends JSON string and if it is "GET" call than send querystring parameter.

customerDataSourceBuilder.GetPagingQuery = function(transport) {
        if (transport.Type == "POST"){
            return "'pageIndex': " + this.PageIndex + "," + "'pageItemCount': " + this.RowLimit;
        }
        else {
            return "pageIndex=" + this.PageIndex + "&pageItemCount=" + this.RowLimit;
        }
    }

"GetOrderByFieldsQuery" function is used to get data will be sent to api for sorting information. The following example checks if api is a "POST" call than sends JSON string and if it is "GET" call than send querystring parameter.

    customerDataSourceBuilder.GetOrderByFieldsQuery = function(transport) {
        var jsonString = "";
        for (var i = 0; i < this.OrderByFields.length; i++) {
            jsonString += this.OrderByFields[i].FieldName + " " + (this.OrderByFields[i].IsAsc == true ? "asc" : "desc") + ",";
        }

        if (jsonString != "")
            jsonString = jsonString.substr(0, jsonString.length - 1);

        if (transport.Type == "POST") {
            if (jsonString == "")
                jsonString = "null";
            jsonString = "'sort': \"" + jsonString + "\"";
        }
        else 
            jsonString = "sort=" + jsonString;

        return jsonString;
    }

"GetViewFieldsQuery" function is used to get data will be sent to api for including fields information. The following example returns empty string but you can either send something like "viewfields=Id,Title" or "viewfields:Id,Title" depending or api Type.

    customerDataSourceBuilder.GetViewFieldsQuery = function(transport) {
        return "";
    }

"GetWhereQuery" function is used to get data will be sent to api for filtering information. The following example checks if api is a "POST" call than sends JSON string and if it is "GET" call than send querystring parameter.

    customerDataSourceBuilder.GetWhereQuery = function(transport) {
        var query = "";
        if (transport.Type == "POST") {
            query = this.Filters.ToJson();
        }
        else {
            query = this.Filters.ToQueryString(0);
            if (query != "")
                query = "filter=" + query;
        }
        return query;
    }

"GetMainQuery" function combines "GetPagingQuery", "GetOrderByFieldsQuery", "GetViewFieldsQuery" and "GetWhereQuery" function return values and pass into api.

    customerDataSourceBuilder.GetMainQuery = function(transport) {
        var selectFieldsEnvelope = this.GetViewFieldsQuery(transport);
        var whereQuery = this.GetWhereQuery(transport);
        var orderByFieldsQuery = this.GetOrderByFieldsQuery(transport);
        var pagingQuery = this.GetPagingQuery(transport);
        if (transport.Type == "POST") {
            return "{" + whereQuery + ", " + orderByFieldsQuery + ", " + pagingQuery + "}";
        }
        else {
            var envelope = whereQuery;
            if (envelope != "" && selectFieldsEnvelope != "")
                envelope += "&";
            envelope += selectFieldsEnvelope;

            if (envelope != "" && orderByFieldsQuery != "")
                envelope += "&";
            envelope += orderByFieldsQuery;
            if (envelope != "" && pagingQuery != "")
                envelope += "&";
            envelope += pagingQuery;
            return envelope;
        }
    }

Api return data is passed into "DataBeingParsed" function and "NextPageExist" and "ItemCount" properties needs to be set within this function.
"NextPageExist" property states whether there is another page exists or not.
"ItemCount" property states number of items will be displayed on the current page.

customerDataSourceBuilder.DataBeingParsed = function(result, parseCompleted){
        this.NextPageExist = result.NextPageExist;
        this.ItemCount = result.Data.length;
        return result.Data;
    }

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Soby Web DataGrid Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="/media/js/jquery-3.1.0.js" type="text/javascript"></script> <link href="/media/css/soby.ui.components.css" rel="stylesheet" type="text/css" media="all" /> <script src="/media/js/soby.service.js"></script> <script src="/media/js/soby.ui.components.js"></script> </head> <body> <div id='soby_CustomersDiv'></div> <div id='soby_CustomerAddressesDiv'></div> <div id='soby_CustomerPhonesDiv'></div> </body> </html>

This example displays all array values

Want to learn more about the grid component? Check out the API documentation.