Questions on Kendo UI for jQuery Forum

3 answers

819 views

We need your feedback, because we are considering changes in the release approach for Kendo UI for jQuery. Please provide your feedback in the comments section below:

1. Is it hard to understand the version numbers of our releases? If yes, what makes them hard to understand them?

2. Would semantic versioning (SemVer) of our releases make it easier to understand our version numbers and what's behind them?

3. If we go with SemVer, we might need to start with version 3000.0.0 as we currently use 2022.x.x. Please share your thoughts about this approach and ideas for what number versioning would work best for you.

General Discussions

answered on 23 Jun 2023

0 answers

4 views

Kendo UI grid for Jquery - Filling data in to dropdown inside grid is not working.

Hi,

I am experimenting with this grid control.

I have this code where I am filling a grid with data from the SQL table. The data is loading good.

Second step : I want to edit the row and in this case , I want to edit City column which will be a dropdown in edit mode. I have the code to pull the data from database. My API is returning cities. I can see it in console.log. However, the dropdown in the edit mode does not show any data. It is blank. I am not sure where to fix it or how to fix it.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <link href="https://kendo.cdn.telerik.com/themes/12.0.0/default/default-main.css" rel="stylesheet" />
  <!-- Add the Kendo library by either using the JAVASCRIPT MODULES -->
  <script src="https://kendo.cdn.telerik.com/2025.3.825/mjs/kendo.all.js" type="module"></script>

    <script src="telerik-license.js" type="text/javascript"></script>
  
  <div id="tripsGrid"></div>
  <script type="text/javascript" >
    $(document).ready(function() {
            $("#tripsGrid").kendoGrid({
                dataSource: {
                    transport: {
                        read: {
                            url: "http://localhost:54243/api/Dispatch/GetTripsForSelectedDate", // Replace with your actual API endpoint
                            type: "GET",                  // <-- key change
                            dataType: "json",
                            contentType: "application/json"
                        },
                        parameterMap: function (options, type) {
                              if (type === "read") {
                                return kendo.stringify({
                                  page: options.page,
                                  pageSize: options.pageSize,
                                  sort: options.sort,
                                  filter: options.filter,
                                  date: $("#datePicker").val() || null  // if you have a date picker
                                });
                              }
                              // For create/update/destroy, send the model as JSON.
                              // If you enable batch: true later, handle options.models[0] instead.
                              if (type === "create" || type === "update" || type === "destroy") {
                                return kendo.stringify(options); // 'options' is the dataItem for non-batch
                              }
                            }
                         
                    },
                    schema: {
                        model: {
                            id: "Trip_ID",
                            fields: {
                                Trip_ID: { type: "number" },
                                Route: { type: "string" },
                                RouteID: { type: "number" },
                                Start_Dt: { type: "string", editable : true },
                                LastName: { type: "string",  editable : true },
                                FirstName: { type: "string",  editable : true },
                                StartDesc: { type: "string" },
                                StartAddr1: { type: "string" },
                                StartAddr2: { type: "number" },
                                StartCityID: { type: "number",  editable : true },
                                StartStateID: { type: "number",  editable : true },
                                StartZipID: { type: "number",  editable : true },
                                StartCity : { type: "string",  editable : true },
                                StartState: { type: "string" },
                                StartZip: { type: "string" }                               
                            }
                        }
                    },
                    pageSize: 10, // Optional: for client-side paging
                    serverPaging: true, // Set to true for server-side paging
                    serverSorting: true, // Set to true for server-side sorting
                    serverFiltering: true // Set to true for server-side filtering
                },
                height: 550,
                sortable: true,
                pageable: true,
                filterable: true,
                editable: { mode: "inline", confirmation: "Delete this trip?" },
                columns: [
                    { command: ["edit", "destroy"], title: "&nbsp;", width: 180 },
                    { field: "Trip_ID", title: "TripID" },
                    { field: "Route", title: "Route", format: "{0:c}" },
                    { field: "RouteID", title: "RouteID" },
                    { field: "Start_Dt", title: "Start Date" },
                    { field: "LastName", title: "Last Name" },
                    { field: "FirstName", title: "First Name" },
                    { field: "StartDesc", title: "Start Desc" },
                    { field: "StartAddr1", title: "Addr1" },
                    { field: "StartAddr2", title: "Addr2" },
                    { field: "StartCityID", title: "Start City ID", editor: startCityDropdownEditor, template: "#: StartCity #" },
                    { field: "StartStateID", title: "Start State ID" },
                    { field: "StartZipID", title: "Start Zip ID" },
                    { field: "StartCity", title: "StartCity", editor: startCityDropdownEditor, template: "#: StartCity #" },
                    { field: "StartState", title: "StartState" },
                    { field: "StartZip", title: "StartZipcode" }
                ]
            });
        });
        
        
        
        //&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
        
        function startCityDropdownEditor(container, options) {
                      $('<input required name="' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                          optionLabel: "Select city...",
                          dataTextField: "LkupItem",
                          dataValueField: "LkupItemID",
                          valuePrimitive: true,          // model field is a number, not an object
                          filter: "contains",            // searchable
                          autoBind: true,
                          dataSource: {
                            transport: {
                              read: {
                                url: "http://localhost:54243/api/Dispatch/GetCities", // API below
                                type: "GET",                // keep POST to avoid 405/WebDAV issues
                                dataType: "json",
                                contentType: "application/json"
                              }
                            },
                            schema: { data: "data" } ,    // expect { data: [...] }
                             requestEnd: function(e) {
                              // log the raw response payload
                              console.log("API Response for GetCities:", e.response);

                              // log the parsed data that DropDownList will bind to
                              console.log("Parsed City List:", this.data());
                            }
                          },
                          change: function (e) {
                            // keep StartCity (name) in sync so the display template shows new text
                            var item = this.dataItem();
                            if (item && options.model) {
                              options.model.set("StartCity", item.LkupItem);
                            }
                          },
                          dataBound: function () {
                              // Ensure selected value shows when editing existing rows
                              if (options.model.StartCityID != null) {
                                this.value(options.model.StartCityID);
                              }
                            }
                        });
        }

        </script>
