Questions on Kendo UI for jQuery Forum

1 answer

26 views

Kendo MultiSelect with Virtualization: DataSource Data Empty for a Few Milliseconds

$("#msUsers").kendoMultiSelect({
        placeholder: "Select Users...",
        autoClose: false,
        dataTextField: "UserName",
        dataValueField: "UserId",
        virtual: {
            itemHeight: 40,
            mapValueTo: "dataItem",
            valueMapper: function (options) {
                var ids = options.value;
                if (!ids.length) {
                    options.success([]);
                    return;
                }
                $.ajax({
                    url: "/Home/GetUserByIds",
                    traditional: true,
                    data: { ids: ids },
                    success: function (response) {
                        options.success(response.length ? response : []);
                    },
                    error: function (xhr) {
                        console.log("Error:", xhr.responseText);
                    }
                });
            }
        },
        dataSource: {
            transport: {
                read: {
                    url: "/Home/BindUsers",
                    dataType: "json",
                    data: function (options) {
                        return {
                            skip: options.skip,
                            take: options.take,
                            filter: options.filter
                        };
                    }
                },
                parameterMap: function (data, action) {
                    if (action === "read") {
                        return {
                            take: data.take,
                            skip: data.skip,
                            filter: data.filter?.filters?.[0]?.value || ""
                        };
                    }
                    return data;
                }
            },
            schema: {
                data: "Data",
                total: "Total"
            },
            pageSize: 40,
            serverPaging: true,
            serverFiltering: true
        }
    });

I’m using Kendo UI MultiSelect with virtualization enabled, and I’ve noticed an issue where calling:


$("#multiSelect").data("kendoMultiSelect").value([1,2]);  //Where [1,2] already exists in the dataSource.

Immediately after setting the value, I attempt to retrieve it, but the result is an empty array [].
I tested this with setInterval(), and for a few milliseconds, the value remains empty before updating correctly.
My code logic requires retrieving the value immediately after setting it and passing it to an API call. However, as mentioned, I receive an empty array.
Is there an event I can listen for before proceeding?
I could use setTimeout(), but that feels like a hack.

MultiSelect

answered on 28 Feb 2025

1 answer

24 views

Multi language support for pdf export functionality

kendo.drawing.PDFOptions

I am using this option to download the pdf format of the kendo diagram control. How can I add the language options, to download the PDF in different languages?

/Kumeri.

Diagram

Globalization

answered on 27 Feb 2025

0 answers

26 views

How to manipulate the text of the k-group-indicator button

In my formatting of the grid I set the grid column titles. However when the user groups by the columns the k-group-indicator button uses the same "Title". Is there a way to have the k-group-indicator display a different text? My issue is that it doesn't format as HTML the same as the grid so it displays the html markup " </th>" which is not what I want.

{
field: "ClientName", title: "[[[Client Name]]]",
template: "#= data.ClientName #",
width: 100,
groupHeaderTemplate: "[[[Client Name]]] ${data.value}",
hideOnGroup: true
},
{
field: "Acct", title: "[[[Account Number]]]",
template: "#= data.Acct #",
width: 100,
groupHeaderTemplate: "[[[Account Number]]] ${data.value}",
hideOnGroup: true
},

 {
                    field: "ClientName", title: "[[[Client<br/>Name]]]",
                    template: "#= data.ClientName #",
                    width: 100,
                    groupHeaderTemplate: "[[[Client Name]]] ${data.value}",
                    hideOnGroup: true
                },
                {
                    field: "Acct", title: "[[[Account<br/>Number]]]",
                    template: "#= data.Acct #",
                    width: 100,
                    groupHeaderTemplate: "[[[Account Number]]]  ${data.value}",
                    hideOnGroup: true
                },

Grid

asked on 26 Feb 2025

3 answers

2.0K+ views

How to add a ToolTip to a disabled button

Hi,

AS my title says, how do I add a tooltip to a disabled kendoButton, for the purpose of telling a user why its disabled.

Dojo: https://dojo.telerik.com/OTOpIrOV

Thanks,

Grant

ToolTip

answered on 26 Feb 2025

1 answer

21 views

Cannot drag a Kendogrid row to topmost row position

I am using KendoGrid 2025.1.211.

The reorderable property is set like this:

reorderable: {
rows: { clickMoveClick: true }
},

The clickMoveClick does not appear to have any effect

I can drag rows up and down successfully but I CANNOT drag any row to the topmost row position. I can drag a row to the second row position and then drag the top row down one. In this way I can get a row to the top but this CANNOT be the intended design?

Grid

answered on 26 Feb 2025

2 answers

1.1K+ views

Tooltip not working on a disable button

I've been trying to figure a workaround for this problem.

Recently I've discovered that kendo tooltip isn't working on disable buttons.

I've made an example to show you:

http://dojo.telerik.com/EZogO/5

when the tooltip button is enable, kendo's tooltip work fine. But, if you disable the button it will stop working.

The problem is that this doesn't prevent the browser from showing his default tooltip.

Is there any solution?

Thanks in advance.

ToolTip

updated answer on 24 Feb 2025

