Partially data loading a select2 dropdownlist

Question

I have the below sample code that gets a list of vendors.

 public IEnumerable VendorList()
        {
            var list = new List<SelectListItem>();
            IEnumerable<Vendor> vendorList = this.db.Vendors.OrderBy(n => n.VendorID).ToList();
            foreach (Vendor vendor in vendorList)
            {
                list.Add(new SelectListItem { Value = Convert.ToString(vendor.ID), Text = vendor.VendorID });
            }
            return list;
        }

I'm then putting the list in a VendorList viewbag like below

    [NoCache]
    private void GetData()
    {
       ViewBag.VendorList = this.VendorList();
    }

I'm then displaying my list in an mvc dropdown below

@Html.DropDownList("ddlVendorList", ViewBag.VendorList as IEnumerable<SelectListItem>, "Select Vendor", new { @class = "form-control input-sm-mfc-dropdownlist select2" })

The problem i'm having is that the dropdownlist is unresponsive because the number of rows in the list is a lot. I'm using select2 to enable the user type in the dropdown so that they can get auto suggest support other than scrolling a dropdownlist of more than 6768 items.

Is there a way i can partially load data depending on what the user is typing, something like say a batch of 20 rows as the user types?

Below is how i'm simply initializing select2

  $(".select2").select2();

Community · Accepted Answer · 2017-05-23 12:24:03Z

At one time i faced with the problem. I think in our case it is necessary to create a GET function and use ajax.

How to use ajax in select2: https://select2.github.io/examples.html#data-array

How to use ajax + MVC 3: Return List to ajax mvc3

Сlass SelectListItem looks like this

class SelectListItem {
    public int id {get; set;}
    public string text {get; set; }
}

I filled out a list of test values

var list = new List<SelectListItem>();
list.Add(new SelectListItem{ id=0, text="Mapel"});
list.Add(new SelectListItem{ id=2, text="Sunny"});

Next, create a function in the controller

public ActionResult GetVendors(string query, int page)
{
   var pageSize = 20;
   var result = list.Where(i => i.Text.Contains(query));
   var total = result.Count();

   return Json( new {
            items = result.Skip(page * pageSize).Take(pageSize),
            total = total
        }, JsonRequestBehavior.AllowGet);
}

Add the following code to initialize select2

$(".select2").select2({
  ajax: {
    url: "/GetVendors",
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        query: params.term, // search term
        page: params.page
      };
    },
    processResults: function (data, params) {
      params.page = params.page || 1;
      return {
        results: data.items,

        pagination: {
          more: (params.page * 20) < data.total
        }
      };
    },
    cache: true
  },
  escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
  minimumInputLength: 1
});

barbq · Accepted Answer · 2016-06-14 07:03:15Z

0

You can use ajax to achieve this. Send keyword via ajax to controller, and in controller get back the sorted data to your view, like this.

public JsonResult GetSortedData(string keyword)
{
     // SORT YOUR DATA ACCORDING TO KEYWORD PARAM
     return result.ToJsonResult();
}

answered Jun 14, 2016 at 7:03

barbq

212 bronze badges

Collectives™ on Stack Overflow

Partially data loading a select2 dropdownlist

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related