Can anyone help me with an working example of below scenario?
Select2 option with loading data through array with default selected value and in case of edit mode changing the selected value according to users requirement. This is my code but it is not working.
<input type="hidden" id="selectCountry" class="selectCountry" style="width:100%" />
JS
var displayOptions = [{id:'1',text:'test'},{id:'2',text:'test1'},
{id:'3',text:'test2'},{id:'4',text:'test3'},
{id:'5',text:'Do not display'}]
$(".selectDisplayOptions").select2({
data: displayOptions,
minimumResultsForSearch: -1,
dropdownAutoWidth: true
});
I tried initselection but it cause problem when I try to selected different value in edit case of my application.
JS code for selecting different value in case of edit
$('.selectDisplayOptions').val(2);
You should call your select class or ID look the documentation:
https://select2.github.io/examples.html
And you should take care the way that you use to set the value in your select example:
<select class="selectDisplayOptions">
<option value="0">Boy</option>
<option value="1">Girl</option>
</select>
$('.selectDisplayOptions').val('1'); // This will bring back Girl.
$('.selectDisplayOptions').val('Girl'); // This will bring back Girl too.
var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
$(".js-example-data-array").select2({
data: data
})
$(".js-example-data-array-selected").select2({
data: data
})
<select class="js-example-data-array-selected"></select>
<select class="js-example-data-array-selected">
<option value="2" selected="selected">duplicate</option>
</select>
Regards,
Related
I would like to build a selector that displays a "Check one or more or options" placeholder and, after selecting 1-N options, the placeholder is still displayed instead of the checked results.
In short, the component should always display the placeholder, regardless of having 0, 1 or N options checked.
I have been searching but I can't find any way to do it:
Html:
<select multiple id="e1" style="width:300px">
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
Js
$('select').select2({
placeholder: "Select a state",
templateSelection: function (data) {
return 'Select a state';
}
});
http://jsfiddle.net/91nqgkuy/2/
Finally, I have chosen to overwrite the results template and insert the desired text.
// Set the default option.
$(select, context).each(function (e) {
setTemplateResults($(this));
});
// Override select2 default work flow.
$(select, context).on('select2:select select2:unselect', function (evt) {
setTemplateResults($(this));
});
// Method.
function setTemplateResults(selector) {
let container = selector.siblings('span.select2').find('ul')
container.html('<li>' + Drupal.t('Select category(ies)') + '</li>');
}
I'm trying to get values pre-selected in a multi-select Rails 4 form that uses select2.
The entry looks like:
- bol_selected = segments.map { |bol| seg = Bol.find_by(id: bol.to_i); [seg.bl_number, seg.id] }
= f.select :bol, options_for_select(bol_selected, bol_selected), {}, multiple: true, size: 10, id: 'bol-multiple', class: 'form-control'
It is my understanding that options_for_select takes a list of options and values as its first parameter and the pre-selected options as its second parameter, which is exactly what I have above.
I am trying this along with the following js code:
$('#bol-multiple').select2({
theme: 'bootstrap',
allowClear: true,
dropdownParent: $('#bol-multiple').parent(),
minimumInputLength: 1,
ajax: {
url: '/autocomplete/bols.json',
dataType: 'json',
delay: 250,
data: function(term, page) {
return {
q: term
};
}
}
});
The HTML this generates is as follows:
<select multiple="" id="bol-multiple" class="form-control select2-hidden-accessible" name="cargo[bol_segments][]" tabindex="-1" aria-hidden="true"
<option value="25285">ZZMUM58</option>
</select>
as per some other SO threads I've also tried adding
data: [{id: 123, text: 'Some text'}]
to the above JavaScript but this doesn't seem to pre-select any entries, it only pre-populates multi-select dropdown with some values.
Just to make it clear - the AJAX call works fine and selecting multiple values also works fine. All I'm trying to do now is get certain values pre-selected in the input field.
Thanks in advance!
I created a Single HTML - Table - With Export Options, Search, Pagination using Static Data using DataTables.
plnkr.co/edit/n3cbx8GrGoJtOpgbxE32?p=preview
is similar kind of example or working html available in angular-ui-grid
Datatable doesn't works well with huge records. Could you please kindly help with an equivalent html file using angular ui grid..thanks in advance for anything
Thanks.
From what it looks like, you are able to export CSV and PDF. I don't see any evidence of the Excel export working. I am not sure offhand on the print function, however, exporting the PDF and printing would be an option. I can look later if it's a deal breaker.
The JS code is pretty straight forward. I've added some options for the PDF configuration as well.
The code for the exporting function comes verbatim from UI-Grid.info: 312 Exporting Data With Custom UI. It could be converted to buttons if you wanted, but this provides the external export functionality. The little menu in the upper right corner also has these export options, so I've left it for your experimentation. Setting $scope.gridOptions.enableGridMenu to false will turn that off.
JS
$scope.gridOptions = {
enableGridMenu: true,
data: 'data',
paginationPageSizes: [10],
paginationPageSize: 10,
exporterLinkLabel: 'get your csv here',
exporterPdfDefaultStyle: {fontSize: 9},
exporterPdfTableStyle: {margin: [10, 10, 10, 10]},
exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: true, color: 'red'},
exporterPdfOrientation: 'portrait',
exporterPdfPageSize: 'LETTER',
exporterPdfMaxGridWidth: 500,
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
},
};
// Verbatim: http://ui-grid.info/docs/#/tutorial/312_exporting_data_complex
$scope.export = function(){
if ($scope.export_format == 'csv') {
var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
$scope.gridApi.exporter.csvExport( $scope.export_row_type, $scope.export_column_type, myElement );
} else if ($scope.export_format == 'pdf') {
$scope.gridApi.exporter.pdfExport( $scope.export_row_type, $scope.export_column_type );
}
};
HTML
<!-- Verbatim: http://ui-grid.info/docs/#/tutorial/312_exporting_data_complex -->
<label>Which columns should we export?</label>
<select ng-model="export_column_type"</select>
<option value='all'>All</option>
<option value='visible'>Visible</option>
</select>
<label>Which rows should we export?</label>
<select ng-model="export_row_type"</select>
<option value='all'>All</option>
<option value='visible'>Visible</option>
<option value='selected'>Selected</option>
</select>
<label>What format would you like?</label>
<select ng-model="export_format"</select>
<option value='csv'>CSV</option>
<option value='pdf'>PDF</option>
</select>
<button ng-click="export()">Export</button>
<div class="custom-csv-link-location">
<label>Your CSV will show below:</label>
<span class="ui-grid-exporter-csv-link"> </span>
</div>
<div ui-grid="gridOptions" class="grid" style="width:100%"
ui-grid-selection ui-grid-exporter ui-grid-pagination></div>
</div>
Example Plunk
Initially i was using simple html select box in reactjs and i iterated my array coming as props in child element as
<select onChange={this.getOccasion}>
<option value="states">States</option>
{
this.props.holidays.map(function(holidays,i) {
return <option key={i}
value={holidays.state}>{holidays.state}</option>;
})
}
</select>
But i have no idea where to iterate over my array in react-toolbox Dropdown.I tried following
<Dropdown
auto
onChange={this.getOccasion}
source={this.props.holidays}
value={this.props.holidays.state}
/>
You need to have the dropdown source array to be in a certain format.
const countries = [
{ value: 'EN-gb', label: 'England' },
{ value: 'ES-es', label: 'Spain'},
{ value: 'TH-th', label: 'Thailand' },
{ value: 'EN-en', label: 'USA'}
];
Check RT dropdown component.
So, you could do like,
const holidays = this.props.holidays.map(holiday => ({
value: holiday.state,
label: holiday.state
}));
<Dropdown
auto
onChange={this.getOccasion}
source={holidays}
value={this.state.someVariable}
/>
I have a select in Grails as follows
<g:select name="receiptItems" from="${myGrailsProject.ReceiptItem.list()}" multiple="multiple" optionKey="id" optionValue="description" size="5" value="${receiptInstance?.receiptItems*.id}" class="many-to-many"/>
ReceiptItem object has a numeric field (amount). I need to do the sum of amount fields of selected values and put it in another textfield.
In particular, when I select a new value I need to add it to the "totalAmount", and viceversa, when I deselect a value, I need to remove that value from the "totalAmount".
How can I understand if the item is selected or unselected?How can I perform the calculation into the Controller class and then update the textfield with new value in javascript?
Thanks for your help
You can use jquery to do that. For example, your select is
<select id="mySelect" multiple="multiple">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
listen for the change event:
$('#mySelect').change(function() {
var amount = 0;
$('#mySelect option').each(function() {
if($(this).is(':selected'))
amount += $(this).val();
});
$('#amount').val(amount);
});
Hope this helps.
Ok so you have a list of IDs of objects and you need to sum a field of that domain and return the sum to javascript? If so:
JavaScript:
$('#mySelect').change(function() {
var $this = $(this);
$.ajax({
type: 'POST',
url: enterYourPathHere,
data: {values: $this.val()},
dataType: 'json',
success: function(data) {
//Populate your totalAmount field with data.amount
},
error: function(jqXHR, textStatus, errorThrown) {
//Handle any errors
}
});
Controller:
Float totalAmount = Object.findByIdInList(params.list("values"))?.amount?.sum() ?: 0
render [amount: totalAmount] as JSON
Obviously change this for your Domain, fields, etc...