How to create a MultiSelect and DropDown with serverside features

[Ali]

How do I create a multi-select or a drop-down list in Angular with server-side paging, sorting, and filtering, as well as a preselected value feature for edit form controls?

For instance, when I access the edit screen, the dropdown and multi-select components should already be populated with the corresponding values.

Note that my frontend is Angular and my backend is ASP.NET Core Web API.

[Priyanka Karthikeyan]

Hi Ali,

 

Greetings from Syncfusion support.

 

We have prepared a sample based on the information provided. In this sample, we handle sorting and filtering on the server side and bind the preselected value using the value property.

 

 

index.cshtml

<div class='control-wrapper'>
    <div id='url-data' class='col-lg-6' style='padding-top:15px'>
        <div class='content'>
            <ejs-dropdownlist id="country" value="@ViewBag.Value" placeholder="Select a Country" allowFiltering="true" query="query" >
                <e-data-manager adaptor="UrlAdaptor" url='@Url.Action("UrlCountyDataSource", "Home")' crossDomain="true"></e-data-manager>
                <e-dropdownlist-fields value="countryId" text="countryName"></e-dropdownlist-fields>
            </ejs-dropdownlist>
        </div>

 

    </div>
</div>

 

<script type="text/javascript">
    var query = new ej.data.Query().sortBy('CountryName', 'descending').take(10);
</script>

HomeController.cs

public IActionResult Index()
{
    ViewBag.Value = "32";
    return View();
}

public ActionResult UrlCountyDataSource([FromBody] DataManagerRequest dm)
{
    IEnumerable DataSource = CountriesList();
    DataOperations operation = new DataOperations();
    if (dm.Where != null && dm.Where.Count > 0) //Filtering
    {
        DataSource = operation.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator); //filtering
    }
    if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting
    {        
        DataSource = operation.PerformSorting(DataSource, dm.Sorted);    //sorting
    }  
     if (dm.Take != 0)
        DataSource = operation.PerformTake(DataSource, dm.Take);
    return Json(DataSource);
}
 

 

Please note that while we do not support paging in the dropdown, we do have virtual scrolling support. For more details, please refer to the following UG documentation.

 

https://ej2.syncfusion.com/aspnetcore/documentation/drop-down-list/virtual-scroll

 

Regards,

Priyanka K

Attachment: ASPCoreSamples_7c39a713.zip