Data not showing up in Selectpicker/Select2 #10898

tdv.yazilim created 2 years ago

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

2 Answer(s)

ismcagdas created 2 years ago

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,
  });

0

tdv.yazilim created one year ago

Thank you for support.

Have an answer to this question? Log in and write your answer.