Questions on Kendo UI for jQuery Forum

2 answers

40 views

How to make recurrence exceptions work with multiple timezones

I have a recurring event with exceptions in one timezone and am trying to display the schedule in another timezone.

The events all display correctly with corresponding daylight saving adjustments however the exceptions get lost once the event timezone transitions into (or out of) summer time.

Running following code in the dojo correctly hides the 17th of April occurrence IF the timezone is set to "Europe/London" but displays the entry when set to "Pacific/Auckland".

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"/>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/11.0.2/default/default-ocean-blue.css"/>

    <style>body {font-family: Helvetica, Arial, sans-serif;font-size: 14px}</style>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    
    
    
    <script src="https://kendo.cdn.telerik.com/2025.2.520/js/kendo.all.min.js"  ></script>
</head>
<body>
        <div id="scheduler"></div>
    <script>
      var version = kendo.version;
      $.getScript( 'https://kendo.cdn.telerik.com/'+version+'/js/kendo.timezones.min.js', function( data, textStatus, jqxhr ) {
        $("#scheduler").kendoScheduler({       
          date: new Date("2025/3/20"),
          height: 600,
          views: ["week"],
          editable: false,
          //timezone: "Europe/London",
          timezone: "Pacific/Auckland",
          dataSource: [
           {
              title: "Event Europe/London",             
              start: new Date("2025-03-20T14:00:00.000Z"),
              end: new Date("2025-03-20T14:30:00.000Z"),
              startTimezone: "Europe/London",
              endTimezone: "Europe/London",
              recurrenceRule: "FREQ=WEEKLY;BYDAY=TH;WKST=MO;",
              recurrenceException: "20250417T130000Z"
            }
          ]
        });
      });
    </script>
    
</body>
</html>

Scheduler

answered on 24 Jun 2025

1 answer

38 views

Remove the word "filter" from search in dropdown list

With the latest update of Kendo UI JQuery, we are seeing the word "filter" in the search box of the dropdown list. How do we remove that or change it to "search"?

DropDownList

answered on 24 Jun 2025

1 answer

28 views

TreeList new row disappears on edit

I have a TreeList control where the data is kept in an array in memory - the user will save manually after editing everything they need to.

One problem I'm facing is that if a new record is created, and then subsequently edited - it will disappear after either Save or Cancel.

I've removed a lot of the code for brevity - but this is a working example of what I have:

https://dojo.telerik.com/tDidtCqZ

Any idea what I'm doing wrong?

TreeList

answered on 23 Jun 2025

2 answers

106 views

Dirty icon not displayed when row template is used

I have a kendo grid which is having a row template specified. I have enabled 'incel' editing on it. It's displaying the dirty icon correctly when a cell is edited only when I'm not using the row template.
jsFiddle

Grid

answered on 22 Jun 2025

1 answer

24 views

Responsive design for ScrollView

would like to check if it is possible to change the paging size of scrollview using local datasource?

Desktop/Tablet to show 3 per page

Mobile to show 2 per page

ScrollView

ScrollView (Mobile)

answered on 19 Jun 2025

1 answer

46 views

Prevent dialog from closing if action is an async function

As the title already says, if I setup a button dialog with an action that is an async function, returning false does not prevent the dialog from closing after triggering the action. Is there any workaround for this behaviour?

Dialog

answered on 19 Jun 2025

1 answer

37 views

Add class to marker in Jquery ScatterPlot Chart

I have a kendo UI Jquery scatterplot chart with markers of type: square and rotation: 45. I'm trying to add a class based on the series to the markers so that certain ones can be styled to have a pointer when the user mouses over them. I found a few Google AI answers but they seem to be wrong. Here is what I tried where chartData is set to my series option on initialization.

Update: I added the class manually in dev tools and it still doesn't trigger the pointer to appear. This seems to be due to there being a separate marker that Kendo is creating in the DOM for the hover event which does not get the class. I need to add a cursor: pointer; style to that element

        chartData.push({
            name: legendSeriesName,
            xField: "x",
            yField: "y",
            data: storeDetailScatterPlotData
                .filter(d => d.seriesName === seriesName && d.accountId === storeDetailAccountId)
                .map(d => ({ x: d.sales, y: d.storeAmt, storeName: d.storeName, storeId: d.storeId, accountId: d.accountId })),
            zIndex: 10 - index,
            color: seriesColor,
            markers: {
                border: seriesColor,
                background: seriesColor,
                type: "square",
                rotation: 45,
                visual: function (e) {
                    var series = e.series.name;
                    var defaultVisual = e.createVisual();
                    defaultVisual.options.attr("class", series);
                    return defaultVisual;
                }
            }
        });

Charts

answered on 18 Jun 2025

0 answers

36 views

My chart series design and legend does not tally

Hi.

my chart bar design and legend items design does not match up

my kendo configuration

