Retrieve Only the Visible Grid Columns Data with the $select oData Parameter

Environment

Product

Progress® Kendo UI® Grid for jQuery

Description

How can I retrieve the columns data that is visible only from the remote service by using the $select oData parameter?

Solution

1. Pass additional parameters to the oData service by using the transport.read.data option.
2. Query the oData service to retrieve only the visible columns data.

EditPreviewOpen In Dojo

<div id="example">
    <div id="grid"></div>
</div>

<script>
    $(document).ready(function() {
        $("#grid").kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: {
                        url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders",
                        data: {
                        $select: getColumns
                        }
                    }
                },
                schema: {
                    model: {
                        fields: {
                            OrderID: { type: "number" },
                            Freight: { type: "number" },
                            ShipName: { type: "string" },
                            OrderDate: { type: "date" },
                            ShipCity: { type: "string" }
                        }
                    }
                },
                pageSize: 20,
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true
            },
            height: 550,
            filterable: true,
            sortable: true,
            pageable: true,
            columnMenu: true,
            columnShow: function() {
                this.dataSource.read();
            },
            columns: [{
                field:"OrderID",
                filterable: false
                },
                "Freight",
                {
                    field: "OrderDate",
                    title: "Order Date",
                    format: "{0:MM/dd/yyyy}"
                },
                {
                    field: "ShipName",
                    title: "Ship Name"
                },
                {
                    field: "ShipCity",
                    title: "Ship City"
            }]
        });

        function getColumns() {
            return $("#grid").data("kendoGrid")
                .columns
                .filter(item => !item.hidden)
                .map(function(item) {
                    return item.field
                }).join(",");
        }
    });
  </script>