This is a migrated thread and some comments may be shown as answers.

Hide Paging when is no needed

2 Answers 570 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ismaelc
Top achievements
Rank 1
Ismaelc asked on 15 Dec 2016, 04:14 AM

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.});

 

2 Answers, 1 is accepted

Sort by
1
Accepted
Dimiter Topalov
Telerik team
answered on 16 Dec 2016, 12:49 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Ismaelc
Top achievements
Rank 1
answered on 19 Dec 2016, 04:19 PM
Works perfect, thank you so much! 
Tags
Grid
Asked by
Ismaelc
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Ismaelc
Top achievements
Rank 1
Share this question
or