$("#my-score-chart").kendoChart({
    transitions: false,
    tooltip: { visible: false },
     legend: {
     orientation: 'horizontal',
     position: "bottom"
 },
    plotArea: {
        margin: { top: 20, bottom: 20, left: 20, right: 20 }
    },
    seriesDefaults: {
        type: "bar",
        spacing: 0,
        gap:10,
        highlight: { visible: false },
        labels: {
            visible: true,
            position: "outsideEnd",
            template: "#= value #"
        }
    },
    series: [
        { name: "2025", data: [75, 75], color: "#254599" },
        { name: "2024", data: [50, 50], color: "#92A7E0" },
        { name: "2023", data: [25, 35], color: "#FFFFFF", border: { width: 1, color: "#616D80", dashType: "solid" } }
    ],
    valueAxis: {
        visible: false
    },
    categoryAxis: {
        categories: ["Strategy & Leadership", "Governance"],
        majorGridLines: { visible: false },
        labels: { color: "#000" }
    }

});

Charts

updated question on 17 Jun 2025

1 answer

71 views

Updating parent data grid from child grid

Hello

I have a grid and each row can be expanded, using detailInit, to show an inner grid.

I fetch the data beforehand so that I can populate the grid using local data.

In inner grid I have a column with a delete button - using template I call a delete function passing this as a parameter.

// column definition
 {
                    field: "delete",
                    title: "Delete",
                    width: 50,
                    template: "<span class='delete' onclick='delete(this)'><img src='.delete_icon.png'/></span>"
},

my delete function :

function delete(e) {
            let Loader = KENDO.KendoLoader($("body"));
            try {
                Loader.Show();
                let row = $(e).closest("tr");
                let grid = $(e).closest(".innerGrid");

                let dataItem = KENDO.KendoGrid(grid).GetDataItem(row);
                let innerRowId= dataItem.id;

                let parentRow = row.parent().closest(".k-detail-row").prev();
                let parentDataItem = KENDO.KendoGrid($("#ParentGrid")).GetDataItem(parentRow);

                KENDO.KendoGrid(grid).DeleteUI([innerRowId]); // DeleteUI gets array of ids to delete , implemented below
               
                // if no rows remain in inner grid, I need to update a column's value in the parent row
                if (KENDO.KendoGrid(grid).HasRows() == false) {
                    grid.hide();
                    grid.siblings(".noRecordsFound").show();

                     let updatedDataObj = {
                            id: parentDataItem.id,
                            someColumnOnParentRow: null
                        }

                        KENDO.KendoGrid($("#ParentGrid")).UpdateUI([updatedDataObj]); // UpdateUI gets array of objects to update, implemented below
                }
            }
            catch (error) {
                debugger;
                console.log(error.message);
            }
            finally {
                Loader.Hide();
            }
        }

We have created a own KENDO wrapper script for different widgets. Here is the kendoGrid code:

let KENDO = {
  KendoComponent(jQueryElement, component, options = null) {

        let kendoComponent = {};

        kendoComponent.InitKendoComponent = function () {
            let kComponent = jQueryElement.data(component);
            if (!kComponent) {
                if (options) {
                    kComponent = jQueryElement[component](options).data(component);
                }
                else {
                    kComponent = jQueryElement[component]().data(component);
                }
            }
            return kComponent;
        };

        return kendoComponent;
    },

   KendoGrid(jQueryElement, options = null) {

        let kendoGrid = {};

        let kGrid = KENDO.KendoComponent(jQueryElement, "kendoGrid", options).InitKendoComponent();
        if (options)
            kGrid.setOptions(options);

        kendoGrid.SetOptions = function (options) {
            kGrid.setOptions(options);
            return kendoGrid;
        }

        kendoGrid.GetData = function () {
            return Array.from(kGrid.dataSource.data());
        }

        kendoGrid.GetDataItem = function (jQueryTableRow) {
            return kGrid.dataItem(jQueryTableRow);
        }

        kendoGrid.UpdateUI = function (dataToUpdate = []) {
            dataToUpdate.forEach(obj => {
                let dataItem = kGrid.dataSource.get(obj.id);
                if (dataItem) {
                    for (let prop in obj) {
                        if (prop !== "id") {
                            dataItem.set(prop, obj[prop]);
                        }
                    }
                } 
            });
            return kendoGrid;
        }

        kendoGrid.DeleteUI = function (idsToDelete = []) {
            idsToDelete.forEach(id => {
                let dataItem = kGrid.dataSource.get(id);
                if (dataItem)
                    kGrid.dataSource.remove(dataItem);
            });
            return kendoGrid;
        };

        kendoGrid.HasRows = function () {
            return kGrid.dataSource.data().length > 0;
        }

        return kendoGrid;
    }
  
}

It appears that UpdateUI does not function as it should.

When I test I notice that when the last remaining row of inner grid is deleted, the parent row's column is indeed updated to null, the No Records Found message is shown instead of the inner grid, the parent row gets collapsed, and when I expand it the inner grid is shown with the last remaining row.

Suprisingly, if I comment out the UpdateUI line, the inner grid's row gets deleted, without collapsing the inner grid and the No Records Found message is shown as intended (the parent row's column does not get updated in this case, obviously).

Is it a bug in Kendo ? or am I doing something wrong?

Data Source

Grid