Questions on Kendo UI for jQuery Forum

0 answers

54 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

122 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

76 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

115 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

68 views

[Solved] 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

answered on 18 Feb 2025

1 answer

66 views

Using 'count' into series data labels when aggregate has been set to avg

Hi,

Within kendo jquery charts, using aggregate: "avg" for series.
Is it possible to have the 'count' value inside the series labels to be displayed (using template or whatever) ?

Thank you
Regards

Charts

answered on 17 Feb 2025

1 answer

138 views

how to escape a function within a html input element on kendo page

I am using Vue Js with Kendo.

I need to escape a function within a HTML input element. :

This is the input values
 <input type="checkbox" class="checkbox" :class="{ 'checked': myVar }">
This is what i tried to do but it did not work: 
 <input type="checkbox" class="checkbox" \#:class="{ 'checked': myVar }"#>

General Discussions

RadioButton

View

answered on 14 Feb 2025

1 answer

127 views

Kendo UI Jquery - Image Editor Crop Default Sepcified

Hello,

when i open image on kendo editor from file upload then by default it's show selected as crop with default aspect ratio i have specified one
and also want to hide following from crop dialog -

- hide aspect ratio dropdown field
- hide orientation
- hide lock aspect ratio

only confirm and cancel button should show on crop dialog

so basic purpose it user will crop the image of required aspect ratio only no other option to be given to user.
also post crop we need to validate image size should not be more than 10MB

I am using kendo version 2024.1.130

Thanks!

ImageEditor

answered on 10 Feb 2025

1 answer

65 views

kendo.ui.MultiViewCalendar - template class "k-state-selected" gets overwritten by "k-today"

Hi,

I use the MultiViewCalendar, and have a style for selected days. I let the user save those days, and apply them when he opens the calendar, with:

kendoCalendar.selectDates(dateArray);

The days get colorized as I styled them like:

#IdentificationName > .k-calendar-view > table > tbody > tr > td.k-state-selected .k-link {
background-color: lightgreen !important;
background-clip: padding-box !important;
box-shadow: inset 0 0 10px mediumseagreen;
color: black;
}

it works, except for the "today" day.
When I inspect, it seems, the framework has overwritten the "k-state-selected"-class with "k-today".

What happens then is, my selected days are green, but the selected day which is also the "today" day, is white with red border.

From Browser Dev Tools:

(Any other "selected" day:)
<td role="gridcell" class="k-state-selected" aria-selected="true"><a tabindex="-1" class="k-link" href="#" data-value="2024/3/1" title="Montag, 1. April 2024"></a></td>

(Today selected day:)
<td class="k-today" role="gridcell" id="IdentificationName_cell_selected" aria-selected="false"><a tabindex="-1" class="k-link" href="#" data-value="2025/1/5" title="Mittwoch, 5. Februar 2025">5</a></td>

How can I keep the green filling color of my selected class which gets loaded initally?
(and only add the red border in css for the "today selected day")

Thank you,
Best regards

Calendar

Styling

Templates

answered on 10 Feb 2025

1 answer

76 views

Can I add a gauge to a diagram?

Using the Telerik WPF controls I can specify pretty much whatever content I want by setting the shape's content to a WPF control. Is it possible to do something like that with the Kendo controls (i.e. specify a Circular Gauge as a visual for example) or am I limited to the shapes defined in the diagram (Image, Group, Circle, etc.).?

If not I guess I could overlay HTML elements on top of the diagram but that is a bit of a hack. Is there a better way to do it?

Diagram

answered on 07 Feb 2025