Slow opening

[etwoss]

Hi

I have a TIWCGJQDropDown on my form, containing 2500 items, on our production evironment , opening the dropdown is very slow.
I have pre-loaden all items in the create of the form.

Is there any better way (performance wise) to do this?

Eric

[Alexander Bulei]

Hi Eric,

As I said in remote support, you can't render so many items in browser, because for users with lower pc/configuration, the browser will freeze...

Use the DataLink.ListDataSource property, in this way, the dropdown will renderize only small amount of records (ListFetchCount), and on scroll will render more as needed.

Best Regards.

[etwoss]

Hi

I just tried, but typing an existing value which is not in list will not find it

Eric

[fduenas]

Hi Eric. As Alex, they are too much items to browse every time so you have two options

1) Open yourdataset once, as you said in the oncreateform, and use ListDataSource, ListFieldNames, ListFilterFormat and ListFetchCount to filter the opened Dataset. Also ty to ad an index on that field so the Filter 'LIKE' can work faster

2) You can leave the above properties nil and use 'TIWCGJQDropDownSelect.OnGetDropDownData' event
Please chek the JqueryDEMO, specially the CGJQDropdown Frame to see examples
Ex:

Code: Select all

      IWCGJQDropDownSelect.JQDropDownOptions.AttachTo:= jqddatInput;
        IWCGJQDropDownSelect.JQDropDownOptions.MinimumInputLength:= 2;
        IWCGJQDropDownSelect.OnGetDropDownData:= IWCGJQDropDownSelectGetDropDownData;
        IWCGJQDropDownSelect.JQDropDownOptions.InfiniteScroll:= True;
        IWCGJQDropDownSelect.JQDropDownOptions.Ajax.QuietMillis:= 100;


In the method assigned you can have something like this:

Code: Select all

procedure TIWJQDropDownFrame.IWCGJQDropDownSelectGetDropDownData(Sender: TObject; const ATerm: string;
  const APage: Integer; var AJSon: ISuperObject; var AIsMore: Boolean);
const
  PageRecs = 50;
var
  DescField: TField;
  ItemJSon: ISuperObject;
  SQL: string;
  RecPos: Integer;
  i: Integer;
begin
  SQL:= 'select * from products where ProductDescription like ' + QuotedStr('%'+ATerm+'%');
  if not ADOQuery.Active or (SQL <> ADOQuery.SQL.Text) then
  begin
    ADOQuery.Close;
    ADOQuery.SQL.Text:= SQL;
    ADOQuery.Open;
  end;

  DescField:= ADOQuery.FieldByName('ProductDescription');

  AJSon:= TSuperObject.Create(stArray);

  if APage = 0 then // ALL
  begin
    ADOQuery.First;
    while not ADOQuery.Eof do
    begin
      ItemJSon:= TSuperObject.Create(DescField.AsString);
      AJSon.AsArray.Add(ItemJSon);
      ADOQuery.Next;
    end;
  end
  else // FETCH PageRecs
  begin
    RecPos:= Pred(APage)*PageRecs;
    if RecPos < 1 then
      RecPos:= 1;

    if ADOQuery.RecNo <= 0  then
    begin
      ADOQuery.First;
      if ADOQuery.MoveBy(RecPos-1) <> RecPos-1 then Exit;
    end
    else
    begin
      ADOQuery.MoveBy(RecPos - ADOQuery.RecNo);
      if ADOQuery.RecNo <> RecPos then Exit;
    end;

    i:= 0;
    while not ADOQuery.Eof and (i < PageRecs) do
    begin
      ItemJSon:= TSuperObject.Create(DescField.AsString);
      AJSon.AsArray.Add(ItemJSon);
      ADOQuery.Next;
      inc(i);
    end;
    AIsMore:= not ADOQuery.Eof;
  end;
end;



[etwoss]

Hi

Thanks, this is working fine, it ther any way to still use the ID field (so not only have a description but also an ID) so i can use datalink to the ID.

Eric

[fduenas]

Hi

Thanks, this is working fine, it ther any way to still use the ID field (so not only have a description but also an ID) so i can use datalink to the ID.

Eric

Please check the JQueryDemoV3_IWXX demo there are some examples in the CJJQDropdown Frame where can take idea from.
In this case there is a way to add not only a description:

Code: Select all

  JSonObjArr:= TSuperObject.Create(stArray);
  JSonObj:= SO();
  JSonObj.S['id']:= 'CA';
  JSonObj.S['text']:= 'California';
  JSonObjArr.AsArray.Add(JSonObj);
  JSonObj:= SO();
  JSonObj.S['id']:= 'MA';
  JSonObj.S['text']:= 'Massachusetts';
  JSonObjArr.AsArray.Add(JSonObj);


So, reading the component documentation and jquery plugin documentation maybe this can work using the example on previous reply:

Code: Select all

    ...
    ...
    while not ADOQuery.Eof do
    begin
      ItemJSon:= SO();
      ItemJSon.S['value']:= ADOQuery.FieldByName('IdFieldName').asString; //here you store the ID
      ItemJSon.S['label']:= ADOQuery.FieldByName('DescriptionFieldName').asString; //here you store the Description Value   
      ItemJSon.S['text']:= ADOQuery.FieldByName('DescriptionFieldName').asString; ///this optional and dont know really what that is for :D but try to assign the same value as you do for 'label'   
AJSon.AsArray.Add(ItemJSon);
      ADOQuery.Next;
    end;
    ...
    ...


Also there is an event named OnDataLinkFilterDataSet, where you can asisgn the filter to the List dataset, so maybe that can be a better option with less code.

@Alex Bulei: can you modify the demo so it can show the way how to use the 'value','label' and 'text' items? It can be didactical

[etwoss]

Great thanks!

[etwoss]

Hi

I looked at the demo and i'm missing the following:
1) when using
JSonObj.S['id']:= 'CA';
JSonObj.S['text']:= 'California';

How to retrieve the ID when an item is selected ?
It looks like the text value of the dropdown contains the ID is that the way to go?

2) Using the dropdown this way, i think, its not possible anymore to use datalink?


Eric