or
0 answers
233 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
Rank 1
asked
on
24 Oct 2024
1 answer
113 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
1 answer
63 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
58 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
915 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.
1 answer
60 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
0 answers
73 views
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
jayuob
Top achievements
Rank 1
Rank 1
asked
on
17 Oct 2024
1 answer
74 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.
Martin
Telerik team
answered
on
15 Oct 2024
1 answer
141 views
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.
Mihaela
Telerik team
answered
on
11 Oct 2024
1 answer
69 views
Hi,
We are attempting to set the default values of new rows in a grid based on some user-specified filters. The desired functionality is that if, for example, the "Year Level" filter is set to "Year 1", when a new row is created it will have its Year Level value automatically set to Year 1 AND will be visible in an edit state in the grid.
We have read the previous Q&A here, however this solution is not suitable as it makes ALL rows with no "Year Level" value become visible when a new row is created.
As the "edit" event does not seem to fire when creating a new row whilst filters are applied, the implementation we are attempting involves saving those filters when the "Add" button is clicked and then re-applying them after the row has been created. This mostly works, but the new row is inserted as an un-editable dirty record and clicking its "Edit" button does nothing.
The code below is a combination of a couple of different approaches. Any guidance would be greatly appreciated!
let currentEditRow;
let currentModel;
$(".k-grid-add").click(function () {
var grid = $("#grid").data("kendoGrid");
// Save the current filters before clearing them
savedFilters = grid.dataSource.filter();
grid.dataSource.filter([]);
// Add a new row and enter edit mode
currentEditRow = grid.addRow();
grid.editRow(currentEditRow); // Attempting to force new row into edit mode here does not work
});
$("#grid").kendoGrid({
dataSource: ds,
sortable: true,
toolbar: ["create"],
columns: [
{
field: "Yearlevel",
sortable: false,
title: "Year Level",
editor: cmbEditorYearlevelForHomegroup,
template: "#=Yearlevel?.Name ?? ''#",
editable: isEditable
},
// Other columns here
{ command: ["edit", "destroy"], title: "Action", width: "180px" }],
editable: "inline",
edit: function (e) {
currentEditRow = $(e.container); // Save reference to the editing row
currentModel = e.model; // Save the current model
if (e.model.isNew()) {
var yearLevelDropdown = $("#yearLevel").data("kendoDropDownList");
e.model.set("Yearlevel", { // Update the values in the new row based on the selected filters
Code: yearLevelDropdown.value(),
Id: 0,
Name: yearLevelDropdown.text()
});
var grid = $("#grid").data("kendoGrid");
if (savedFilters) {
grid.dataSource.filter(savedFilters); // Re-apply the filters
}
if (currentEditRow && currentModel && currentModel.isNew()) {
var grid = this;
setTimeout(function () {
grid.editRow(currentEditRow); // Attempting to re-enter edit mode for the new row; this also does not work
});
}
}
}
});
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 } });// 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 }