Kendo Dropdownlist Binding Setelah Input Filter User

Ada kebutuhan client yang ingin me-load dropdown username setelah pengguna mengetikkan huruf terlebih dahulu. Jika belum, dropdown tidak di-load.

Pada Controller ditambahkan kondisi saat:

  1. Belum memiliki value, belum disearch
  2. Belum memiliki value, sudah disearch
  3. Sudah memiliki value, belum disearch
//lib
List<SelectListItem> options = new List<SelectListItem>();
List<User> users = new List<User>();
FieldHelper relationField = new FieldHelper(Table.Profile, Field.PropertyValueStrings); // Untuk Fullname user

FilterQuery filter = new FilterQuery();
if (param.Filter != null) // Sudah disearch
{
     if (param.Filter.Filters.Any(x => x.Value.ToString() != "")) // Jika sudah disearch kemudian dihapus kembali, tidak di-load
     {
          FilterQuery termFilter = new FilterQuery(FilterLogic.Or);
          termFilter.AddFilter(Field.UserName, FilterOperator.Contains, param.Filter.Filters[0].Value);
          termFilter.AddFilter(relationField, FilterOperator.Contains, param.Filter.Filters[0].Value);
          filter.AddFilter(termFilter); // Filter username atau fullname
          users = await RepoUser.FindAllAsync(filter);
     }
}
else if ((args != null) && args.Any()) // Sudah ada value
{
      if (args.Length > 0)
      {
            FilterQuery filterUser = new FilterQuery(Field.UserName, FilterOperator.Equals, args.ElementAt(0).ToString());
            users.Add(await RepoUser.FindAsync(filterUser));
      }
 }

//algorithm
foreach (User user in users)
{
     if (user != null)
     {
            string fullName = user?.Profile?.PropertyValueStrings ?? "";
            SelectListItem o = new SelectListItem
            {
                  Text = string.IsNullOrWhiteSpace(fullName) ? user.UserName : $"{fullName} ({user.UserName})",
                  Value = user.UserName
            };

            options.Add(o);
      }
}

return options;

sehingga pada Javascript tinggal menambahkan fungsi untuk memanggil controller tersebut

bindAllUser("#UserName");

function bindAllUser(elementSelector) {
     var dropDownList = dropdownListGenerator($(elementSelector), "@Url.Action(ActionSite.BindingOption)", "@OptionType.ALLUSERS", "@Field.UserName", "@Component.OptionLabel", true, [$(elementSelector).val()]);
     return dropDownList;
}

Levanji Prahyudy has written 8 articles

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>