Questions on Kendo UI for jQuery Forum

1 answer

42 views

Is there a speed control/play back rate configuration that exists for the KendoMediaPlayer component? If so, is the configuration flexible where you can specify an array of various speeds to it? Looking through the documentation I don't see any configurations or examples of a speed control.

MediaPlayer

answered on 24 Oct 2024

0 answers

258 views

Kendo Spreadsheet performance issue with large data set

I'm using kendo spreadsheet in my project and have a lot of customization so first I'm having some code to prepare grid data and in the end using the below line to set the spread sheet data

kendo.jQuery(this.el.nativeElement).kendoSpreadsheet(gridData);

If i have 3000 rows and 100 columns it takes around ~1 min.

I got a suggestion to use batch but I'm not finding any syntax. Please advice.

Spreadsheet

asked on 24 Oct 2024

1 answer

135 views

tabstrip selected tab will not show contented until another tab is clicked first.

Gerald

commented on 23 Oct 2024, 11:44 AM

Update :

            grid.bind("dataBound", function () {
                var displayedRows = grid.tbody.find(">tr");
                var tabStrip = $("#details").data("kendoTabStrip");

                if (displayedRows.length === 0) {
                    grid.clearSelection(); // Clear selection if no matches
                    tabStrip.contentElements.empty(); // Clear tab content
                    tabStrip.contentElements.append('<div class="no-data">No Data Available</div>'); // Add "No Data Available" message
                } else {
                    clearTabStrip(); // Clear any previous "No Data" message

                    // Select the first row if there are matches
                    grid.select(displayedRows.first());

                    // Populate TabStrip elements
                    tabStrip.setOptions({
                        animation: { open: { effects: "fadeIn" } },
                        items: [
                            { text: "Connection", contentUrl: "Index", action: function () { location.href = '/Connection'; } },
                            { text: "PMS", contentUrl: "Index", action: function () { location.href = '/PMS'; } },
                            { text: "Corporate", contentUrl: "Index", action: function () { location.href = '/Corporate'; } },
                            { text: "Units", contentUrl: "Index", action: function () { location.href = '/Units'; } },
                            { text: "Version", contentUrl: "Index", action: function () { location.href = '/SoftwareVersion'; } },
                            { text: "Services", contentUrl: "Index", action: function () { location.href = '/Services'; } },
                            { text: "more", contentUrl: "Index", action: function () { location.href = '/Services'; } },
                            { text: "Emails", contentUrl: "Index", action: function () { location.href = '/SMTP'; } },
                            { text: "SMTP", contentUrl: "Index", action: function () { location.href = '/HotelSMTPSettings'; } },
                            { text: "Payments", contentUrl: "Index", action: function () { location.href = '/HotelPayment'; } },
                            { text: "Methods", contentUrl: "Index", action: function () { location.href = '/HotelPaymentMethods'; } },
                            { text: "Pay System", contentUrl: "Index", action: function () { location.href = '/HotelPaymentSystem'; } },
                            { text: "Notes", contentUrl: "Index", action: function () { location.href = '/HotelNotes'; } }
                        ]
                    });
                    tabStrip.reload(); // Reload TabStrip content
                    tabStrip.select(1); // Ensure the second tab (Connection) is selected
                   // tabStrip.select(0); // Ensure the first tab (Connection) is selected
                }
            });

I am almost there with the above changes. i can get the first tab (0) to select, but it renders no data. If I select tab 2 (1) it renders the data. I have tried selecting tab 2,(1) then the 1 (0) tab, but it stays selected on tab 2 . If I click the 1 tab, I see the data. What could I do to resolve this please ?

Gerald

