Questions on Kendo UI for jQuery Forum

5 answers

1.8K+ views

I have an editor configured for a column which can reflect multiple values - the multiselect control binds to the source datasource just fine when a grid row is edited or a new record is being created but for the pure edit portion I need to preselect the current values from the grid row datasource - the values are there in the row object because I can see them when I do a console.log of the model field via e.model.get("UserRoleSectors") (example of value is ["2","25"] ) - however in the grid edit event handler if I try to set the value for the multi-select to ensure it reflects what values are already bound to the record via the statement e.container.find('[name="UserRoleSectors"]').data("kendoMultiSelect").value(e.model.get("UserRoleSectors")); - nothing is selected even though the values are available in the multiselect. Am I doing something wrong?

editor: function (container, options) {

// create an input element

var input = $('<select multiple="multiple" />');

// set its name to the field to which the column is bound

input.attr("name", options.field);

// append it to the container

input.appendTo(container);

// initialize a Kendo UI MultiSelect

input.kendoMultiSelect({

autoBind: true,

valuePrimitive: true,

dataTextField: "SectorAcronym",

dataValueField: "SectorNo",

dataSource: $scope.sectorsDataSource

});

MultiSelect

answered on 22 Sep 2025

1 answer

146 views

LineChart container's scaling affects mouse events

Hi Telerik team!

I'm trying to scale my linechart by setting zoom Css property, but this is affecting mouse events and messing up the tooltip position and the marking wrong focused item.

As you can see here:

https://dojo.telerik.com/RQNGZUUK

So, is possible to scale linechart without affect mouse events?

Regards,

Gustavo

Charts

answered on 22 Sep 2025

0 answers

29 views

Display original size when inserting images

Spreadsheet

asked on 22 Sep 2025

0 answers

55 views

Kendo UI (2018-2019) template #= in calc() causes Invalid template on modern browsers (Edge 140 / Chrome)

Hello —

we're seeing an Uncaught Error: Invalid template when rendering a Kendo template that contains a calc() CSS expression with a #= ... # interpolation. The template works on older browsers (Edge 139 and older) but fails on newer ones (Edge 140+, recent Chrome). Could this be a compatibility/escaping change in the template engine or browser JS engine? Any guidance or workaround would be appreciated.

Code Used:

<!--SmartView Pipeline STEP Template-->
<script id="smartViewPipelineStepTemplate" type="text/x-kendo-template">
    <div class="col-xs-4">
        <div class="contenitor-element-process-monitor">
            <div class='pipelineTask element-process-monitor
                        #if(completion() < 100){ if(completion() > 0){ # blue # } }#
                        #if(completion()==100){ # complete # }#
                        #=type#'
                 idStep='#:idStep()#'>
                <div class='clickableStep'>
                    <div class='process-monitor-name'>#: stepNumber #</div>
                    <div class='process-monitor-description'>#:stepNameShort()#</div>
                    <div class='info-process-monitor'></div>

                    <!-- erroring line -->
                    <div style="width:calc(#=completion()#% - 24px)" class='progress-process-monitor clickableStep'>
                        <p>#=completion()#%</p>
                    </div>

                </div>
            </div>
        </div>
    </div>
</script>

Error shown in console

Uncaught Error: Invalid template: '<div class="col-xs-4"> ... <div style="width:calc(#=completion()#% - 24px)" ...>'

Environment/Version

Kendo UI: v2019.1.220 (Kendo jQuery bundle in production)
jQuery: 1.12.4 included in the project
Browsers where error occurs: Edge 140+, recent Chrome (older Edge 139 works)
Template uses legacy Kendo template syntax (#=, #:, # if(...) { # ... # } #)

Templates

asked on 19 Sep 2025

1 answer

54 views

Columns disappearing when setting locked to true

I have a Kendo UI Grid Dojo that I am working on. When I set locked on the columns to "true", some of the columns (country, city, name) disappear.

Update: If I add a width attribute to every column, the columns stop disappearing, however when I then add in reordable, I am able to move unlocked columns over to the locked columns side. Is there a way to prevent users from moving columns from locked to unlocked and vice verca?

Here is the example:

https://dojo.telerik.com/tVXUmrjz

Javascript:

$(document).ready(function() {
            $("#grid").kendoGrid({
                dataSource: {
                    transport: {
                        read: "https://demos.telerik.com/service/v2/core/Orders"
                    },
                    schema: {
                        model: {
                            fields: {
                                OrderID: { type: "number" },
                                ShipCountry: { type: "string" },
                                ShipCity: { type: "string" },
                                ShipName: { type: "string" },
                                OrderDate: { type: "date" },
                                ShippedDate: {type: "date" }
                            }
                        }
                    },
                    pageSize: 15
                },
                height: 550,
                pageable: true,
                reorderable: true,
                columns: [
                    {
                        field: "OrderDate",
                        title: "Order Date",
                        width: 120,
                        format: "{0:MM/dd/yyyy}",
                        locked: true
                    },
                    {
                        field: "ShipCountry",
                        title: "Ship Country",
                        locked: true
                    },
                    {
                        field: "ShipCity",
                        title: "Ship City"
                    },
                    {
                        field: "ShipName",
                        title: "Ship Name"
                    },
                    {
                        field: "ShippedDate",
                        title: "Shipped Date",
                        format: "{0:MM/dd/yyyy}",
                        width: 200
                    },
                    {
                        field: "OrderID",
                        title: "ID",
                        width: 80
                    }
                ]
            });
        });

Grid

answered on 18 Sep 2025

1 answer

92 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

answered on 18 Sep 2025

1 answer

57 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

answered on 17 Sep 2025

2 answers

115 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

13 answers

5.5K+ 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

89 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