Questions on Kendo UI for jQuery Forum

1 answer

432 views

Pivote Grid error: Uncaught TypeError: e.aggregate is not a function

I am attempting to locally run in my environment the code from the following demo:

https://demos.telerik.com/kendo-ui/pivotgrid/local-flat-data-binding

If I use the code functionally as-is it works fine. If however I change to an older version I receive the following error:

Uncaught TypeError: e.aggregate is not a function

My application is using version 2014.2.1008 which does provide the Pivot Grid even as it is a very old version. Is this a known issue resolved in a later version? Or perhaps I am just doing something wrong. Below is my code:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
    <title>Pivot Grid Demo</title>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2014.2.1008/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2014.2.1008/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2014.2.1008/styles/kendo.default.mobile.min.css" />
    <script src="http://kendo.cdn.telerik.com/2014.2.1008/js/jquery.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2014.2.1008/js/kendo.all.min.js"></script>
    <style>
        #configurator {
            width: 400px;
            min-width: 400px;
            display: inline-block;
            vertical-align: top;
        }

        #pivotgrid {
            width: 67%;
            display: inline-block;
            vertical-align: top;
        }
    </style>
</head>
<body>
    <script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
	<div id="example">
	    <div class="hidden-on-narrow" id="configurator"></div>
	    <div class="hidden-on-narrow" id="pivotgrid"></div>
	
	    <div class="responsive-message"></div>
	
	    <script>
	        $(document).ready(function () {
	            var pivotgrid = $("#pivotgrid").kendoPivotGrid({
	                filterable: true,
	                sortable: true,
	                columnWidth: 120,
	                height: 570,
	                dataSource: {
	                    data: products,
	                    schema: {
	                        model: {
	                            fields: {
	                                ProductName: { type: "string" },
	                                UnitPrice: { type: "number" },
	                                UnitsInStock: { type: "number" },
	                                Discontinued: { type: "boolean" },
	                                CategoryName: { field: "Category.CategoryName" }
	                            }
	                        },
	                        cube: {
	                            dimensions: {
	                                ProductName: { caption: "All Products" },
	                                CategoryName: { caption: "All Categories" },
	                                Discontinued: { caption: "Discontinued" }
	                            },
	                            measures: {
	                                "Sum": { field: "UnitPrice", format: "{0:c}", aggregate: "sum" },
	                                "Average": { field: "UnitPrice", format: "{0:c}", aggregate: "average" }
	                            }
	                        }
	                    },
	                    columns: [{ name: "CategoryName", expand: true }, { name: "ProductName" } ],
	                    rows: [{ name: "Discontinued", expand: true }],
	                    measures: ["Sum"]
	                }
	            }).data("kendoPivotGrid");
	
	            $("#configurator").kendoPivotConfigurator({
	                dataSource: pivotgrid.dataSource,
	                filterable: true,
	                sortable:true,
	                height: 570
	            });
	        });
	    </script>
	</div>
</body>
</html>

PivotGrid

answered on 13 Oct 2021

1 answer

316 views

Upgrade from 2017.3.913

I have to upgrade from jQuery 1 1.12.4 to a more recent 3.something but am currently using v. 2017.3.913 of Kendo UI.

Do you have a migration guide to know in advance what it could break and which versions of jQuery and Kendo UI are recommended?

Thanks in advance

General Discussions

answered on 13 Oct 2021

1 answer

136 views

Drawer MVVM each item having own content

I am following this example:

https://demos.telerik.com/kendo-ui/drawer/mvvm

Currently, each drawer item has same content.

  <div style="height: 200px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error accusantium odit, optio nulla maiores quo neque fugit debitis dignissimos incidunt maxime? Eum voluptatem blanditiis voluptatum praesentium dolorem, dolore placeat debitis quod delectus laborum assumenda cupiditate quaerat quam fugiat deleniti suscipit necessitatibus.</div>

How do I specify a different content for each tab?

Drawer

Drawer (Mobile)

answered on 13 Oct 2021

0 answers

125 views

MultiColumnCombobox not show all items in popup suggestion

