or
1 answer
188 views
Hello,
I have strong performance problems with the ListBox when working with 10,000+ records. On the one hand, it takes a very long to display the data, on the other hand, the search takes a very long time if you have a lot of hits. It also takes a very long time to delete the searched word. Drag and drop is also very slow. Is there any way to improve the performance? The version I am using is from late 2020!
For example, when searching for "name5" it takes a long time to display the results, when deleting "name5" from the search box the performance is also poor.
Here I use only 2 listboxes, in my project I need 3, which makes the performance even worse.
Just for your information, I actually do not generate the data locally it's just for this example to generate enough datasets.
Thanks for your help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.1109/styles/kendo.default-ocean-blue.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.1109/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.1109/js/kendo.all.min.js"></script>
<title>Kendo Listbox</title>
</head>
<body>
<script id="listbox_template" type="text/kendo-x-tmpl">
<div>
<table class="listbox_trueberschrift" style="width:100%;">
<colgroup>
<col style="width:140px;">
<col style="width:180px;">
</colgroup>
<tr style="display:none;">
<td class="listbox_tdueberschrift" nowrap>Code</td>
<td class="listbox_tdueberschrift" nowrap>Beschreibung</td>
</tr>
<tr>
<td nowrap>#:OrderID#</td>
<td nowrap>#:ShipName#</td>
</tr>
</table>
</div>
</script>
<div id="example" role="application">
<div class="demo-section wide">
<input type='text' id='searchBox' class='k-input k-textbox k-input-solid k-input-md k-rounded-md' placeholder='Suchen' />
<div>
<select id="listbox1"></select>
<select id="listbox2"></select>
</div>
</div>
<script>
const maxRecords = 10000;
let dataSource2 = [];
let dataSource3 = [];
class MyData{}
function generateData(){
for (let i = 1; i <= maxRecords; i++) {
let myData = new MyData();
myData.OrderID = i;
myData.ShipName = "ShipName" + i;
if(i <= 5000) dataSource2.push(myData);
else dataSource3.push(myData);
}
};
generateData();
$(document).ready(function () {
$("#searchBox").on("input",function(e) {
var listBox1 = $("#listbox1").getKendoListBox();
var listBox2 = $("#listbox2").getKendoListBox();
var sarchString = $(this).val();
listBox1.dataSource.filter({ field: "ShipName", operator: "contains", value: sarchString });
listBox2.dataSource.filter({ field: "ShipName", operator: "contains", value: sarchString });
});
$("#listbox1").kendoListBox({
connectWith: "test",
draggable: true,
dropSources: ["listbox2"],
selectable: "multiple",
dataSource: dataSource2,
dataTextField: "ShipName",
dataValueField: "OrderID",
template: kendo.template($("#listbox_template").html()),
toolbar: {
tools: ["moveUp", "moveDown", "transferTo", "transferFrom", "transferAllTo", "transferAllFrom", "remove"]
}
});
$("#listbox2").kendoListBox({
draggable: true,
dropSources: ["listbox1"],
dataSource: dataSource3,
selectable: "multiple",
dataTextField: "ShipName",
dataValueField: "OrderID",
template: kendo.template($("#listbox_template").html()),
});
});
</script>
</div>
<style>
.demo-section label {
margin-bottom: 5px;
font-weight: bold;
display: inline-block;
}
#example .demo-section {
max-width: none;
width: 600px;
}
#example .k-listbox {
width: 236px;
height: 350px;
}
#example .k-listbox:first-of-type {
width: 270px;
margin-right: 1px;
}
</style>
</body>
</html>
Nikolay
Telerik team
answered
on
19 Jan 2023
2 answers
1.3K+ views
Hi,
The menu widget has an 'enable()' function, is there a similar way to hide a menu item the same way?
Thanks,
Grant
0 answers
110 views
Hello,
I'm trying to combine custom positions of shape connectors with the save and load functionality. I've combined the following two examples in the dojo:
https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram/methods/load
Dojo example: https://dojo.telerik.com/oqAloqOY/2
As you can see after loading the saved model the custom connectors are gone. Is there any way to persist them or at least re-apply them after load?
Thanks
The Cowboy
Top achievements
Rank 1
Rank 1
asked
on
17 Jan 2023
1 answer
388 views
I am trying to move away from using select2 multi-select. Ideally, I would like to call a function that returns the value for the kendo multi-select during initialization. The value will be retrieved by an AJAX call. Is there any way I could implement this? I tried using dataBound, but it looks like anything inside the data-bound will be called every time user clicks on the multi-select control.
During initialization, I don't want to call the dataSource. This will be updated every time user clicks open. I just need to update the value field based on the AJAX result.$("#multiselect").kendoMultiSelect({
dataSource: {
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/products",
dataType: "jsonp"
}
}
},
open: function(e){
// datasource is dynamic and should be updated with every click.
$('#multiselect').data('kendoMultiSelect').dataSource.read();
},
dataTextField: "ProductName",
dataValueField: "ProductID",
autoBind: false,
value: "IS IT POSSIBLE TO GET DATA FROM AJAX DURING INITIALIZATION?"
});
Martin
Telerik team
answered
on
17 Jan 2023
1 answer
114 views
The documentation for ScrollView autoBind is incorrect or incomplete. When examining the ScrollView autoBind API Reference the sample configuration does not mention or show proper usage of the autoBind configuration. Additionally, I am unable to get the ScrollView widget to initialize when setting autoBind: false
When using this configuration the widget does not initialize. If I set autoBind: true the widget binds to the dataSource but it does not honor the current query parameters.
This code runs correctly when autoBind: true. It fails when autoBind: false Dojo Snippet
<script id="scrollview-template" type="text/x-kendo-template">
<div style="width: 200px; height: 200px; background-image: #=setBackground(data.filename)#; background-repeat:no-repeat; background-size: cover;"></div>
<p>#= data.filename #</p>
</script>
<div id="container" style="margin: 20px;">
<div id="scrollView"
data-role="scrollview"
data-auto-bind="false"
data-pageable="true"
data-enable-pager="true"
data-template="scrollview-template"
data-bind="source: fruits"
data-content-height="100%"
data-page="0"
style="width: 400px; height: 300px; max-width: 100%;">
</div>
</div>
<script>
function setBackground(filename) {
return "url(https://demos.telerik.com/kendo-ui/content/shared/images/photos/" + filename + ")";
}
var viewModel = kendo.observable({
fruits: new kendo.data.DataSource({
data: [
{ filename: "15.jpg" },
{ filename: "16.jpg" },
{ filename: "17.jpg" }
],
schema: {
model: {
fields: {
filenname: { type: "string" }
}
}
}
})
});
$(document).ready(function() {
kendo.bind($("#container"), viewModel);
setTimeout(function(){
console.log("ScrollView Next - Refresh");
//var scrollView = $("#scrollView").kendoScrollView().data().kendoScrollView;
//scrollView.scrollTo(1);
//scrollView.refresh();
}, 1000);
});
</script>
Neli
Telerik team
answered
on
17 Jan 2023
0 answers
200 views
When utilizing an image editor control I receive the following output in console and the image does not load: Please see markup below
Html Page Div Implementation
Html Page Script Implementation
Console output
Result of View
My Layout has the following implementations for CSS and JS
Isaiah
Top achievements
Rank 1
Rank 1
asked
on
16 Jan 2023
0 answers
349 views
I am working on a page that has a table set to display: none and I want to have the Kendo UI Grid initialize its data set from this table. Unfortunately I am seeing that this does not work properly when the table has style=display: none as an attribute. In this situation I see the Grid's column headers render, but no rows are shown. Of course simply removing the display none style would fix the problem, but the table is several thousand rows and we have it hidden to increase page load performance.
Is there a way I can initialize the Kendo UI Grid from this hidden table, then show the grid afterwards?
DuelingCats
Top achievements
Rank 2
Rank 2
asked
on
15 Jan 2023
0 answers
121 views
Hello, dear colleagues.
I'd like to know, is there any approach to programmatically change grid's active page after calling dataSource.read transport method?
If I use dataSource.page(x), I'm having an infinite call chain.
I dont want to call dataSource read, my data is okay. I'd like to change grid's visual pager only, like "page 7 of 100".
Thank you.
0 answers
289 views
I have the following code that uses the upload control to take a spreadsheet from our end user and uploads it and then parses it out into our objects.
var workbook = new kendo.spreadsheet.Workbook({});
workbook.fromFile(file).then(function() {
Do lots of things;
});
I have had zero issues with this block for the most part. However one of our end users has tried to upload a file and they are running into issues. When I debug the code it hits the fromFile, and then goes right past the then. I had multiple breakpoints inside the then, and none of them were being hit. In my last attempt I let it run for almost an hour before I killed it. I tried wrapping it in a try catch to see if it was erroring out and nothing. I tried to upload the file on the demo for the api (https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet/methods/fromfile) and it loads fine there.
I am at a loss and would love some insight. I have attached the spreadsheet that is causing issues hoping that someone can shed some light on it for me.
Jed
Top achievements
Rank 1
Iron
Rank 1
Iron
asked
on
13 Jan 2023
1 answer
114 views
need to have the ability we have in a grid, to set the field to "string" or object EXPLICITLY
P.S seems right now it is under self determination based on fields value & if the field is null & editor DropDown, the object will be set instead of just value
Georgi Denchev
Telerik team
answered
on
12 Jan 2023
