Questions on Kendo UI for jQuery Forum

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

27 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

30 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

36 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: '<span title="#:adressName#">#:data.adressName#</span>',
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

20 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

32 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

1 answer

22 views

Kendo Grids Column Reordering with Column templates

I am having an issue when I attempt to reorder the columns in my kendo grid and save the state. I am able to get the column order saved after reordering and then reloaded correctly in the updated order, but the issue is that only the column headers are responding to the reorder not the column content especially when the column contains a columnTemplate. How do I ensure that when I reorder my columns, that the column content and column headers are both reordered, and my column content is not mismatched to an incorrect column header on reload or lost due to unexpected behavior. For context I am using this method to reset the column order after its saved and reloaded

reorderColumns(grid: kendo.ui.Grid, order: any) {
var columns = grid.columns;
for (var i = 0; i < order.length; i++) {
var field = order[i];
var currentIndex = -1;
var targetIndex = i;

for (var j = 0; j < columns.length; j++) {
if (columns[j].field === field) {
currentIndex = j;
break;
}
}
if (currentIndex !== -1 && currentIndex !== targetIndex) {
grid.reorderColumn(currentIndex, targetIndex);
}

}
}

Grid

Templates

answered on 20 Feb 2025

1 answer

27 views

How to render an array of array in Grid Cell?

Hi, as the title says, I want to render the inner data of a multilevel array to a grid cell, maybe value separated by ";".

Here is the array (JSON)

"anni":[{"anno":"2026"},{"anno":"2025"}]

I tried many template format for the field I want to use, but none worked.

Last:

template: "#=anni.anno#"

Thank you

Alessandro

Data Source

Grid

answered on 20 Feb 2025

1 answer

28 views

excelExport - How to delete a cell

In my excelExport JavaScript function for my Kendo Grid definition I am requesting the merge of two cells using:

                    sheet.mergedCells = [];
                    sheet.mergedCells.push("A2:A3");

On the created spreadsheet I do get a merged cell at A2 spanning two rows, but the cell that was at A3 (and all of the cells to the right of it) get shifted right instead of being absorbed by the merge.

So I now want to delete the cell at A3. But I can't find any way to select/delete cells using this api.

Any thoughts on how to delete that cell?

Grid