I have some MultiColumnCombobox with over 100 items. But when i want to show all (empty input suggestion) it only shows 100 items. Can I show all items in popup suggestion

MultiColumnComboBox

asked on 13 Oct 2021

1 answer

745 views

Grid loosing selection after refresh

Hello, I have the following example. The problem is that I select Germany (row 2) and then click on refresh, Germany is still selected but if I press shift to add another row to my selection (for example Belgium in row 4) the selection brokes and is selecting from row 1 until row 4. So my question is if there is a way to fix this kind of bug?

This is the code that I use:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
  </head>
  <body>
    <button id="refresh">Refresh</button>
    <div id="grid"></div>

    <script>

      $(function () {

        var selectedOrders = [];
        var idField = "OrderID";
                $('#refresh').click(() => {
            $("#grid").getKendoGrid().dataSource.read();
        })
        
        $("#grid").kendoGrid({
          dataSource: {
            type: "odata",
            transport: {
              read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
            },
            schema: {
              model: {
                id: "OrderID",
                fields: {
                  OrderID: { type: "number" },
                  Freight: { type: "number" },
                  ShipName: { type: "string" },
                  OrderDate: { type: "date" },
                  ShipCity: { type: "string" }
                }
              }
            },
            pageSize: 10,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
          },
          height: 400,
          selectable: "multiple",
          pageable: {
            buttonCount: 5
          },
          sortable: true,
          filterable: true,
          navigatable: true,
          columns: [
            {
              field: "ShipCountry",
              title: "Ship Country",
              width: 300
            },
            {
              field: "Freight",
              width: 300
            },
            {
              field: "OrderDate",
              title: "Order Date",
              format: "{0:dd/MM/yyyy}"
            }
          ],
          change: function (e, args) {
            var grid = e.sender;
            var items = grid.items();
            items.each(function (idx, row) {
              var idValue = grid.dataItem(row).get(idField);
              if (row.className.indexOf("k-state-selected") >= 0) {
                selectedOrders[idValue] = true;
              } else if (selectedOrders[idValue]) {
                delete selectedOrders[idValue];
              }
            });
          },
          dataBound: function (e) {
            var grid = e.sender;
            var items = grid.items();
            var itemsToSelect = [];
            items.each(function (idx, row) {
              var dataItem = grid.dataItem(row);
              if (selectedOrders[dataItem[idField]]) {
                itemsToSelect.push(row);
              }
            });

            e.sender.select(itemsToSelect);
          }
        });
      });
    </script>
  </body>
</html>

Data Source

Grid

answered on 12 Oct 2021

1 answer

871 views

Binding kendoForm formData to remote datasource

I am trying to fill in kendoForm elements with data retrieved from an API. Is it possible to use a observable object and bind to formData? How can this be done otherwise?

Form

answered on 12 Oct 2021

1 answer

114 views

Bind Treeview to network share?

Is the capability there for the Treeview control to bind to a network share location (\\server\sharedfolder\subfolder), and then be able to make a selection and return the filename to be passed to another operation?

TreeView

answered on 12 Oct 2021

1 answer

203 views

Is there any way to edit individual cell like this in Kendo Grid?

I need to implement cell editing in Kendo Grid and save the cell value like this. Is there any way to do this? The given Inline InCell editing mode doesn't solve my purpose. please find the attached screenshot.

Grid

answered on 11 Oct 2021

3 answers

147 views

Gantt: Reordering items sending 2 update requests per item

Hi,

I recently noticed quite a few server requests being returned as conflicting when items in the gantt timeline are reordered.

A console output in the parameterMap function shows, that for every item affected by reordering 2 update requests are prepared and sent to the server.

The parameterMap function offers no way of cancelling a request from being executed since this only exists to transform data.

This is not specific to our implementation and can be reproduced in a dojo with the current Kendo version (2021.2.616): https://dojo.telerik.com/AGodEBIb

Is there a specific reason behind this?
Not only seems doubling the number of requests inefficent to me. Sending a second update request before the first one has even been resolved by the server, might lead to issues for other users as well.

In the meantime thanks in advance for any tips how I can prevent the second update from being sent to the server.

Gantt