[Solved] DropdownTreeList or Multiselect with Numeric Input

[Lee]

Is there a Kendo UI Jquery component that I can use which will allow me to have a multiselect (preferably a dropdowntreelist) with a quantity? Here is an example of what I mean: 

https://stackoverflow.com/questions/50972047/multiselect-list-with-quantity-option-for-each-item

[Vasko]

Hello Lee,

I hope you are doing well!

Unfortunately, there is no single Kendo UI jQuery widget that does multiselect + quantity out of the box, but you can build it by combining the MultiSelect and NumericTextBox.

The MultiSelect handles item selection with autoClose: false so the dropdown stays open for picking multiple items. On each change event, a quantity panel renders below with a NumericTextBox for every selected item. Quantities are tracked in a simple object and persist when items are added or removed. The summary text updates automatically in the format "3 x Apple, 2 x Pineapple".

Below you can see the sample implementation and you can also test it in this Dojo:

<label for="multiselect">Products</label>
<select id="multiselect"></select>
<div id="quantity-panel"></div>
<label for="order-summary">Generated text</label>
<input id="order-summary" class="summary-input" type="text" readonly placeholder="Selections will appear here" />

#multiselect,
.summary-input {
  width: 100%;
}

#quantity-panel {
  margin-top: 0.75rem;
}

.qty-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid #e8e3d9;
}

.qty-row:last-child {
  border-bottom: none;
}

.qty-label {
  flex: 1;
}

.qty-row .k-numerictextbox {
  width: 5.5rem;
}

$(document).ready(() => {
    let quantities = {};
    let multiselect = $("#multiselect").kendoMultiSelect({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: [
            { text: "Apple", value: "apple" },
            { text: "Banana", value: "banana" },
            { text: "Pineapple", value: "pineapple" }
        ],
        placeholder: "Select products...",
        autoClose: false,
        change() {
            renderQuantityPanel();
            updateSummary();
        }
    }).data("kendoMultiSelect");

    function renderQuantityPanel() {
        let panel = $("#quantity-panel").empty();
        let items = multiselect.dataItems();

        if (!items.length) return;

        items.forEach((item) => {
            let { value: id, text: name } = item;

            let row = $('<div class="qty-row"></div>');
            row.append(`<span class="qty-label">${kendo.htmlEncode(name)}</span>`);
            let input = $('<input class="qty-input" />');

            row.append(input);
            panel.append(row);

            input.kendoNumericTextBox({
                min: 1,
                max: 999,
                value: quantities[id] || 1,
                format: "n0",
                decimals: 0,
                restrictDecimals: true,
                change() {
                    quantities[id] = this.value() || 1;
                    updateSummary();
                },
                spin() {
                    quantities[id] = this.value() || 1;
                    updateSummary();
                }
            });

            if (!quantities[id]) quantities[id] = 1;
        });
    }

    function updateSummary() {
        let parts = multiselect.dataItems().map((item) => {
            let qty = quantities[item.value] || 1;
            return `${qty} x ${item.text}`;
        });

        $("#order-summary").val(parts.join(", "));
    }
});

Try this approach and see if it will work for your case.

Regards,
Vasko
Progress Telerik