Editor Select2 with large data, slow loading

Editor Select2 with large data, slow loading

vincmeistervincmeister Posts: 136Questions: 36Answers: 4
edited January 2020 in Editor

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

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,665Questions: 1Answers: 10,096 Site admin

    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

  • vincmeistervincmeister Posts: 136Questions: 36Answers: 4

    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

  • allanallan Posts: 61,665Questions: 1Answers: 10,096 Site admin
    Answer ✓

    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

  • vincmeistervincmeister Posts: 136Questions: 36Answers: 4

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

    Danny

This discussion has been closed.