Kendo Listbox Item Select Issue Example

This article is an example of the Kendo Listbox Component. The framework used is Kendo UI for jQuery. In this example, we will demonstrate an item selection issue when we resize the list box which makes the horizontal scrollbar appear.

Let's demonstrate the problem. First of all, if the screen is wide enough then we will not see the UI problem. Let's resize and make the browser width smaller so that the horizontal scrollbar is displayed. On initial load, it all looks hunky dory. Our requirement is on initial load, all items are selected. Like so.

Kendo Listbox On Load

Now let's scroll to the right. Notice that the items are not fully selected. We don't see the letters because it is white. Like so.

Kendo Listbox Item Select Issue

Here is our solution. You can edit the code below using any text editor but I prefer Visual Studio Code. Make sure you are connected to the Internet because the code pulls the Kendo library from the Telerik CDN. Take note that this is just a demonstration code and you'll need to purchase a license if you are going to use Kendo UI for jQuery for more than just evaluation purposes.

As per requirement, we need to select all items on initial load. So on dataBound we select all items and we also find the longest text and multiply it with our magic number 7 (this could be any number depending on your font size). The product is the maximum width of the longest text in pixels. We then set this maximum width to k-list when the column width is less than this value. Otherwise, we set the width to 100% as can be seen in the resizeContent function. Furthermore, we have made our list box responsive by binding resizeContent to the resize event. Don't call resizeContent to see the item select issue.

This is how it looks like with our solution. The items are now fully selected.

Kendo Listbox Item Select Issue Fixed

There you have it. A quick and simple example of how to fix the Kendo Listbox item select issue.