Select2 BS5 Modal Problem #2348

4 Answer(s)

• 

  0

  liangshiwei created 2 years ago

  Support Team Fullstack Developer

  Hi,

  I will check it.

  Save Cancel
• 

  0

  enisn created 2 years ago

  Support Team .NET Developer

  Hi wend0rlin

  Can you please set dropdownParent parameter as your modal.

  It'll solve the problem. Read more about: https://select2.org/dropdown#dropdown-placement

  $('#mySelect2').select2({
    dropdownParent: $('#myModal')
  });
  

  ---

  Also we've solved that issue in the same way: https://github.com/abpframework/abp/pull/10734/files

  Save Cancel
• 

  0

  wend0rlin created 2 years ago

  Hello, thanks for the help I could almost make it work. I see the search field again and can filter the data list, but the remote data does not work. Before the update to BS5, the filter activated the search on the server to filter large data sets, until now I can only filter the data which was loaded on the modal start. cshtml: <abp-select asp-for="Product.ProductGroupId" asp-items="Model.ProductGroupSelectList" label="@L["ProductGroupe"].Value" />

  js:

   $('#Product_ProductGroupId').select2({
                  width: '100%',
                  dropdownParent: $('#menu-create-modal'),
                  url: abp.appPath + 'api/app/product/product-group-lookup',
                  type: 'GET',
                  dataType: 'json',
                  data: function (params) {
                      return { filter: params.term, maxResultCount: 50 }
                  },
                  processResults: function (data) {
                      var mappedItems = _.map(data.items, function (item) {
                          return { id: item.id, text: item.displayName };
                      });
  
                      mappedItems.unshift({ id: '00000000-0000-0000-0000-000000000000', text: ' - ' });
                      return { results: mappedItems };
                  },         
              });
  

  is it still possible to search on the server ?

  Save Cancel

  1
• 

  0

  enisn created 2 years ago

  Support Team .NET Developer

  If you place a select something like this: https://github.com/abpframework/abp/blob/b1170998f78a676c8685cde587282ac558f3e181/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/Create.cshtml#L57

  you can initialize from js like this: https://github.com/abpframework/abp/blob/b1170998f78a676c8685cde587282ac558f3e181/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/create.js#L23-L33

  It's a good example from the CmsKit Blog selection

  Save Cancel

  1