1 answer

27 views

Text overflow in cells

If I import an excelfile, where cells have text with overflow into the next cell, the excel file will show the overflowing text. The spreadsheet editor is hiding overflowing text behind the following cell.

Is it possible to format the spreadsheet to show overflowing cell content like in excel?

I know, Excel is showing overflowing content only, if the following cells are ampty - but this is exactly what we face. There are a bunch of excelfiles to process in our application, where people didn't care about formating cells with overflowing content. We just want to show this content like excel.

Spreadsheet

answered on 24 Feb 2025

0 answers

30 views

Kendo multiselect not working with single tap on mobile -only responds to long press

Hello everyone,

I'm currently working with Kendo UI's MultiSelect widget, and I’m experiencing an issue specifically on Android mobile devices.

On desktop, everything works fine. However, when testing on mobile, the MultiSelect only opens when I perform a long press. It does not open with a single tap, which is how I want it to function.

I’ve tried binding both touchstart and touchend events manually, but the issue persists. I also attempted to use FastClick to remove any tap delays, but the problem still occurs.

Here’s a snippet of my code:

javascript
Copy
$("#test_0").kendoMultiSelect({
itemTemplate: "<input type='checkbox'/>" + " #:data.adressName#",
placeholder: "xyz"
dataTextField: "adressName",
dataValueField: "adressName",
tagTemplate: '#:data.adressName#',
dataBound: function () {
var items = this.ul.find("li");
setTimeout(function () {
checkInputs(items);
});
},
change: function () {
var items = this.ul.find("li");
checkInputs(items);
}
});
Has anyone else experienced this issue? How can I make Kendo MultiSelect work with a single tap (not requiring a long press) on Android mobile devices?

Any help or suggestions would be greatly appreciated!

Thanks!

DropDownList

MultiSelect

asked on 22 Feb 2025

0 answers

16 views

Drag and Drop?

Is there a way to enable free form movement of the nodes of an org chart, through drag and drop? I thought maybe there would be a way to incorporate the kendoDraggable functionality, but I have not yet gotten it to work. If the nodes were positionable, would the chart be able to handle it and connect them correctly?

Thanks for any help along these lines anyone can offer!

OrgChart

asked on 22 Feb 2025

0 answers

28 views

Kendo MultiSelect Virtualization: -Displaying Selected Items First without breaking Virtualization

function GetUsers() {
    $("#msUsers").kendoMultiSelect({
        placeholder: "Select Users...",
        autoClose: false,
        autoWidth: true,
        /*   tagMode: "none",*/
        dataTextField: "UserName",
        dataValueField: "UserId",
        virtual: {
            itemHeight: 40,
            mapValueTo: "dataItem",
            valueMapper: function(options) {
                var ids = options.value;

                if (!ids.length) {
                    options.success([]);
                    return;
                }

                $.ajax({
                    url: "/Home/GetUserByIds",
                    traditional: true,
                    data: {
                        ids: ids
                    },
                    success: function(response) {

                        if (!response.length) {
                            options.success([]);
                            return;
                        }
                        options.success(response);
                    },
                    error: function(xhr) {
                        console.log("Error:", xhr.responseText);
                    }
                });
            }
        },
        dataSource: {
            transport: {
                read: {
                    url: "/Home/BindUsers",
                    dataType: "json",
                    data: function(options) {
                        return {
                            skip: options.skip,
                            take: options.take,
                            filter: options.filter
                        }
                    }
                },
                parameterMap: function(data, action) {
                    if (action === "read") {
                        return {
                            take: data.take,
                            skip: data.skip,
                            filter: data.filter && data.filter.filters && data.filter.filters[0] ?
                                data.filter.filters[0].value :
                                "" // Default to empty if no filter is applied
                        };
                    } else {
                        return data;
                    }
                }
            },
            schema: {
                data: "Data",
                total: "Total"
            },
            pageSize: 40,
            serverPaging: true,
            serverFiltering: true
        },
        enable: false,
        open: function(e) {

            debugger;
            var multiselect = this;
            var selectedValues = multiselect.dataItems(); // Get the selected value objects

            if (selectedValues.length) {
                var dataSource = multiselect.dataSource;


                var currentData = dataSource.view();


                const selectedUserIds = new Set(selectedValues.map(selected => selected.UserId));


                var remainingUsers = currentData.filter(user =>
                    user.UserId && !selectedUserIds.has(user.UserId)
                );


                var sortedData = selectedValues.concat(remainingUsers);
                console.log(sortedData);


                dataSource.data(sortedData); // THIS BREAKS VIRTUALIZATION!
            }

        },

        height: 400,       
    });
}

I am using a Kendo MultiSelect widget with virtualization to handle a large dataset.
The issue I am facing is that when the multiselect dropdown is opened, selected items that are not part of the currently loaded subset are not displayed.

I need to ensure that all selected items are displayed first without breaking virtualization.

How can I ensure that all selected items are displayed first in a virtualized Kendo MultiSelect without breaking virtualization? Is there a way to dynamically load selected items and merge them with the current dataSource data?

MultiSelect

asked on 21 Feb 2025