Drop down Values not populating after deleting

Hi,

I have an webix code like below.

var a = [

   {id:"movie",value:"Movie Name",type:"string"},

   {id:"movieplace", value:"movieplace", type:"string"},

   {id:"year", value:"year1", type:"string" }

];

webix.ui({

view:“window”,
id:“moviewin”,

height:300,

width:700,

modal:true,

position:“center”,

head:“Movie data”,

hidden: false,

body:{

view:"form",id:"movieform",width:600, scroll: true, 


elements:[{

  view: "layout",

  cols:[  

    {

      view:"combo",


      id:"moviedata",

      label:"Fields",

      options:a

    },

    {

      view:"text",

      label:"Value"

    },

  ]

},

          {

            cols:[

              {view:"button",


               label:"Movie Data",

               click:function(){


               }},

              {view:"button", 

               label:"Reset",

               click:function(){

               }},

              {view:"button", 

               label:"Cancel",

               click:function(){


               }},

              {view:"button", 

               label:"Add",

               click:function(){


                 $$("movieform").addView({

                   view: "layout",

                   cols:[  

                     {

                       view:"combo",
					   name:"co",
                       label:"Fields",
                       on:{
                        onChange: function(id){ 
                          let LastC = $$('movieform').elements['co'].getList().getItem(id);
							for (var i = 0; i < a.length; i++) {  
                             if(a[i].value == LastC.value){ 
                              a.splice(i,1);   
                        }
                     }}
                   },

                       options:a

                     },

                     {
                       view:"text",

                       label:"Value"

                     },
                     {view:"icon", icon:"wxi-trash",click:function(){

                       let toRemove = this.getParentView();

                       this.getParentView().getParentView().removeView(toRemove)

                     }}, 
                   ]});

               }},

            ]

          }

         ],

}
});

In the above code we have a bug like

initially the drop down and textbox is displayed and i am selcting moviename in the dropdown.

When i click on the add button one more row which has combo and textbox is adding up.

I am selecting year1 as the value from the dropdown and filling the textbox as 2006

now clicking on the add button again one more row is getting added with values like moviename and movieplace as valuesfrom the dropdown .

I will select movieplace as the value and then fill the textbox with some value.

but when i click on the trash icon which belongs to year1 it is getting deleted.

but again if i click on the add button again the row which has combo and textbox is getting added but year1 value is missing from the dropdown.

Please advice what should be done in this case.

Hi

can Anybody help me out please???

hi @Listopad

Could you please help…

When you select year1 in the dropdown the value will be removed from a. When you remove the added row the previous removed value won’t come back.

You may want to use a snippet next time:
https://snippet.webix.com/o24fnwpo

It is not a bug, the code works as it has been written: the item from the combo list is removed, but not returned. Apart from that, you spoil the original array by removing the item directly from there and do not store it anywhere, which makes it difficult to return the item when the time comes. So here it is: https://snippet.webix.com/fw3ru06l

@kuro

Thank you u really made my day.

I do have one more question.After adding one more row

In a drop down value if the value is selected and If the user clicks on the dropdown again.

i need to show only the selected value .How can i do that.

Example
If the year1 is selected in the dropdown and if the user clicks on the dropdown again it should have only year1 as the value.

But in this case it is displaying the year1 and movieplace

Regards
PrasadRaju N

Ah, now I see what you mean. Just redefine options for the current combo https://snippet.webix.com/wwfxzkxu

@kuro

You are awesome…

Thank man

Thanks, I am a woman

@kuro

In the combo box the user is able to type the value.

But i should not allow him to type . for this can i use richselect for the above code

or do i need to make anything in the combo?.

just use richselect) that’s the difference between these two views.

@kuro

Thanks a ton

@kuro

for this statement i am getting an error
const combo = toRemove.queryView(“combo”);

error:confirm is not a function

webix_debug.js

var found = this._queryView(confirm, direction, results);

Is there any other way to implement this ???

Pls help me @karo

well, since you changed “combo” to “richselect”, that’s natural

@kuro

Then is there any other way for richselect … Can you please help?

I am struggling for this

Erm, just replace “combo” with “richselect” in the line that throws the error?..

@kuro

yeah in whatever the code snippet you have shared it is not throwing the error.

But when i try to implement in my app it is throwing the error.

Is there any way other than the queryview method to implement this??

Sorry for disturbing you but i am really clueless on this requirment?

To locate the widget, you can either use its ID, or queryView. IDs must ne unique, which in this case can be achieved with webix.uid(). To my taste the ID solution is unnecessaryly cumbersome.
queryView is optimal here imho. Perhaps there are other dropdowns of a kind in your app and the method finds them as well, and this causes the trouble. In this case IDs can be used to locate the combo/richselect.

@kuro

Thanks for the info .let me give me a try and get back

@kuro

Can i post my code whatever i have tried???