Telerik Forums
Kendo UI for jQuery Forum
0 answers
100 views

Hello,

I'm currently  creating a treeview page using kendo JQuery.

I want to make it so that when a child node is selected, the parent node is selected.

I found this page, https://docs.telerik.com/kendo-ui/knowledge-base/check-nodes-programmatically, and tried to this properties.

 var treeview = $("#tree").data("kendoTreeView");

    var bar = treeview.findByText("Bar");

    treeview.dataItem(bar).set("checked", true);

 

But, 'menuAuth.js:299 Uncaught TypeError: Cannot read properties of undefined (reading 'findByText')' was printed on the console.

also, parent cannot be read.

'menuAuth.js:301 Uncaught TypeError: Cannot read properties of undefined (reading 'parent')' is printed on console too.

 

I really need to make parent node selection.

 

please let me know how can I use this things.

Thanks,

Jieun

 

Jieun
Top achievements
Rank 1
 asked on 28 Oct 2024
2 answers
107 views

I am trying to use npm version of kendo ui jquery, I have added it to my package.json and referenced the latest version I have access to which is 2023.1.425, when I try to use the license I have on my account I am getting the following error:

License activation failed for @progress/kendo-ui v2023.3.1114 Your trial license expired on 10/14/2023, 2:00:17 PM.

It seems the license is attempting to activate another version, to be more a specific a trial that has expired, I should still be able to use my perpetual license of the latest version I have access to which is 2023.1.425, but it seems the portal has rewritten latest license with a trial license?

any help with this should be appreciated

Angel
Top achievements
Rank 1
Iron
 answered on 25 Oct 2024
1 answer
86 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

Alessandro
Top achievements
Rank 1
Iron
Iron
Iron
 answered on 24 Oct 2024
1 answer
60 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.
Martin
Telerik team
 answered on 24 Oct 2024
0 answers
305 views

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.

Janaki
Top achievements
Rank 1
 asked on 24 Oct 2024
1 answer
187 views

REPOSTING HERE AS I BELIEVE I HAVE POSTED THIS IN THE INCORRECT FORUM (Sorry ).

 

Hi, I am new to this, so I apologise if this is a simple question/answer.

I have been asked to "learn while doing" on some code .

at the moment, if a filter is used on a ride, and it return matches, the first row is selected, and that data is then used to help get data for the tab strip.

If the filter returns on rows, the tapstrip still has the data showing for the previous (still selected ? ) row .

 

I have tried

            grid.bind("dataBound", function () {
                var displayedRows = grid.tbody.find(">tr");
               var tabStrip = $("#details").data("kendoTabStrip");
					
                if (displayedRows.length === 0) {
                    // Display the length of displayed rows for troubleshooting
                    /*                    alert("Number of displayed rows: " + displayedRows.length); // Show in alert for easier visibility*/
                    //var tabStrip = $("#details").data("kendoTabStrip");
                    tabStrip.contentElements.empty(); // Clear tab content
                    tabStrip.contentElements.append('<div class="no-data">No Data Available</div>'); // Add "No Data Available" message
                }
                else {
                }
            });

and this works for the First time it finds length = 0, but if I clear the filter and do a search that has results, or clear the filter and select the first row in #grid, the tabstrip is not updated.

 

please can someone advise what I need in the else clause, as anything gi put in here either doesn't work, or "breaks" the other options grid.binds i have in that sets the default search filter on one column to "contains". 

 

thanks

 
 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 ? 
 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 
Gerald
Top achievements
Rank 1
Iron
Iron
 answered on 24 Oct 2024
1 answer
109 views

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

Martin
Telerik team
 answered on 24 Oct 2024
1 answer
101 views

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)
Martin
Telerik team
 answered on 21 Oct 2024
4 answers
958 views

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.

ikram
Top achievements
Rank 1
Iron
 answered on 20 Oct 2024
1 answer
106 views

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

Martin
Telerik team
 answered on 18 Oct 2024
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
ScrollView
Switch
BulletChart
Licensing
QRCode
ResponsivePanel
TextArea
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
+? more
Top users last month
Cynthia
Top achievements
Rank 1
Iron
Iron
Iron
Toby
Top achievements
Rank 3
Iron
Iron
Iron
Danielle
Top achievements
Rank 1
Iron
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Iron
yw
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Cynthia
Top achievements
Rank 1
Iron
Iron
Iron
Toby
Top achievements
Rank 3
Iron
Iron
Iron
Danielle
Top achievements
Rank 1
Iron
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Iron
yw
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?