Load large dataset

[Bernard Jurlina]

Is there some full example of loading large dataset into the combobox control using virtualization? I tried like this, but the combobox shows Bad request message.

<div class="form-group">

<a rel='nofollow' href="#" onclick="otvoriStranku('OsiguranikStrankaId');" class="control-label" title="Otvori podatke odabranog osiguranika">Osiguranik</a>

<div class="input-group mb-3" style="flex-wrap:nowrap;">

<ejs-combobox id="OsiguranikStrankaId" ejs-for="Polica.OsiguranikStrankaId" enableVirtualization="true" popupHeight="200px"

  cssClass="combo-required">

<e-data-manager adaptor="UrlAdaptor" url="/DataSets/DsPolicaStrankaNovo" crossDomain="true"></e-data-manager>

<e-combobox-fields text="PrezimeIme" value="StrankaId"></e-combobox-fields>

</ejs-combobox>

<div class="input-group-append" style="height:37px;">

<button class="btn btn-info" type="button" onclick="novaStranka();" id="btnOsi" title="Otvori unos nove stranke u novom prozoru">...</button>

</div>

</div>

<span asp-validation-for="Polica.OsiguranikStrankaId" class="text-danger"></span>

</div>

public ActionResult DsPolicaStrankaNovo([FromBody] Data dm)

{

var data = (from r in _context.Stranka

  orderby r.Prezime, r.Ime

  select new

  {

  r.StrankaId,

  PrezimeIme = ((r.Prezime ?? "") + " " + (r.Ime ?? "") + " (" + (r.Oib ?? "") + ")").Trim(),

  r.Oib

  });

var Data = data.ToList();

var count = data.Count();

if (dm.where != null)

{

Data = (from cust in Data

where cust.PrezimeIme.ToLower().StartsWith(dm.@where[0].value.ToString())

select cust).ToList();

}

if (dm.take != 0)

Data = Data.Take(dm.take).ToList();

return Json(Data);

}

Thanks!

Attachment: p4_4c958c3e.png

[Yohapuja Selvakumaran]

Hi Bernard,

Thank you for reaching out to us.

Yes, you can load a large dataset into the ComboBox component using virtualization. By default, the ComboBox initially loads 30 items, and on each scroll action, the next 30 items will be loaded automatically. This is the standard behavior when virtualization is enabled.

We have created a working sample for your reference that demonstrates loading a large dataset with virtualization enabled. Please find the sample below:

 

        <ejs-combobox id="remote" placeholder="OrderId" popupHeight="200px" allowFiltering="true" enableVirtualization="true">

            <e-data-manager adaptor="UrlAdaptor" url="https://services.syncfusion.com/js/production/api/VirtualDropdownData" crossDomain="true"></e-data-manager>

            <e-combobox-fields text="OrderID" value="OrderID"></e-combobox-fields>

        </ejs-combobox>

 

For more information, you can also refer to the following demo and documentation links:

Demo:  https://ej2.syncfusion.com/aspnetcore/combobox/virtualscroll#/fluent2

Documentation:
https://ej2.syncfusion.com/aspnetcore/documentation/combo-box/virtual-scroll

If the issue still persists, we kindly request you to share a runnable sample of your application along with a video illustration of the issue. This will help us better understand the problem and provide you with a more accurate solution.

Regards,

Yohapuja S

Attachment: Combobox_Virtualization_78591ff9.zip

[Bernard Jurlina]

Yohapuja, hi!

Thank you for your help. The problem vas in returned json from actionresult, I didn't have the count in it. 

Regards,

Bernard.

[Yohapuja Selvakumaran]

Hi Bernard Jurlina,

We’re glad to hear you identified the issue with the missing count in the returned JSON. To assist you further, we’ve created a sample demonstrating how to return data from a ComboBox using a JSON response, including the proper count value.

Please refer to the sample code below for your reference:

 

public ActionResult UrlDatasource([FromBody] Data dm)

 {

     var val = OrdersDetails.GetAllRecords();

     var Data = val.ToList();

     var count = val.Count();

     if (dm.where != null)

     {

         Data = (from cust in Data

                 where cust.ShipCountry.ToLower().StartsWith(dm.@where[0].value.ToString())

                 select cust).ToList();

     }

     if (dm.take != 0)

         Data = Data.Take(dm.take).ToList();

     return Json(Data);

 }

 

Regards,

Yohapuja S

Attachment: Combobox_controller_8aa1b96b.zip