search

OPADA-Eng / ticnat-ns-plugins

Apache License 2.0
3 stars 0 forks source link

[ASK][searchable-select] search and select items not working #5

Open atmanegara opened 1 year ago

atmanegara commented 1 year ago

ns 8.5.3 using javascript plain my code ` // xml file

<SS:SearchableSelect render="drop" items="{{ items_unit }}" hint="Please select some countries" modal_title="Countries" search_param="name" primary_key="code" change="onSelect" /> `

image
OPADA-Eng commented 1 year ago

Hi Can you please add js code for your view model.

atmanegara commented 1 year ago

Hi Can you please add js code for your view model.

`export function onNavigatedTo(args){ const page = args.object GModel.list_data_unit('').then(function(data){

//items_unit = new ValueList(data); contextItem.set('items_unit',data); contextItem.set("itemsSelectedIndexUnit", undefined);

}) page.bindingContext = contextItem;

}`

response return data [{ "code": "2", "name": "BADAN PENGELOLA PAJAK DAN RETRIBUSI DAERAH DAERAH" }, { "code": "3", "name": "BADAN PERENCANAAN PEMBANGUNAN, PENELITIAN DAN PENGEMBANGAN DAERAH" }, { "code": "4", "name": "BADAN KEPEGAWAIAN DAN PENGEMBANGAN SUMBER DAYA MANUSIA DAERAH" }, { "code": "5", "name": "BADAN PENANGGULANGAN BENCANA DAERAH" }, { "code": "6", "name": "BADAN PENGELOLAAN KEUANGAN DAN ASET DAERAH" }, { "code": "7", "name": "DINAS KESEHATAN" }, { "code": "8", "name": "DINAS PERDAGANGAN" }, { "code": "9", "name": "DINAS KEPEMUDAAN, OLAHRAGA DAN PARIWISATA" }, { "code": "10", "name": "DINAS SOSIAL, PENGENDALIAN PENDUDUK, KELUARGA BERENCANA, PEMBERDAYAAN PEREMPUAN, DAN PERLINDUNGAN ANAK" }, { "code": "11", "name": "DINAS PENDIDIKAN" }, { "code": "12", "name": "DINAS LINGKUNGAN HIDUP DAN PERHUBUNGAN" }, { "code": "13", "name": "DINAS KOMUNIKASI DAN INFORMATIKA" }, { "code": "14", "name": "DINAS KETAHANAN PANGAN DAN PERIKANAN" } }]

https://github.com/OPADA-Eng/ticnat-ns-plugins/assets/9096711/d9a1d76f-ee83-480c-af8e-fdb00e07bd85

this use render="drop", but If you use the "render = label" tag, an error message appears when you click the dropdown

is there any example using plain javascript?

OPADA-Eng commented 1 year ago

I see the problem is you are not using the appropriate data type for the items data array it should be ObservableArray data type. That's the reason it breaks when you press on it. try it this way:

GModel.list_data_unit('').then(function(data){

//items_unit = new ValueList(data);
contextItem.set('items_unit',new ObservableArray(data));
contextItem.set("itemsSelectedIndexUnit", undefined);

})
atmanegara commented 1 year ago

ok the error problem is resolved, only the search problem remains unresolved? image

OPADA-Eng commented 1 year ago

Can you share the entire code so I can check the problem?

atmanegara commented 1 year ago

Can you share the entire code so I can check the problem?

this xml file

image

code

image

this is the data item

image

I don't know if there is still a property / function / additional code for "search"

OPADA-Eng commented 1 year ago

Where is the item_template?

atmanegara commented 1 year ago

in the example don't use item_template and I don't know that property

`

`

OPADA-Eng commented 1 year ago

use this:

<SS:SearchableSelect render="label" selected="{{ selected }}" items="{{ countries }}" hint="Please select some countries" modal_title="Countries" search_param="name" primary_key="code" change="{{ onSelect }}">
          <SS:SearchableSelect.itemTemplate>
            <GridLayout class="item" height="50" columns="*,100">
              <Label col="0" class="text-center" text="{{ name }}" textWrap="true" />
              <Label col="1" class="text-center" text="{{ code }}" textWrap="true" />
            </GridLayout>
          </SS:SearchableSelect.itemTemplate>
        </SS:SearchableSelect>
atmanegara commented 1 year ago

use this:

<SS:SearchableSelect render="label" selected="{{ selected }}" items="{{ countries }}" hint="Please select some countries" modal_title="Countries" search_param="name" primary_key="code" change="{{ onSelect }}">
          <SS:SearchableSelect.itemTemplate>
            <GridLayout class="item" height="50" columns="*,100">
              <Label col="0" class="text-center" text="{{ name }}" textWrap="true" />
              <Label col="1" class="text-center" text="{{ code }}" textWrap="true" />
            </GridLayout>
          </SS:SearchableSelect.itemTemplate>
        </SS:SearchableSelect>

the same

https://github.com/OPADA-Eng/ticnat-ns-plugins/assets/9096711/b4ccd994-ca34-4768-b0ca-a34b8a766869

image