javascript - How do I get the changed element in a multiselect, using KendoUI? - Stack Overflow

admin管理员组

文章数量:1291102

I have a multiselect-list that acts as holder for a list of tags. I can't seem to figure out how to properly get the value of the item being changed and passed along with the changed-event. Here's my Kendo multiselect:

        @(Html.Kendo().MultiSelect()
          .Name("tags")
          .Placeholder("No tags selected for this unit")
          .BindTo(new SelectList(Model.TagsAvailable))
          .Events(e => e
                    .Select("select")
                    .Change("change"))
          .Value(Model.TagsSelected.ToArray())
          )

And here are my js-methods:

        function select(e) {
            var dataItem = this.dataSource.view()[e.item.index()];
            var param = dataItem.Text;
            var url = '/UnitDetails/TagUnit/@Model.UnitId';

            $.ajax({
                url: url,
                data: { selectedItem: param },
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    // ...
                },
                error: function () {
                    // ...
                }
            });
        };

        function change(e) {
            var dataItem = this;
            var param = dataItem.element.context.innerText;
            var url = '/UnitDetails/UnTagUnit/@Model.UnitId';

            $.ajax({
                url: url,
                data: { selectedItem: param },
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    // ...
                },
                error: function () {
                    // ...
                }
            });
        };

My problem beeing that I feel the assignment of param is just quick and dirty. Surely, there must be some other, more correct way of going about this?

I have a multiselect-list that acts as holder for a list of tags. I can't seem to figure out how to properly get the value of the item being changed and passed along with the changed-event. Here's my Kendo multiselect:

        @(Html.Kendo().MultiSelect()
          .Name("tags")
          .Placeholder("No tags selected for this unit")
          .BindTo(new SelectList(Model.TagsAvailable))
          .Events(e => e
                    .Select("select")
                    .Change("change"))
          .Value(Model.TagsSelected.ToArray())
          )

And here are my js-methods:

        function select(e) {
            var dataItem = this.dataSource.view()[e.item.index()];
            var param = dataItem.Text;
            var url = '/UnitDetails/TagUnit/@Model.UnitId';

            $.ajax({
                url: url,
                data: { selectedItem: param },
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    // ...
                },
                error: function () {
                    // ...
                }
            });
        };

        function change(e) {
            var dataItem = this;
            var param = dataItem.element.context.innerText;
            var url = '/UnitDetails/UnTagUnit/@Model.UnitId';

            $.ajax({
                url: url,
                data: { selectedItem: param },
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    // ...
                },
                error: function () {
                    // ...
                }
            });
        };

My problem beeing that I feel the assignment of param is just quick and dirty. Surely, there must be some other, more correct way of going about this?

• javascript
• kendo-ui
• kendo-asp-mvc

Share Improve this question Follow asked Jul 4, 2013 at 10:58 Nicklas Pouey-WingerNicklas Pouey-Winger 3,02377 gold badges4747 silver badges7676 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

There is no easy way (afaik) for knowing the changes. So, let do it by ourselves.

First, I'm going to save the old value using the following function.

function saveCurrent(multi) {
    multi._savedOld = multi.value().slice(0);
}

Where multi is the multi-select that we pass to the function as argument (so you can use the function for multiple multiselects).

Then, you need to implement change as follow:

change    : function (e) {
    // Retrieve previous value of `multiselect` saved using previous function
    var previous = this._savedOld;
    // These are current values.
    var current = this.value();
    // Let's save it for the next time
    saveCurrent(this);

    // The difference between previous and current are removed elements
    var diff = $(previous).not(current).get();
    console.log("removed", diff);

    // The difference between current and previous, are added elements
    diff = $(current).not(previous).get();
    console.log("added", diff);
}

Running example here http://jsfiddle/OnaBai/MapVN/

Nice answer OnaBai! very useful and helpful.

I had the same Nickla's problem. But, I needed to "save current values" at dataBound event. And it works (logging the changed values).

If you start deleting an item, it fails because the function recognizes the "change" as an "item add".

This is what I did

function dataBound(ev) {

        saveCurrent(this);
    }

    function saveCurrent(multi) {
        multi._savedOld = multi.value().slice(0);
    }

    function change(ev) {


        var previous = this._savedOld;

        var current = this.value();

        saveCurrent(this);

        var diff = $(previous).not(current).get();
        console.log("removed", diff);

        var removedSkill = diff;

        console.log("removedSkills", removedSkill);

        diff = $(current).not(previous).get();
        var addedSkill = diff;
        console.log("added", diff);
        console.log("addedSkills", addedSkill);

        if (addedSkill.length > 1 || removedSkill.length > 1) {

            if (addedSkill.length > 1) {

                addedSkill = addedSkill[addedSkill.length - 1];
                alert("Added skill code: " + addedSkill.toString());
            }

            if (removedSkill.length > 1) {
                removedSkill = removedSkill[removedSkill.length - 1];
                alert("Removed skill code: " + removedSkill.toString());
            }
        }
        else {
            if (addedSkill.length > 0) {
                alert("Added skill code: " + addedSkill.toString());
            }
            if (removedSkill.length > 0) {
                alert("Removed skill code: " + removedSkill.toString());
            }
        }


        $.ajax({
            url: "SomeUrl",
            type: "POST",
            dataType: "json",
            contentType: "application/json",
            data: JSON.stringify({ removedSkill: removedSkill, addedSkill: addedSkill })
        });
    }

Thanks again!

Iván

本文标签： javascriptHow do I get the changed element in a multiselectusing KendoUIStack Overflow