locked
Rich multi-level dropdownlist RRS feed

  • Question

  • User-1858220497 posted

    Hi

    I want to have a multi-level DropDownList to enable the user to select easily a product instead of having several simple Asp.net dropdownlists. A single dropdownlist that enables user to drill down to desired item.

    After click on this rich dropdownlist a beautiful list of categories appears, then user can select a subcategory, then a beautiful list of Products appears. And finally user can select a desired product. Something like this "category>subcategory>product" will appears finally.

    User can also type a name of product and select one from all possible suggested values. I also need to have event handler with this rich dropdownlist.

    I tried to use update panel but it is so slow! I think it needs Ajax, Html5 and JQuery. But I do not know how to implement it. Please consider to the following example:

    it is possible to close the ballon or return to a higer hirarkey. i really appreciate for kindly helps

    Thursday, July 7, 2016 7:48 PM

Answers

  • User61956409 posted

    Hi koohbor323,

    There is one at the "http://my.niazerooz.com/advertisement/ad/create/"

    First field is a rich dropdownlist as i need.

    I could not share you a same dropdown plugin you want, but I’d like to share you my idea. If you check the html structure of “multi-level DropDownList” using F12 developer tools, you will find that it is rendered as two parts, one part is rendered like a dropdown, other part is rendered as text box and many items (or tags). It could toggle the visibility of these parts element, you could try to create it based on the html with styles you view in F12 developer tools.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 11, 2016 6:52 AM

All replies

  • User61956409 posted

    Hi koohbor323,

    I tried to use update panel but it is so slow! I think it needs Ajax, Html5 and JQuery. But I do not know how to implement it.

    Yes, you could use jQuery AJAX to perform an asynchronous HTTP (Ajax) request to fetch and load data (subcategory) and on success callback function you could dynamically generate <select> for subcategory.

    http://www.aspsnippets.com/Articles/jQuery-AJAX-call-with-parameters-example-Send-parameters-to-WebMethod-in-jQuery-AJAX-POST-call.aspx

    User can also type a name of product and select one from all possible suggested values.

    For this requirement, you could try to use jQuery Autocomplete widget.

    https://jqueryui.com/autocomplete/

    Best Regards,

    Fei Han

    Friday, July 8, 2016 6:39 AM
  • User-1858220497 posted

    Hi Fei Han

    I am really thank you for your answer, but I am seeking some kind of dropdownlist as i explained. There is one at the "http://my.niazerooz.com/advertisement/ad/create/"

    First field is a rich dropdownlist as i need.

    Friday, July 8, 2016 9:53 AM
  • User61956409 posted

    Hi koohbor323,

    There is one at the "http://my.niazerooz.com/advertisement/ad/create/"

    First field is a rich dropdownlist as i need.

    I could not share you a same dropdown plugin you want, but I’d like to share you my idea. If you check the html structure of “multi-level DropDownList” using F12 developer tools, you will find that it is rendered as two parts, one part is rendered like a dropdown, other part is rendered as text box and many items (or tags). It could toggle the visibility of these parts element, you could try to create it based on the html with styles you view in F12 developer tools.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 11, 2016 6:52 AM
  • User-1858220497 posted

    Someone told me that it is possible to implement by "

    Single Page Application: KnockoutJS template"

    But i am not sure , is it possible? if yes, then is there any sample to implement this kind of selection instead of simple dropdownlists?

    Monday, July 11, 2016 9:36 AM
  • User61956409 posted

    Hi koohbor323,

    I’m not sure if an existing KnockoutJS template could help you implement a similar dropdown you want. but as I mentioned in my previous reply, you could select the element of dropdown using F12 developer tools, and then you will see both html markup and CSS code, and you could refer to these html and CSS to create a similar dropdown.

    Best Regards,

    Fei Han

    Tuesday, July 12, 2016 7:24 AM
  • User-1858220497 posted

    Hi Fei Han
    I am really thank you for answers Smile
    So I think this is a fully custom control.  I should dive to AJAX and jquery worldCry

    Tuesday, July 12, 2016 7:42 AM
  • User-1858220497 posted

    I could not share you a same dropdown plugin you want, but I’d like to share you my idea. If you check the html structure of “multi-level DropDownList” using F12 developer tools, you will find that it is rendered as two parts, one part is rendered like a dropdown, other part is rendered as text box and many items (or tags). It could toggle the visibility of these parts element, you could try to create it based on the html with styles you view in F12 developer tools.

    I tried but it's so hard to me doing this and I think Javascript is painful, I am really confused.

    Could you please help me more?

    I really appreciate your help…

    Monday, July 25, 2016 5:12 PM