CODEWITHSUNDEEP
knockout.js
Henrik
Henrik

Reputation: 1807

Remove items from multi select list on dbl click

Let's say we have to lists and copy items from one list to another and then regret and want to remove only the copied items on a double click or something like that.

EDIT: Is it possible to remove selected items in an multiple select list on double click by a property instead of index, ie. Name? The idea is to later implement a sort function and then the index will change.

The code looks like this:

var SProcsViewModel = function () {
   var self = this;
   self.storedProceduresInDB1 = ko.observableArray([{
       Name: "Sp1",
       Id: 1
   }, {
       Name: "Sp2",
       Id: 2
   }, {
       Name: "Sp3",
       Id: 3
   }, {
       Name: "Sp4",
       Id: 4
   }]);
   self.storedProceduresInDB2 = ko.observableArray([{
       Name: "Sp3",
       Id: 3
   }, {
       Name: "Sp4",
       Id: 4
   }, {
       Name: "Sp7",
       Id: 7
   }, {
       Name: "Sp8",
       Id: 8
   }]);

   self.selectedStoredProceduresInDb1 = ko.observableArray();
   self.selectedStoredProceduresInDb2 = ko.observableArray();

   self.copyToDb2 = function () {
       var sprocs = [];
       console.log('self.selectedStoredProceduresInDb1()', self.selectedStoredProceduresInDb1());

       ko.utils.arrayForEach(self.selectedStoredProceduresInDb1(), function (value) {
        // console.log('arrayForEach',value,self.storedProceduresInDB2);
       var match = ko.utils.arrayFirst(self.storedProceduresInDB2(), function (item) {
          console.log('item in storedProceduresInDB2', value, item);
          return value.Id === item.Id;
        });

        if (!match) {
            console.log('No match, so add to sprocs', value);
            sprocs.push(value);
        } else {
            console.log('Match found for:', value);
        }

       });

    ko.utils.arrayForEach(self.selectedStoredProceduresInDb1(), function (value) {
        console.log('storedProceduresInDB1', value);
    });


    console.log('sprocs', sprocs);

    ko.utils.arrayPushAll(self.storedProceduresInDB2, sprocs)
    console.log('sprocs', sprocs, 'storedProceduresInDB2', self.storedProceduresInDB2());


   };

   return self;
};

ko.applyBindings(new SProcsViewModel());

JSFiddle

Upvotes: 1

Views: 861

Answers (1)

nemesv
nemesv

Reputation: 139748

You can use the event binding to subscribe on the dblclick event of the select:

<select multiple="multiple" height="5" 
     data-bind=" options: storedProceduresInDB2, 
                 optionsText: 'Name', 
                 selectedOptions: selectedStoredProceduresInDb2, 
                 event: { dblclick: removeFromDb2 } "></select>

Then in the event handler you can access the currently selected index through the event object passed in the second argument and use the index to remove the clicked item from your array:

self.removeFromDb2 = function(item, event){
    console.log(event.currentTarget.selectedIndex)
    self.storedProceduresInDB2.splice(event.currentTarget.selectedIndex, 1)
}

Demo JSFiddle.

Through the event parameter you can also access the actually clicked option element where you can get the text of the element which is your Name property:

self.removeFromDb2 = function(item, event){
    self.storedProceduresInDB2.remove(function(item) {
        return item.Name == event.target.text;
    });
}

Demo JSFiddle.

Upvotes: 3

Related Questions