Home » Javascript » How to filter JSON API with different server to make gridview devextreme javascript

How to filter JSON API with different server to make gridview devextreme javascript

Posted by: admin August 19, 2018 Leave a comment

Questions:

How to filter JSON API with different server to make gridview devextreme javascript

My url API for example

http://localhost:52048/api/Purchasexxxxxxx

content of url is:

[{
“PO”:”1234563893″,
“Article”:”1234564893″,
“Qty_SAP”:70.000,
“Qty_Saturn”:70.000,
“Qty_Diff”:4.000,
“Store”:”GIANT SPM PAMULANG”,
“Tanggal”:”2018-06-18T00:00:00″},
{
“PO”:”1234563891″,
“Article”:”1234564891″,
“Qty_SAP”:70.000,
“Qty_Saturn”:70.000,
“Qty_Diff”:5.000,
“Store”:”HERO GONDANGDIA”,
“Tanggal”:”2018-06-15T00:00:00″
}]

This my view in C#

var str = @Html.Raw(Json.Encode(ViewData["start"]));

var ChartPurchaseOrder = "http://localhost:52048/api/PurchaseOrderHistories";
var filtered = ChartPurchaseOrder.filter(a => a.Tanggal == str);

And after filtered use datagrid Dev Extreme for implementation

const monthNames = ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun",
    "Jul", "Agu", "Sep", "Okt", "Nov", "Des"];
var overlappingModes = ["stagger"];
$(function () {
    var chart = $("#chartPurchaseOrder").dxChart({
        dataSource: filtered,
        series: [{
            argumentField: "Tanggal",
            valueField: "Qty_Diff"
        }],
        argumentAxis: {
            label: {
                overlappingBehavior: overlappingModes[0],
                customizeText: function () {
                    var dateObj = new Date(this.valueText);
                    var month = monthNames[dateObj.getMonth()]; //months from 1-12
                    var day = dateObj.getUTCDate() + 1;
                    var year = dateObj.getUTCFullYear();

                    newdate = day + " " + month + " " + year;
                    return newdate;
                }
            }
        },
        legend: {
            visible: false
        },
        paging: {
            pageSize: 4
        },
        tooltip: {
            enabled: true,
            customizeTooltip: function (arg) {
                return {
                    text: arg.valueText
                };
            }
        },
        title: "Purchase Order"
    }).dxChart("instance");
    $("#overlapping-modes").dxSelectBox({
        dataSource: overlappingModes,
        value: overlappingModes[0],
        onValueChanged: function (e) {
            chart.option("argumentAxis.label.overlappingBehavior", e.value);
        }
    });
});
(ChartPurchaseOrder);
Answers: