Questions on Kendo UI for jQuery Forum

1 answer

95 views

Hi everyone,

I have problems on binding data from json to Kendo UI for Jquery scheduler, here is my code:

Html/JS

    		$("#scheduler").kendoScheduler({
				timezone: "Europe/Rome",
				ongoingEvents: true,
				editable: false, /*must be read-only*/
				views: [
					{
						type: "month"
					}
				],
				dataSource: {
					batch: true,
					transport: {
						read: {
							url: "/ajax/scheduler-view.php",
							dataType: "json"
						}
					}
				},
				schema: {
					   model: {
						 fields: {
						   id: { type: "number", field: "id" },
						   title: { field: "title"  },
						   start: { type: "date", field: "start" },
						   end: { type: "date", field: "end" },
						   description: { field: "description" },
						   isAllDay: { type: "boolean", field: "isAllDay" }
						 }
					   }
					 }
			});

and here is the JSON:

[{"id":1,"title":"mio titolo","description":"","startTimezone":"Europe\/Rome","start":"\/Date(1729786479)\/","end":"\/Date(1729872879)\/","endTimezone":"Europe\/Rome","isAllDay":true}]

I tryied many ways, but I cannot see the event in the scheduler (that is rendered ok, but empty).

Any suggestion?

Thank you

Scheduler

answered on 24 Oct 2024

1 answer

69 views

Media Player Speed Control

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

321 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

207 views

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

120 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

111 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

972 views

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

110 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

126 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