►How To◄ Alter dropdown box. show more lines

[Jaymer]

A plain html <SELECT> tag can display a screenful of entries - and they are packed tighter than the Kendo dropdown.

Any way to modify what we have to show more data?

Screen Shot 2016-03-24 at 5.04.01 PM.png (42.47 KiB) Viewed 14433 times

[johntalbott]

Per this example ... http://dojo.telerik.com/anAnI ... it looks like you'd need to adjust the height property of the dropdownlist control. You can modify it and hit Run to see how it changes.

In AwareIM, if the dropdown is on a form, in the Attribute > Advanced > Initialization script ... try

config.config.height = 500;

[customaware]

Thanx John....

That works.

[Jaymer]

John

on that same page, you can see line-height=26 option.
playing around with that, i chose 21.

but i couldn't see a change in my dropdowns using your same format:
config.config.line-height=21;

can u make it work WITH the 500 option too?

[johntalbott]

It looks like the dojo.telerik site is down, so I can't pull it up to look.

I believe the line-height you are seeing is a style/CSS configuration. You should be able to create a custom CSS class and use jQuery to add it to the dropdownlist, following the pattern you used to add the custom CSS to your buttons in this post ... http://www.awareim.com/forum/viewtopic.php?f=4&t=8407

[Jaymer]

ya, their system is still screwed. here's what that test screen looked like.

Screen Shot 2016-03-27 at 11.55.19 PM.png (100.33 KiB) Viewed 14383 times

This did not work for me:
config.config.height = 500;
config.config.itemHeight = 21;

[Jaymer]

Something is screwy with that widget anyway...
but most aware ppl would never see it since the widget height is only 6-7 rows of data.

See the 1st obscured visible row on this screen? Thats my current selection and I can't even see it.

Screen Shot 2016-03-27 at 11.54.02 PM.png (21.71 KiB) Viewed 14383 times

and then when I scroll to the end of the list, I can't see that last Option (or two?)

Screen Shot 2016-03-28 at 12.02.32 AM.png (17.87 KiB) Viewed 14383 times

THE PROBLEM is the widget isn't smart enough to know about the current viewport... it has no idea how much screen size you have available (unlike a dropdown thats part of the OS). If I drag my window up higher on the screen, then the 500 pixel dropdown box shows up fine - but then I have to program for the least sized screen that a user might be on or else the dropdown will be messed up

[johntalbott]

ya, their system is still screwed. here's what that test screen looked like.

Screen Shot 2016-03-27 at 11.55.19 PM.png

This did not work for me:
config.config.height = 500;
config.config.itemHeight = 21;

Use ---- config.config.virtual = {itemHeight:26};

You can see the virtual config options here ... http://docs.telerik.com/kendo-ui/api/ja ... on-virtual

If you follow the form field widget configuration pattern below, you'll be able to figure most of these out ...
-The first config = Aware's reference to the field
-The second config = Aware's reference to the widget used to represent the field
-virtual = a widget feature with a variety of configuration attributes
-itemHeight = one of the settings of the virtual configuration

"config.config.height = 500" works because height is a configuration attribute of the widget itself. Because itemHeight is an attribute of the virtual feature settings it can't be referenced directly using config.config.

To get to any widget configuration that is deeper than "config.config.xxxxxx" use = {attribute: value}

Form fields/widget configuration is described in the programmer's reference on page 82, but it's not super clear. Hopefully the above helps bring some additional clarity.