Select all / Select none

[HTMLGuyLLC]

Would be nice to have a select all / select none button. Possibly done as "Select All" on the left and "Clear" on the right.

[fabianlindfors]

Great idea! I would like to add this without cluttering the UI to much. Going to think about a nice solution.

Thank you!

[circleb]

This would be an excellent addition, here's an idea for how the UI could look.

[HTMLGuyLLC]

@circleb - That looks good! Another option would be the fairly common icon of two boxes like this https://cdn0.iconfinder.com/data/icons/line-action-bar/48/select-512.png.

Personally, I think yours looks better, but might suffer of low-visibility when down-scaled. The placement looks perfect.

[fabianlindfors]

Thanks for all your suggestions, they look great! I'm not a fan of functionality hidden entirely behind icons without labels.

One thing I've been considering is something similar to how this is normally done with checkboxes where there is another checkbox at the top called "Select all". This of course has its share of UX issues (mainly blending to well with the other options) but that's fixable.

I also like to maintain locality for UX elements. Placing "select all" on the left and "clear" on the right puts them close to the elements they affect.

[HTMLGuyLLC]

@fabianlindfors - It's a good decision to stick with plain text. Mobile browsers have a hell of a time with tooltips and sometimes people are dumb and don't know what an icon means and they're too scared to "just click it".

[birender]

How do I remove Selected Option from left Side and also vice versa

Thanks

[fabianlindfors]

@birender If you mean hiding a selected option from the left side you should be able to add some CSS to hide it. Any row which has been selected will have the class selected.

[GeekJosh]

If anyone is looking for a way to implement select all/none, you can do it like this:

    var trigger_event = function (type, el) {
        var e = document.createEvent("HTMLEvents")
        e.initEvent(type, false, true)
        el.dispatchEvent(e)
    }

    var recipientList = $("#RecipientIds")

    recipientList.multi({
        "non_selected_header": "All Contacts",
        "selected_header": "Selected Recipients"
    })

    $("#recipients_selectall").click(function () {
        recipientList.children("option").prop("selected", true)
        trigger_event("change", recipientList.get(0))
    })

    $("#recipients_selectnone").click(function () {
        recipientList.children("option").prop("selected", false)
        trigger_event("change", recipientList.get(0))
    })

Or vanilla JS:

    var trigger_event = function (type, el) {
        var e = document.createEvent("HTMLEvents")
        e.initEvent(type, false, true)
        el.dispatchEvent(e)
    }

    var recipientList = document.getElementById("RecipientIds")

    multi(recipientList, {
        "non_selected_header": "All Contacts",
        "selected_header": "Selected Recipients"
    })

    document.getElementById("recipients_selectall").addEventListener("click", function () {
        var opts = recipientList.getElementsByTagName("option")
        for (let opt of opts) {
            opt.selected = true
        }
        trigger_event("change", recipientList)
    })

    document.getElementById("recipients_selectnone").addEventListener("click", function () {
        var opts = recipientList.getElementsByTagName("option")
        for (let opt of opts) {
            opt.selected = false
        }
        trigger_event("change", recipientList)
    })

[mikosa07]

If anyone is looking for a way to implement select all/none, you can do it like this:

    var trigger_event = function (type, el) {
        var e = document.createEvent("HTMLEvents")
        e.initEvent(type, false, true)
        el.dispatchEvent(e)
    }

    var recipientList = $("#RecipientIds")

    recipientList.multi({
        "non_selected_header": "All Contacts",
        "selected_header": "Selected Recipients"
    })

    $("#recipients_selectall").click(function () {
        recipientList.children("option").prop("selected", true)
        trigger_event("change", recipientList.get(0))
    })

    $("#recipients_selectnone").click(function () {
        recipientList.children("option").prop("selected", false)
        trigger_event("change", recipientList.get(0))
    })

Or vanilla JS:

    var trigger_event = function (type, el) {
        var e = document.createEvent("HTMLEvents")
        e.initEvent(type, false, true)
        el.dispatchEvent(e)
    }

    var recipientList = document.getElementById("RecipientIds")

    multi(recipientList, {
        "non_selected_header": "All Contacts",
        "selected_header": "Selected Recipients"
    })

    document.getElementById("recipients_selectall").addEventListener("click", function () {
        var opts = recipientList.getElementsByTagName("option")
        for (let opt of opts) {
            opt.selected = true
        }
        trigger_event("change", recipientList)
    })

    document.getElementById("recipients_selectnone").addEventListener("click", function () {
        var opts = recipientList.getElementsByTagName("option")
        for (let opt of opts) {
            opt.selected = false
        }
        trigger_event("change", recipientList)
    })

Hi and thanks for the proposal ! Could you explain how to implement this code please ?

@fabianlindfors Could you help me please ? Are you still working on this "issue" ?