From 617dfea7da855ae70801c9245e9b1eee94b112d0 Mon Sep 17 00:00:00 2001 From: malik masis Date: Mon, 12 Dec 2022 15:54:24 +0300 Subject: [PATCH 1/4] Added AllowClear and Placeholder to select2 --- .../TagHelpers/Form/AbpSelectTagHelper.cs | 4 ++ .../Form/AbpSelectTagHelperService.cs | 2 + .../bootstrap/dom-event-handlers.js | 41 ++++++++++++------- 3 files changed, 32 insertions(+), 15 deletions(-) diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelper.cs b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelper.cs index 75ae03115a..58c7b1b45d 100644 --- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelper.cs +++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelper.cs @@ -38,6 +38,10 @@ public class AbpSelectTagHelper : AbpTagHelper output.Attributes.Add("data-autocomplete-filter-param-name", TagHelper.AutocompleteFilterParamName); output.Attributes.Add("data-autocomplete-selected-item-name", TagHelper.AutocompleteSelectedItemName); output.Attributes.Add("data-autocomplete-selected-item-value", TagHelper.AutocompleteSelectedItemValue); + output.Attributes.Add("data-allow-clear", TagHelper.AllowClear); + output.Attributes.Add("data-placeholder", TagHelper.Placeholder); } } diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap/dom-event-handlers.js b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap/dom-event-handlers.js index 009c32d253..06494bdc8e 100644 --- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap/dom-event-handlers.js +++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap/dom-event-handlers.js @@ -74,20 +74,26 @@ abp.dom.initializers.initializeAutocompleteSelects = function ($autocompleteSelects) { if ($autocompleteSelects.length) { $autocompleteSelects.each(function () { - var $select = $(this); - var url = $(this).data("autocompleteApiUrl"); - var displayName = $(this).data("autocompleteDisplayProperty"); - var displayValue = $(this).data("autocompleteValueProperty"); - var itemsPropertyName = $(this).data("autocompleteItemsProperty"); - var filterParamName = $(this).data("autocompleteFilterParamName"); - var selectedText = $(this).data("autocompleteSelectedItemName"); - var parentSelector = $(this).data("autocompleteParentSelector"); - if(!parentSelector && $select.parents(".modal.fade").length === 1){ + let $select = $(this); + let url = $(this).data("autocompleteApiUrl"); + let displayName = $(this).data("autocompleteDisplayProperty"); + let displayValue = $(this).data("autocompleteValueProperty"); + let itemsPropertyName = $(this).data("autocompleteItemsProperty"); + let filterParamName = $(this).data("autocompleteFilterParamName"); + let selectedText = $(this).data("autocompleteSelectedItemName"); + let parentSelector = $(this).data("autocompleteParentSelector"); + let allowClear = $(this).data("allowClear"); + let placeholder = $(this).data("placeholder"); + if (allowClear && placeholder == undefined) { + placeholder = " "; + } + + if (!parentSelector && $select.parents(".modal.fade").length === 1) { parentSelector = ".modal.fade"; } - var name = $(this).attr("name"); - var selectedTextInputName = name + "_Text"; - var selectedTextInput = $('', { + let name = $(this).attr("name"); + let selectedTextInputName = name + "_Text"; + let selectedTextInput = $('', { type: 'hidden', id: selectedTextInputName, name: selectedTextInputName, @@ -101,13 +107,13 @@ url: url, dataType: "json", data: function (params) { - var query = {}; + let query = {}; query[filterParamName] = params.term; return query; }, processResults: function (data) { - var retVal = []; - var items = data; + let retVal = []; + let items = data; if (itemsPropertyName) { items = data[itemsPropertyName]; } @@ -125,6 +131,11 @@ }, width: '100%', dropdownParent: parentSelector ? $(parentSelector) : $('body'), + allowClear: allowClear, + placeholder: { + id: '-1', + text: placeholder + } }); $select.on('select2:select', function (e) { selectedTextInput.val(e.params.data.text); From 39b87270d153c91d0b3f481dbbe4d6b48cc6fcd2 Mon Sep 17 00:00:00 2001 From: malik masis Date: Tue, 13 Dec 2022 10:12:41 +0300 Subject: [PATCH 2/4] Update framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelperService.cs Co-authored-by: Enis Necipoglu --- .../TagHelpers/Form/AbpSelectTagHelperService.cs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelperService.cs b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelperService.cs index 1d0ec265ed..350898d41d 100644 --- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelperService.cs +++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelperService.cs @@ -120,8 +120,8 @@ public class AbpSelectTagHelperService : AbpTagHelperService output.Attributes.Add("data-autocomplete-filter-param-name", TagHelper.AutocompleteFilterParamName); output.Attributes.Add("data-autocomplete-selected-item-name", TagHelper.AutocompleteSelectedItemName); output.Attributes.Add("data-autocomplete-selected-item-value", TagHelper.AutocompleteSelectedItemValue); - output.Attributes.Add("data-allow-clear", TagHelper.AllowClear); - output.Attributes.Add("data-placeholder", TagHelper.Placeholder); + output.Attributes.Add("data-autocomplete-allow-clear", TagHelper.AllowClear); + output.Attributes.Add("data-autocomplete-placeholder", TagHelper.Placeholder); } } From 20b31aeb4715add8f7d1779c3182894328894464 Mon Sep 17 00:00:00 2001 From: malik masis Date: Tue, 13 Dec 2022 10:12:48 +0300 Subject: [PATCH 3/4] Update framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap/dom-event-handlers.js Co-authored-by: Enis Necipoglu --- .../bootstrap/dom-event-handlers.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap/dom-event-handlers.js b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap/dom-event-handlers.js index 06494bdc8e..d1cbfa6b6b 100644 --- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap/dom-event-handlers.js +++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap/dom-event-handlers.js @@ -82,8 +82,8 @@ let filterParamName = $(this).data("autocompleteFilterParamName"); let selectedText = $(this).data("autocompleteSelectedItemName"); let parentSelector = $(this).data("autocompleteParentSelector"); - let allowClear = $(this).data("allowClear"); - let placeholder = $(this).data("placeholder"); + let allowClear = $(this).data("autocompleteAllowClear"); + let placeholder = $(this).data("autocompletePlaceholder"); if (allowClear && placeholder == undefined) { placeholder = " "; } From 8db76b092d8bb6a1816e9da77e99655b8d973c45 Mon Sep 17 00:00:00 2001 From: Enis Necipoglu Date: Tue, 13 Dec 2022 10:53:21 +0300 Subject: [PATCH 4/4] Update AutoComplete-Select.md --- docs/en/UI/AspNetCore/AutoComplete-Select.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/en/UI/AspNetCore/AutoComplete-Select.md b/docs/en/UI/AspNetCore/AutoComplete-Select.md index 86d8c14b8a..e0ad7ceb24 100644 --- a/docs/en/UI/AspNetCore/AutoComplete-Select.md +++ b/docs/en/UI/AspNetCore/AutoComplete-Select.md @@ -22,7 +22,8 @@ A simple usage is presented below. data-autocomplete-display-property="name" data-autocomplete-value-property="id" data-autocomplete-items-property="items" - data-autocomplete-filter-param-name="filter"> + data-autocomplete-filter-param-name="filter" + data-autocomplete-allow-clear="true"> @@ -38,6 +39,8 @@ The select must have the `auto-complete-select` class and the following attribut - `data-autocomplete-filter-param-name`: * Filter text property name. _(For example: `filter`)_. - `data-autocomplete-selected-item-name`: Text to display as selected item. - `data-autocomplete-parent-selector`: jQuery selector expression for parent DOM. _(If it's in a modal, it's suggested to send the modal selector as this parameter)_. +- `data-autocomplete-allow-clear`: If `true`, it'll allow to clear the selected value. Default value: `false`. +- `data-autocomplete-placeholder`: Placeholder text to display when no value is selected. Also, selected value(s) should be defined with the `