@edwardsmarkf
@edwardsmarkf
Forum Replies Created
-
AuthorPosts
-
June 2, 2020 at 4:36 pm in reply to: getting data element from accordion smart-accordion-item #100776edwardsmarkfMember
event.target.closest('smart-accordion-item').dataset.labelname
😁
THANK YOU!
this is exceptionally useful. you might consider adding this in the documentation.edwardsmarkfMemberthank you!
edwardsmarkfMembersorry i cannot seem to get it to work properly:
https://codepen.io/edwardsmarkf/pen/RwWGpXo
could you please look at my code & let me know what i am doing incorrectly?edwardsmarkfMemberi see the word “currently” – i have written to sales to see if there possibly a paid way to make this option available soon. i believe the community will find this feature to be very useful.
edwardsmarkfMemberi have reframed this issue here.
edwardsmarkfMemberhi Hristofor –
i am heeding your note of caution and trying a different approach using opening instead.
notice that somehow HtmlElements knows which previously selected displayed item was clicked since when combobox opens, it will automatically scroll to the previously selected item in the drop-down list:
https://codepen.io/edwardsmarkf/pen/Jjdjjzd
in other words, open the ComboBox and click on the first four items. then close the combo box, then click on the DISPLAYED items, one at a time, closing the box each time. notice the item clicked upon will be “scrolled” to the top of the list.
is there a hook or a callback somewhere that i can determine which item was clicked upon? i did see a “CustomEvent” item in my regular chrome browser console, and thought maybe the answer is in there, but am not sure where to look, or even how to access this value.
when examining the ‘event‘ item, i am not seeing any difference between clicking the drop-down arrow or the previously selected displayed item.
any suggestions are most appreciated! although i suspect you are going to suggest i wait until this feature is fully supported.
edwardsmarkfMembereven better, use ‘change’:
https://codepen.io/edwardsmarkf/pen/YzXKLVEedwardsmarkfMemberi believe you mean itemClick…..? (not itemClicked) i have already found that and have incorporated it into my working example:
https://codepen.io/edwardsmarkf/pen/BaNBwBX
as you can see, its pretty straightforward:——
let thisIndex = document.querySelector(‘smart-combo-box’).selectedIndexes.length – 1;
let thisItem = document.getElementsByClassName(‘smart-drop-down-list-selection-label’)[thisIndex] ;
thisItem.addEventListener(‘click’, function() { comboItemClicked(value); } , false) ;
——–since the combo box always puts the most recently selected item in the last place, length -1 lets us know the last position.
edwardsmarkfMemberpeter- yes you are absolutely correct, although i do have the jqwidgets license. it is best investment i ever made.
You might consider adding a couple of complete community working examples on the https://www.htmlelements.com/docs/combobox/ page. we don’t want any new person to get discouraged early on. Something like this perhaps:
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”./source/styles/smart.default.css” type=”text/css” />
<script type=”text/javascript” src=”./source/smart.element.js”></script>
<script type=”text/javascript” src=”./source/smart.button.js”></script>
<script type=”text/javascript” src=”./source/smart.scrollbar.js”></script>
<script type=”text/javascript” src=”./source/smart.listbox.js”></script>
<script type=”text/javascript” src=”./source/smart.dropdownlist.js”></script>
<script type=”text/javascript” src=”./source/smart.combobox.js”></script>
<script type=”text/javascript” >
. . . .let init = () => {
. . . . . . . .const comboBox = new smartComboBox(‘smart-combo-box#my-smart-combo-box’, { });
. . . . . . . .comboBox.dataSource = [“new item 1”,
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . “new item 2″];
. . . .}
. . . .document.readyState === ‘complete’ ? init() : window.onload = init;
</script>
</head>
<body>
<smart-combo-box id=’my-smart-combo-box’ selection-mode=”zeroOrMany” selection-display-mode=”tokens” placeholder=”Select items:”></smart-combo-box>
</body>
</html>and thanks again for saving me literally years of work by providing such time-saving widgets.
edwardsmarkfMemberThank you, although perhaps a newbie might innocently assume the demo packages from the download are intended to work as-is? I certainly understand that HTMLelements is a bit new, but i would not want a newbie to be discouraged from using the best widget package available.
note: there are a number of code typos on the page https://www.htmlelements.com/docs/combobox/<link rel=”stylesheet” href=
seven of the eight stylesheet declarations are missing the leading double-quote character.
Having used jqwidgets now for several years now, I didn’t think there was anything left to impress me. And yet here i am totally amazed once again. Thank you so much for providing such powerful, useful, and yet so economical webpage additions.edwardsmarkfMemberis there any sort of arrangement made where a jqwidgets customer can PAY to have the feature added, with the understanding the feature will be made public (available to all) ?
the reason i ask is that i am currently using another menu program in addition to the totally awesome and fantastic jqwidgets, and i would like to consolidate all future development by only using HTML-elements.
note: jqwidgets has saved me literally YEARS of work. -
AuthorPosts