</asp:Content>

Thanks,

Ravi

Grid

asked on 15 Sep 2025

2 answers

11 views

How to control scrollbar option per dataSource size in a kendoGrid control

Hi,

Would like to dynamically control whether a grid has a slider control for the roles.

The algorithm /flow would look something like this:

grid is declared and options initialized within windows.onload or $(document).ready(function() {});

user makes selection to load grid

data populates the datSource from an API request.

if(dataSource.length > 10 )
then let scrollable = true;
else
scrollable = false;

The idea here is it would dynamically adjust that scrollable option after a certain length threshold would be met.

attached here is how I have my grid set up..also I have the sort and dataBound handlers doing stuff.

Here is inline version of JavaScript / jQuery kendo code that declares and does some initialization:

 $("#myGrid").kendoGrid({
     width: 1400,
     height: 500,
     sortable: {
         mode: "single",
         allowUnsort: false
     },
     resizable: true,
     editable: true,
     scrollable: true,
     columns: modifiedColumns, // Use updated columns
     dataSource: mappingsDS,
     selectable: "multiple, row",

Thanks,

George

Grid

answered on 15 Sep 2025

0 answers

3 views

jQuery PivotGridV2 remote flat data wont load

Hi,
I’m moving from PivotGrid (v1) to PivotGridV2 on Kendo UI for jQuery 2025.3.825 with an ASP.NET MVC (.NET 8) backend.
In v1 my grid called the controller just fine. In V2, the grid renders, but no data is loaded from the controller and the console keeps showing:
TypeError: Cannot read properties of undefined (reading 'cube')

If I feed local flat data, V2 renders correctly — so my fields, cube, rows/columns/measures seem fine. The problem appears only when I switch to remote flat binding.

What I expect
- PivotGridV2 (client cube / flat binding) to call my MVC action via transport.read and render the returned rows.
- Built-in Excel export to work (it does, when data is present).

What I see
- requestStart fires, then I get a transport error, followed by the “reading 'cube'” error.
- With local data injected, the table renders fine (so the cube + axes look OK).

Code :

const pg = $("#pivotgrid").kendoPivotGridV2({
  height: 570,
  columnTotals: false,
  rowTotals: false,

  dataSource: new kendo.data.PivotDataSourceV2({
    transport: {
      read: {
        url: '@Url.Action("GetPivotData", "ControllerPivot")',
        type: "POST",
        dataType: "json"
        // (also tried contentType: "application/json" + JSON.stringify in parameterMap)
      },
      parameterMap: function () {
        return {
          year: $("#yearDDL").data("kendoDropDownList")?.value(),
          periode: $("#periodDDL").data("kendoDropDownList")?.value()
        };
      }
    },

    schema: {
      // if server returns { data:[...] } I can switch this on:
      // data: "data",
      model: {
        fields: {
          Version:   { type: "string" },
          Period:    { type: "string" },
          Parameter: { type: "string" },
          Value:     { type: "number" }
        }
      },
      cube: {
        dimensions: {
          Version:   { dataMember: "Version" },
          Period:    { dataMember: "Period" },
          Parameter: {
            caption: "Parameter",
            hierarchies: [{
              name: "By Parameter",
              levels: [{ name: "Parameter", field: "Parameter" }]
            }]
          }
        },
        measures: {
          Value: { field: "Value", aggregate: "sum", format: "{0:n2}" }
        }
      }
    },

    columns:  [{ name: "Version",   expand: true }],
    rows:     [{ name: "Parameter", expand: true }],
    measures: ["Value"],

    requestStart: e => console.log("[requestStart]", e),
    requestEnd:   e => console.log("[requestEnd]", e),
    error:        e => console.error("[transport error]", e)
  })
}).data("kendoPivotGridV2");

$("#configurator").kendoPivotConfiguratorV2({
  dataSource: pg.dataSource, updateOnApply: true, filterable: true, height: 570
});

Is there a minimal working example for jQuery PivotGridV2 remote flat binding on 2025.3.825 I can compare with?

Environment

Kendo UI for jQuery 2025.3.825
PivotGridV2 + PivotConfiguratorV2
ASP.NET MVC (.NET 8) backend

PivotGridV2

asked on 15 Sep 2025

13 answers

5.4K+ views

There is no DataSource Model Id property specified.

Hi,
I'm new to KendoUI, and I created a grid in a view to list all instances of my model (StopLocation) and it works fine, except when adding the .Selectable() line to enable multiple selection, I get an error: "There is no DataSource Model Id property specified.". Anybody knows how to define id for this grid? Or is there something wrong with .Selectable() syntax below?

@( Html.Kendo().Grid((IEnumerable<Route.StopLocation>)ViewData["Stops"])

.Name("selectedStops")

.Columns(columns =>

{

columns.Bound(p => p.StopNo).Title("Stop No.");

columns.Bound(p => p.Id).Title("ID");

columns.Bound(p => p.StopLocation).Title("Stop Location");

})

// .Selectable causes NotSupportedException: There is no DataSource Model Id property specified.

.Selectable(s => s.Mode(GridSelectionMode.Multiple))

)

Thanks in advance.

Grid

answered on 14 Sep 2025

1 answer

15 views

File Manager breadcrumbs navigate is incorrect

Suppose my breadcrumb is Home > LocalData > WebFile > Tools. When I click the breadcrumb 'WebFile', it navigates to Home.

js:

C#:

public void ReadFiles(HttpContext context)
{
try
{
List<FolderFileInfo> FolderFileInfoList = new List<FolderFileInfo>();

string FolderPath = RootPath;
if (!string.IsNullOrEmpty(context.Request.Form["target"]))
{
FolderPath = RootPath + context.Request.Form["target"];
}

foreach (string dir in Directory.GetDirectories(FolderPath))
{
var di = new DirectoryInfo(dir);
FolderFileInfoList.Add(new FolderFileInfo
{
name = di.Name,
isDirectory = true,
hasDirectories = di.GetDirectories().Length > 0,
path = di.FullName.Replace(RootPath, ""),
size = 0,
created = di.CreationTime,
modified = di.LastWriteTime
});
}

foreach (string file in Directory.GetFiles(FolderPath))
{
var fi = new FileInfo(file);
FolderFileInfoList.Add(new FolderFileInfo
{
name = fi.Name.Replace(fi.Extension, ""), // 不能帶副檔名
isDirectory = false,
hasDirectories = false,
path = fi.FullName.Replace(RootPath, ""),
extension = fi.Extension,
size = fi.Length,
created = fi.CreationTime,
modified = fi.LastWriteTime
});
}

context.Response.StatusCode = 200;
context.Response.ContentType = "application/json";
string json = JsonConvert.SerializeObject(FolderFileInfoList);
context.Response.Write(json);
}
catch (Exception ex)
{
context.Response.StatusCode = 500;
context.Response.ContentType = "application/json";
context.Response.Write(JsonConvert.SerializeObject("讀取失敗!"));
}
}

public class FolderFileInfo
{
public string name { get; set; }
public bool isDirectory { get; set; }
public bool hasDirectories { get; set; }
public string path { get; set; }
public string extension { get; set; }
public long size { get; set; }
public DateTime created { get; set; }
public DateTime modified { get; set; }
}

Breadcrumb

FileManager

answered on 04 Sep 2025

0 answers

11 views

Spreadsheet render function not firing in 2025.3.825

In the latest version 2025.3.825, the render function doesn't fire after the spreadsheet is rendered.

See this dojo as an example: https://dojo.telerik.com/FQeIFBMD

Spreadsheet

asked on 03 Sep 2025

0 answers

12 views

Kendo (jQuery) context menu does not work when using a filter

Hello all,

I have been using Kendo for quite a while now. As of recently our team decided to upgrade the Kendo version our software is using. We upgraded from Kendo 2022 to Kendo 2025. This was quite an upgrade, so we spent a lot of time fixing bugs and visual problems. Luckily, we managed to get it all up and running, until today.

Our software uses context menu's. When setting these up we define a target and also a filter within. In the case of the problem we are facing, we are using a context menu for a treeview with items. So we target the treeview, and filter on specific treeview items. That way a context menu will only appear if you specifically right-click an item in the treeview.

Since the upgrade, no context menu appears. Whenever we remove the filter from the context menu options, a context menu does appear. This is not what we are looking for, because we only want to trigger a context menu on treeview items. Hence we need the the filter option. I added a breakpoint in the Kendo source code where the code checks if the target element matches with the given filter in the options. To my surprise, the code continues as expected and calls the "open" method on the context menu. Still, there is no context menu visible. I have tried all sorts of filters, even a star-selector (*), which should match all elements. Even with that, it does not work.

It looks like in both cases (with or without a given filter) the code goes through the sameflow. However, as soon as there is a filter present, no context menu appears.

this.treeViewContextMenu = $("#treeViewContextMenu").kendoContextMenu({
                dataSource: [
                    {text: "Item toevoegen", attr: {action: "addNewItem"}},
                    {text: "Hernoemen", attr: {action: "rename"}},
                    {text: "Verwijderen", attr: {action: "delete"}}
                ],
                target: ".tabstrip-treeview",
                filter: '.k-treeview-leaf-text',
                open: this.onContextMenuOpen.bind(this),
                select: this.onContextMenuSelect.bind(this)
            }).data("kendoContextMenu");

Does any of you guys know what might be wrong? Am I approaching it incorrectly? Thank you!

Menu

TreeView

asked on 02 Sep 2025

0 answers

7 views

Kendo jQuery PivotGrid: Show hierarchy levels in Fields hai to

I have a lot of projects with kendo grids in them. As a matter of practice, I always call the same function on the dataBound event.hap

AutoComplete

General Discussions

Upload

asked on 01 Sep 2025

5 answers

373 views

Barcode - width not enough generate rough result

HI

I have test the Kendo UI Barcode and have found some problems.

。The Barcode result will become rough while width does not enougth (even if renderAs: "canvas" or "svg").
(see Image1 - rough result)

。Larger width will cause error (even if height is greater then the suggested value) :

$(container).find("#gudbrands").kendoBarcode({
value: "1234567890" ,
type: "code39",
width: 580,
height: 100
});

Uncaught Error: Insufficient Height. The minimum height for value: 1234567890 is: 87

at o.prepareValues (kendo.all.min.js:97)

at o.addData (kendo.all.min.js:97)

at o.encode (kendo.all.min.js:97)

at init._render (kendo.all.min.js:97)

at init.createVisual (kendo.all.min.js:97)

at init.redraw (kendo.all.min.js:97)

at init.setOptions (kendo.all.min.js:97)

at new init (kendo.all.min.js:97)

at HTMLDivElement.<anonymous> (kendo.all.min.js:26)

at Function.each (jquery-2.2.4.min.js:2)

My questions :
1.Could Barcode could auto size by itself ?
2.The height of the Barcode should not be limited(see Image2 - long code39)

Best regards

Chris

Barcode

answered on 31 Aug 2025