Base solution for your next web application
Open Closed

Data not showing up in Selectpicker/Select2 #10898

User avatar
0
tdv.yazilim created

Hi, I downloaded the latest version of Asp.Net Zero. I am editing index.html pages for all entities. I added selectpicker or select2 class for all select box items. But it's not working. When I examined your Default Language page, I saw that it did not work the same way. How can I fix this problem.

Best regards.

js code $('.selectpicker').selectpicker({ liveSearch: true, maxOptions: 5 });

  html
  

  <div class="col-md-2">
                        <div class="form-group">
                            <label for="ContinentNameFilterId">(@L("Continent")) @L("Name")</label>

                            <select class="form-control selectpicker" data-size="7" data-live-search="true" name="continentNameFilter" id="ContinentNameFilterId">
                                <option value="-1">@L("All")</option>
                            </select>

                        </div>
                    </div>

My Project Informations

  • V.11.1
  • MVC
  • .net Core
  • Abp Framework 6.0
  • Default Theme
  • Default Settings
Go to accepted answer
2 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    You are right, the items on languages page doesn't work. We will fix it, please follow https://github.com/aspnetzero/aspnet-zero-core/issues/4250

    For a select2 sample, you can check _Selections.cshtml and _Selections.js which is used in DemoUiComponents page.

    Here is the HTML we used;

    <label for="select2MultiSelect" class="col-lg-12 form-label">Multi select</label>
<div class="col-lg-10 col-md-9 col-sm-8">
    <select id="select2MultiSelect" class="form-control select2" multiple="multiple"></select>
</div>

    Here is the JS we used;

      $('.select2').select2({
    placeholder: 'Select',
    theme: 'bootstrap5',
    selectionCssClass: 'form-select',
    ajax: {
      url: abp.appPath + 'api/services/app/DemoUiComponents/GetCountries',
      dataType: 'json',
      delay: 250,
      data: function (params) {
        return {
          searchTerm: params.term, // search term
          page: params.page,
        };
      },
      processResults: function (data, params) {
        params.page = params.page || 1;

        return {
          results: $.map(data.result, function (item) {
            return {
              text: item.name,
              id: item.value,
            };
          }),
          pagination: {
            more: params.page * 30 < data.result.length,
          },
        };
      },
      cache: true,
    },
    minimumInputLength: 1,
    language: abp.localization.currentCulture.name,
  });
  • User Avatar
    0
    tdv.yazilim created

    Thank you for support.

Assignee
No one
Labels
None yet