Hide Paging when is no needed

[Ismaelc]

I'm trying to hide the paging control when is not needed  but I'm missing something, here is my code, hope you can help me to solve this, thanks in advance! Line 261

001.var NoFoundMessage = $("#NoFoundMessage");
002.var Kendogrid = $("#grid");
003.var isOrderById = false;
004.
005.kendo.pdf.defineFont({
006.    "DejaVu Sans": "//kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans.ttf",
007.    "DejaVu Sans|Bold": "//kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
008.    "DejaVu Sans|Bold|Italic": "//kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
009.    "DejaVu Sans|Italic": "//kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf"
010.});
011.
012.(function (myOrders, $) {
013.
014.    myOrders.OrderHistory = (function () {
015.
016.        var Order = $("#Order").text();
017.        var PSQ = $("#PSQ").text();
018.        var Date = $("#Date").text();
019.        var Status = $("#Status").text();
020.        var OrderPurpose = $("#OrderPurpose").text();
021.        var Purchaser = $("#Purchaser").text();
022.        var ShipTo = $("#ShipTo").text();
023.        var Volume = $("#Volume").text();
024.        var OrderAgain = $("#OrderAgain").text();
025.        var ViewReceipt = $("#ViewReceipt").text();
026.
027.        var getUrlWithLocale = function (url) {
028.            var pathArray = window.location.pathname.split('/');
029.            var segment = pathArray[1];
030.            var regex = /^([a-zA-Z]{2}-[a-zA-Z]{2})$/;
031.
032.            if (regex.test(segment)) {
033.                return "/" + segment + url;
034.            }
035.            return url;
036.        }
037.
038.        var load = function () {
039.            if (typeof localStorage.searchByOrderId !== "undefined" && JSON.parse(localStorage.searchByOrderId) === true) {
040.                localStorage.searchByOrderId = false;
041.                isOrderById = true;
042.                orderIdCtrl.val(localStorage.OrderID);
043.            }
044.            showGrid();
045.            kendo.ui.progress(Kendogrid, true);
046.            Kendogrid.kendoGrid({
047.                excel: {
048.                    fileName: "OrdersHistory.xlsx",
049.                    allPages: true,
050.                    proxyURL: "/Account/OrderInquiry/Save/"
051.                },
052.                pdf: {
053.                    allPages: true,
054.                    avoidLinks: true,
055.                    paperSize: "A4",
056.                    margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" },
057.                    landscape: true,
058.                    repeatHeaders: true,
059.                    template: $("#page-template").html(),
060.                    scale: 0.8
061.                },
062.                noRecords: true,
063.                dataSource: {
064.                    type: "POST",
065.                    transport: {
066.                        read: function (options) {
067.                            if (isOrderById === false) {
068.                                getOrdersDataSource(myOrders.SearchControl.pagingSearch(), options);
069.                            } else {
070.                                getOrderByIdDataSource(localStorage.OrderID, options);
071.                                isOrderById = false;
072.                            }
073.                        }
074.                    },
075.                    batch: true,
076.                    schema: {
077.                        type: 'json',
078.                        model: {
079.                            id: "OrderID",
080.                            fields: {
081.                                OrderID: { type: "string" },
082.                                PurchasedBy: { type: "string" },
083.                                LocalizedDate: { type: "string" },
084.                                OrderStatusDesc: { type: "string" },
085.                                LocalizedHapOrderStatus: { type: "string" },
086.                                OrderPurpose: { type: "string" },
087.                                PurchaserName: { type: "string" },
088.                                Recipient: { type: "string" },
089.                                VolumePoints: { type: "string" },
090.                                OrderAgain: { type: "string" },
091.                                ViewReceipt: { type: "string" }
092.                            }
093.                        }
094.                    },
095.                    pageSize: 10
096.                },
097.                groupable: false,
098.                sortable: true,
099.                pageable: {
100.                    refresh: false,
101.                    pageSizes: [10, 20, 30]
102.                },
103.                columns: [
104.                    {
105.                        field: "OrderID",
106.                        title: Order,
107.                        template: function (data) {
108.                            var url = getUrlWithLocale("/Account/OrderHistory/GetOrderDetails/");
109.                            return "<a id='btnViewDetails' data-orderID='" +
110.                                data.OrderID +
111.                                "' href='" +
112.                                url +
113.                                data.OrderID +
114.                                "/Ds' target='_self'>" +
115.                                data.OrderID +
116.                                "</a>";
117.                        }
118.                    },
119.                    {
120.                        field: "PurchasedBy",
121.                        title: PSQ
122.                    },
123.                    {
124.                        field: "LocalizedDate",
125.                        title: Date
126.                    },
127.                    {
128.                        field: "OrderStatusDesc",
129.                        title: Status,
130.                        template: function (data) {
131.                            if (data.OrderStatus === '03') {
132.                                return "<span class='complete'>" + data.OrderStatusDesc + "</span>";
133.                            } else if (data.OrderStatus === "90") {
134.                                return "<span class='cancelled'>" + data.OrderStatusDesc + "</span>";
135.                            } else if (data.OrderStatus === "01") {
136.                                return "<span class='paid'>" + data.OrderStatusDesc + "</span>";
137.                            }
138.                            else {
139.                                return "<span class='processing'>" + data.OrderStatusDesc + "</span>";
140.                            }
141.                        }
142.                    },
143.                    {
144.                        field: "LocalizedHapOrderStatus",
145.                        title: Status,
146.                        hidden: true,
147.                        template: function (data) {
148.                            if (data.HapOrderStatus === "ACTIVE") {
149.                                return "<span class='complete'>" + data.LocalizedHapOrderStatus + "<span>";
150.                            } else if (data.HapOrderStatus === "CANCELLED") {
151.                                return "<span class='cancelled'>" + data.LocalizedHapOrderStatus + "<span>";
152.                            } else {
153.                                return "<span class='processing'>" + data.LocalizedHapOrderStatus + "<span>";
154.                            }
155.                        }
156.                    },
157.                    {
158.                        field: "OrderPurpose",
159.                        title: OrderPurpose,
160.                        template: function (data) {
161.                            return data.LocalizedOrderPurpose;
162.                        }
163.                    },
164.                    {
165.                        field: "PurchaserInfo.PurchaserName",
166.                        title: Purchaser,
167.                        attributes: {
168.                            "class": "tablet"
169.                        },
170.                        template: function (data) {
171.                            return data.PurchaserInfo.PurchaserName
172.                        }
173.                    },
174.                    {
175.                        field: "Shipment.Recipient",
176.                        title: ShipTo,
177.                        template: "#:kendo.toString(Shipment.Recipient)#"
178.                    },
179.                    {
180.                        field: "Pricing.VolumePoints",
181.                        title: Volume,
182.                        template: function (data) {
183.                            return data.Pricing.VolumePoints;
184.                        }
185.
186.                    },
187.                    {
188.                        field: "OrderAgain",
189.                        title: OrderAgain,
190.                        sortable: false,
191.                        template: (function () {
192.                            var url = getUrlWithLocale("/Shop/Cart/Copy/Index/Ds/");
193.                            if (myOrders.SearchControl.pagingSearch().IsHapOrder === false) {
194.                                return "<a class='icon-files-ln-3' href='" + url + "#:OrderID#'> </a>";
195.                            }
196.                            return "";
197.                        }())
198.                    },
199.                    {
200.                        field: "ViewReceipt",
201.                        title: ViewReceipt,
202.                        sortable: false,
203.                        template: (function (data) {
204.                            var url = getUrlWithLocale("/Shop/Receipts/Invoice/Display/" + data.ReceiptNumber);
205.                            if (data.OrderPurpose !== null && data.OrderPurpose.toLocaleLowerCase() == "cd") {
206.                                return "<a href='" + url + "'><i class='icon-receipt-ln-4'></i></a>";
207.                            }
208.                            return "";
209.                        })
210.                    }
211.                ]
212.            });
213.        }
214.
215.        var searchByOrderId = function (orderId) {
216.            localStorage.searchByOrderId = true;
217.            isOrderById = true;
218.            localStorage.OrderID = orderId;
219.            load(false);
220.        }
221.
222.        function getOrdersDataSource(data, options) {
223.            $.ajax({
224.                url: getUrlWithLocale("/Account/OrderInquiry/GetOrders"),
225.                data: data,
226.                dataType: "json",
227.                success: function (result) {
228.                    if (result == null) {
229.                        noFound();
230.                    } else {
231.                        formatColumns(myOrders.SearchControl.pagingSearch().IsHapOrder);
232.                        showGrid();
233.                    }
234.                    kendo.ui.progress(Kendogrid, false);
235.                    options.success(result);
236.                }
237.            });
238.        }
239.
240.        function getOrderByIdDataSource(orderId, options) {
241.            $.ajax({
242.                url: getUrlWithLocale("/Account/OrderInquiry/GetOrderById"),
243.                data: { orderId: orderId },
244.                dataType: "json",
245.                success: function (result) {
246.                    if (result == null) {
247.                        noFound();
248.                    } else {
249.                        if (result[0].IsStandingHapOrder === true) {
250.                            formatColumns(true);
251.                            $(".k-grid-header-wrap > table").addClass("hap-table");
252.                            $(".k-grid-content > table").addClass("hap-table");
253.                        }
254.                        showGrid();
255.                    }
256.                    kendo.ui.progress(Kendogrid, false);
257.                    options.success(result);
258.                }
259.            });
260.        }
261.
262.        function onGridDataBound(e) {
263.            if (this.dataSource.view().length == 0) {
264.                $('.k-pager-info').hide();
265.            } else {
266.                $('.k-pager-info').show();
267.            }
268.
269.            if (this.dataSource.totalPages() == 1) {
270.                this.pager.element.hide();
271.                $(".k-grid-pager").hide();
272.            }
273.        }
274.
275.        function noFound() {
276.            Kendogrid.hide();
277.            NoFoundMessage.show();
278.        }
279.
280.        function showGrid() {
281.            NoFoundMessage.hide();
282.            Kendogrid.css("display", "block");
283.        };
284.
285.        function formatColumns(isHapOrder) {
286.
287.            var grid = Kendogrid.data("kendoGrid");
288.
289.
290.            if (isHapOrder === true) {
291.                grid.hideColumn("Recipient");
292.                grid.hideColumn("OrderAgain");
293.                grid.hideColumn("ViewReceipt");
294.                grid.hideColumn("OrderStatusDesc");
295.                grid.hideColumn("PurchasedBy");
296.                grid.hideColumn("PurchaserName");
297.                grid.showColumn("LocalizedHapOrderStatus");
298.
299.                $("#grid thead [data-field=LocalizedDate] .k-link").html("Start Date");
300.
301.            } else {
302.                //CSS
303.                grid.showColumn("Recipient");
304.                //$("th[data-field='Recipient']").show();
305.                grid.showColumn("OrderAgain");
306.                //$("th[data-field='Order Again']").show();
307.                grid.showColumn("ViewReceipt");
308.                //$("th[data-field='ViewReceipt']").show();
309.                grid.showColumn("OrderStatusDesc");
310.                //$("th[data-field='OrderStatusDesc']").show();
311.                grid.showColumn("PurchasedBy");
312.                //$("th[data-field='PurchasedBy']").show();
313.                grid.showColumn("PurchaserName");
314.                //$("th[data-field='PurchaserName']").show();
315.                grid.hideColumn("LocalizedHapOrderStatus");
316.                //$("th[data-field='HapOrderStatus']").hide();
317.                $("#grid thead [data-field=LocalizedDate] .k-link").html("Date");
318.            }
319.        }
320.
321.        return {
322.            load: load,
323.            gerUrlWithLocale: getUrlWithLocale,
324.            searchByOrderId: searchByOrderId
325.        };
326.
327.    }());
328.
329.    return false;
330.
331.})(window.myOrders = window.myOrders || {}, jQuery);
332.
333.$(document).ready(function () {
334.
335.    myOrders.OrderHistory.load();
336.
337.    $("#show-form").click(function (e) {
338.        $("#search-form").slideToggle();
339.        $(this).find("i").toggleClass("icon-arrow-circle-ln-29 icon-arrow-circle-ln-30");
340.        e.preventDefault();
341.    });
342.
343.    $("#export").click(function () {
344.        var grid = Kendogrid.data("kendoGrid");
345.        grid.saveAsExcel();
346.        return false;
347.    });
348.
349.    $("#modal-cancel").click(function () {
350.        $("#modal-download").data("kendoWindow").close();
351.        return false;
352.    });
353.
354.    $("#modal-ok").click(function () {
355.
356.        if ($('#radio-excel').is(':checked')) {
357.            var grid = Kendogrid.data("kendoGrid");
358.            grid.hideColumn("OrderAgain");
359.            grid.hideColumn("ViewReceipt");
360.            grid.saveAsExcel();
361.            grid.showColumn("OrderAgain");
362.            grid.showColumn("ViewReceipt");
363.            $("#modal-download").data("kendoWindow").close();
364.        } else if ($('#radio-pdf').is(':checked')) {
365.            var grid = Kendogrid.data("kendoGrid");
366.            grid.saveAsPDF();
367.            $("#modal-download").data("kendoWindow").close();
368.        } else {
369.            return false;
370.        }
371.        return false;
372.    });
373.});

 

[Dimiter Topalov]

Hello Ismael,

You can use the dataBound event to compare the current page size (available via the dataSource.pageSize() method) to the current total number of items (dataSource.total()), and hide/show the pager element accodingly.

I have prepared a simple example, illustrating the described approach:

http://dojo.telerik.com/OhEDo

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress

[Ismaelc]

Works perfect, thank you so much!