Editor Select2 with large data, slow loading

vincmeister

Hi,
Happy 2020,
I'm facing a problem with 4000+ rows data, when using select2 plugin. Is there any trick to speed up the loading process?
I'm using standard code

my php code

Field::inst( 'tdpenerimaanbarang.idmhbarang' )
   ->options( Options::inst()
   ->table( 'mhbarang' )
   ->value( 'id' )
   ->label( ['kode','nama'] )
   ->where( function ($q) {
      $q->where( 'is_active', 1 );
   })
  ->render( function ( $row ) {
      return $row['kode'].' - '.$row['nama'];
   } )
  ->order( 'nama' )
  ),
Field::inst( 'mhbarang.kode' ),
Field::inst( 'mhbarang.nama' ),

my js

fields: [ 
{
   label: "Barang:",
   name: "tdpenerimaanbarang.idmhbarang",
   type: "select2"
}

Link Demo
please advise, thank you

BR,
Danny

allan

You might need to add ->limit(25) (or similar number) to the Options class instance. Otherwise it will return all 4000+ rows which is going to take a little while for Select2 to render.

If you need all 4000+ rows rendered, then you'll need to ask the Select2 folks how their component can be optimised.

Allan

vincmeister

Hi Allan,
Thanks for your reply
If using ->limit() , the options will be limited

i try this code on js and removing the php field options, much better, but on form edit, the selected value not showing. any clue?

opts: {
                            ajax: {
                                url: "function/root/load_select2.php",
                                dataType: 'json',
                                data: function (params) {
                                    return {
                                        table_name: 'mhbarang',
                                        field_name: 'id,kode,nama',
                                        where: 'is_active = 1',
                                        orderby: 'kode',
                                        q: params.term, // search term
                                        page: params.page,
                                        rows: 10
                                    };
                                },
                                processResults: function (data) {
                                    return {
                                        results: $.map(data, function(obj) {
                                            return { id: obj.id, text: obj.kode + " - " + obj.nama };
                                        })
                                    };
                                },
                                minimumInputLength: 5,
                                maximum: 10,
                                delay: 500,
                                maximumSelectionLength: 5,
                                minimumResultsForSearch: -1,
                            },
                        }

or is there any other field type suggested?

thanks

allan

Might it be that the select value is not included in the list of results? You might need to make sure that it is select? I'm afraid I haven't used Select2 in paged mode like this, so I'm not certain.

Allan

vincmeister

Hi Allan,
thanks for the reply. Yeah you're right.
the select value is not included in the list of result
thank you

Danny