commented on 23 Oct 2024, 05:34 PM

            // Handle dataBound event
            grid.bind("dataBound", function () {
                var displayedRows = grid.tbody.find(">tr");
                var tabStrip = $("#details").data("kendoTabStrip");

                if (displayedRows.length === 0) {
                    grid.clearSelection(); // Clear selection if no matches
                    tabStrip.contentElements.empty(); // Clear tab content
                    tabStrip.contentElements.append('<div class="no-data">No Data Available</div>'); // Add "No Data Available" message
                } else {
                    clearTabStrip(); // Clear any previous "No Data" message

                    // Select the first row if there are matches
                    grid.select(displayedRows.first());

                    // Populate TabStrip elements
                    tabStrip.setOptions({
                        animation: { open: { effects: "fadeIn" } },
                        items: [
                            { text: "Connection", contentUrl: "Index", action: function () { location.href = '/Connection'; } },
                            { text: "PMS", contentUrl: "Index", action: function () { location.href = '/PMS'; } },
                            { text: "Corporate", contentUrl: "Index", action: function () { location.href = '/Corporate'; } },
                            { text: "Units", contentUrl: "Index", action: function () { location.href = '/Units'; } },
                            { text: "Version", contentUrl: "Index", action: function () { location.href = '/SoftwareVersion'; } },
                            { text: "Services", contentUrl: "Index", action: function () { location.href = '/Services'; } },
                            { text: "Reception", contentUrl: "Index", action: function () { location.href = '/Reception; } },
                            { text: "Emails", contentUrl: "Index", action: function () { location.href = '/SMTP'; } },
                            { text: "SMTP", contentUrl: "Index", action: function () { location.href = '/Settings'; } },
                            { text: "Payments", contentUrl: "Index", action: function () { location.href = '/Payment'; } },
                            { text: "Methods", contentUrl: "Index", action: function () { location.href = '/PaymentMethods'; } },
                            { text: "Pay System", contentUrl: "Index", action: function () { location.href = '/PaymentSystem'; } },
                            { text: "Notes", contentUrl: "Index", action: function () { location.href = '/Notes'; } }
          
                        ]
                    });
                    tabStrip.reload();  // Reload TabStrip content
                    setTimeout(function () {
                        tabStrip.select(1);
                        setTimeout(function () {
                            tabStrip.select(0);
                            tabStrip.reload(); // Reload content of the Connection tab
                        }, 50); // Adding a delay to ensure the tab is correctly reselected
                }, 0);
                }
            });

            // Function to clear the TabStrip
            function clearTabStrip() {
                var tabStrip = $("#details").data("kendoTabStrip");
                tabStrip.contentElements.empty(); // Clear tab content
            }

steps closer. this is now showing the data, but it flips between tab 0 and tab 1 when the filter button ( or Clear button) is clicked. I now need to try and get it so that it always goes to the first tab

TabStrip

answered on 24 Oct 2024

1 answer

67 views

Disable column reorder for one column

Hi support team,

is there a way I can prevent the reordering when using the columnReorder event?

I thought about using something like the following approach but had no luck.

    function onColumnReorder(e) {
        if (e.oldIndex < 5) {
            e.newIndex = e.oldIndex;
            e.preventDefault();
        }

I already found this documentation article Prevent Column Reordering - Kendo UI for jQuery Data Grid - Kendo UI for jQuery (telerik.com)

But this is seems to me like kind of a hack. The screen is flickering.

Regards

Sven

Grid

answered on 24 Oct 2024

1 answer

64 views

Unable to set function to the kendo observable on Grid Edit event

I have a function as

function () {
return this.get('inputTextvalue') && this.get('inputTextvalue').trim();
}

I want to set to the kendo Observable:
var ko = kendo.observable({
onEdit: function (e) {
$(function () {

var ds= e.container.find('.k-grid').data('kendoGrid').dataSource,
model.set('inputTextvalue', null);

model.set('btnEnabled', function () {
return this.get('inputTextvalue') && this.get('inputTextvalue').trim();
});
dataSource.data(model.Data);
});
}
});

I'm getting error as
Uncaught SyntaxError: "undefined" is not valid JSON
    at JSON.parse (<anonymous>)
    at init._change (kendo?v=Ap0ariFxbPaGlnYj11dqmTEGSRA:10:125534)
    at init.trigger (kendo?v=Ap0ariFxbPaGlnYj11dqmTEGSRA:10:4180)
    at init.<anonymous> (kendo?v=Ap0ariFxbPaGlnYj11dqmTEGSRA:10:83206)
    at init.trigger (kendo?v=Ap0ariFxbPaGlnYj11dqmTEGSRA:10:4180)
    at init.set (kendo?v=Ap0ariFxbPaGlnYj11dqmTEGSRA:10:88287)
    at init.set (kendo?v=Ap0ariFxbPaGlnYj11dqmTEGSRA:10:90491)
    at init.onEdit (<anonymous>:14:29)
    at init.<anonymous> (kendo?v=Ap0ariFxbPaGlnYj11dqmTEGSRA:10:168524)
    at init.trigger (kendo?v=Ap0ariFxbPaGlnYj11dqmTEGSRA:10:4180)

Button

General Discussions

Grid

answered on 21 Oct 2024

4 answers

929 views

Always show vertical scrollbar and scroll events for timeline

I have two Kendo scheduler timelines that are displayed one above the other. I want to keep the horizontal scroll position of the two timelines in sync by hooking into the scroll position for one timeline when scrolling in the other, but I can't see a way of doing this. Does anyone know of a way?

Also, in order to have a vertical correlation between the two timelines, I'd like to force the timelines to have a vertical scrollbar, even when one isn't needed: when a scrollbar is present in one of the timelines but not the other, the times don't align vertically because the scrollbar's width forces the compression of the time intervals. Again, any help would be appreciated.

Scheduler

answered on 20 Oct 2024

1 answer

72 views

How to select range by just two click in Scheduler Timeline

Hi,

in here https://demos.telerik.com/kendo-ui/scheduler/timeline I want to select a date range. For example, if I choose the start date, I want to select the second date only if it's greater than the first one, to form a range. I mean, I want to select the first cell, and then when I select the second cell, I want to have the range selected between them. I don't want to drag the mouse or use the Shift key to do it.

thanks

answered on 18 Oct 2024

0 answers

75 views

How do i control null values in dropdownlist cascading?

Hi,

When cascading a Kendo dropdownlist in two stages, if you select the option label of the parent dropdownlist (value is null), the child dropdownlist will not be affected.

When selecting the option label of the parent dropdownlist

(e.g., when the parent dropdownlist is a country and the child is a list of cities, the parent's option label is to select all, and the child dropdownlist is to display cities of all countries)

in the child dropdownlist Is there a way to catch and control this?

thanks

DropDownList

asked on 17 Oct 2024

1 answer

82 views

Is there a way to quickly insert multiple blank rows in the spreadsheet control? The insertRow function is too slow.

For example, Import the Excel file from the attachment into the spreadsheet control for testing. Inserting 1,000 rows is very slow.

Spreadsheet

answered on 15 Oct 2024

1 answer

159 views

Editor custom button class name missing

Hi, I just updated from 2022.3.1109 to 2024.3.806 and noticed that the CustomButton method for editor tools no longer creates a class with the provided name. We previously used this as a way add custom images as button icons. It was also the only way to have a unique identifier for the button, which is it's own separate issue. I didn't see anything in the release notes about this functionality being removed so I'm wondering if this is a bug or if we are supposed to use some new method of adding custom button icons. I see there is an Icon method available but it seems to be for using existing telerik icons and I don't see any way to add our own.

This answer in this older question shows two methods, of which we were doing the latter:

https://www.telerik.com/forums/how-to-add-a-customized-button-or-image-button-to-editor-tools

I understand we could probably switch to using CustomTemplate instead, but that seems like added maintenance whenever the default kendo classes or styling changes since we want it to match the appearance of the built-in kendo buttons.

Editor

answered on 11 Oct 2024