Questions on Kendo UI for jQuery Forum

2 answers

319 views

Listbox - Alternate Row Colors

Hello

Is there a way to have the listbox alternate row colors? An type of slight row shading would work.

Thank you

Jeff

ListBox

answered on 18 Apr 2024

2 answers

386 views

Scroll listbox to the bottom?

It there a way to sroll a listbox to the bottom programmatically? I just want to scroll the box to the bottom, without selecting any element on the list.

ListBox

updated answer on 31 Aug 2023

0 answers

61 views

Version 2023.1.117 - extra space in items when using templates and programmatic selection does not enable toolbar buttons

Here is a DOJO example that illustrates these 2 issues:

DOJO

Issue 1: When using a full width template for listbox items, there is extra space above each item. This is due to the .k-list-item-text span you automatically create. It has a ::before pseudo element with content set to "\200b". Is this intentional? My workaround is to override this element CSS to remove the content.

Issue 2: When programmatically selecting items in the list box, the toolbar buttons are not enabled like when a user clicks an item. Calling trigger('change') does not help. My workaround is to trigger a click event on the item instead of using the Select() Method, but I assume this is a bug?

Here is a second DOJO with the 2 workarounds implemented:

Workarounds DOJO

ListBox

updated question on 15 Mar 2023

2 answers

197 views

ListBox item template

Hi,

I am trying to make custom visual template with specific background coloring for my ListBox. But from what I can see and reproduce, template doesn't actually apply to the item, but to child element within.

Custom template allows me to set "in item" layout of elements and some of their properties, but even if i manage to apply background color, it doesn't work properly.

I tried even with hardcoding style into template directly instead of using class, and nothing works.

Is this the bug or basically "item" template is not really item template but only item text template (I didn't see this written anywhere)?

Please find dojo showing behavior here: https://dojo.telerik.com/udeNIxul/3

EDIT: Template works as expected on the ListView here: https://dojo.telerik.com/uleKARuN

Thanks and regards,

Vedad

ListBox

answered on 13 Mar 2023

1 answer

106 views

How to improve ListBox performance?

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>

ListBox

answered on 19 Jan 2023

1 answer

304 views

KendoUi Font icons are not loading

Actually we have kendoUi in angularjs project. which ic giving error in developer console like server not responding 404 error for webcomponentsicon.ttf and webcomponentsicon.woff. because of this icons are not loading. can anyone please help me to clear this issue

Hierarchical Data Source

answered on 15 Jun 2022

1 answer

57 views

Mini and detail view on item in listbox

Hi,

I am implementing some interactive listbox, and in some cases I have quite a lot of items within.

I would like to display as many items as possible in the list, but also to give the user option to "expand" and get more detailed view on the item.

For example: In "mini" view, I have only item name. In "expanded" mode I have item name plus more text like some dates, ratings etc.

Is it possible to achieve this on current listbox?

Thank you very much.

Regards,

Vedad

ListBox

answered on 28 Feb 2022

2 answers

390 views

Drag and Drop from a Grid to a Treeview

Hello,

I'm new here and I'm trying to figure out how can I drag and drop from a Grid to a TreeView

I found this example http://dojo.telerik.com/eWIgu/2

It's something like this what I want to do, but in the example I can't put an element in a certain node of the TreeView, I just add elements to the data source. So how can I do that? I need your help

PS. I also want to do this with a listbox instead of a grid. That's possible?

answered on 15 Dec 2021

1 answer

245 views

JQuery treeview disable drag/drop inside but allow drag/drop to listbox

I am trying to disable the drag/drop within the treeview (as in the user wont be able to move any items anywhere inside the treeview). However I am not coming up with a solution for this issue.

I still want the user to be able to drag/drop an item that's inside the treeview over to my listview box as well as drag/drop it back to the treeview box.

So is it possible to disable the drag/drop feature inside the treeview when keeping the drag/drop from there to my listbox?

Drag and Drop

ListBox

TreeView

answered on 28 Jul 2021

1 answer

137 views

Kendo treeview making dups of item in listbox select even after being removed

Hey all I need a hand here. I've been at this for a few hours now and I just can't find how this code is bringing back the old value(s).

    const onCheck = (e) => {
        let listBox = $("#Sources").data("kendoListBox"),
            treeView = $("#availableSources").data("kendoTreeView"),
            selection = [],
            getSelection = (items) => {
                items.forEach(item => {
                    if (item.hasChildren) {
                        getSelection(item.items);
                    } else if (item.checked) {
                        selection.push(item);
                    }
                });
            };

        if (e.node.attributes[3].value == "false") {
            listBox.remove(listBox.items());
            $("#Sources option[value='" + listBox.dataSource._data[0].value + "']").remove();
            //selection.pop(listBox.dataSource._data[0]);
        } else {
            getSelection(treeView.dataSource.data());

            if (selection.length) {
                selection.forEach(item => {
                    listBox.add({
                        text: item.text,
                        value: item.id
                    });
                });
            }
        }
    }

As an example say I checked the item Github and it places it into the listbox just fine. It also adds the ID of the item to the hidden select component.

Now say I uncheck that item now:

enter image description here

Great! It removed the item from the listbox and also from the hidden select component. However though, when I chose another item, say GitHubIssues I am presented with not only that item in the listbox but the pervious item is placed into the select component.