I am using angularjs dropdown multiselect,I have a problem when I am trying to set default selection of the dropdown when the selection limit is 1 it's not working.
and that's my code:
<div ng-dropdown-multiselect="" options="idPropertyData"
selected-model="idPropertyModel"
extra-settings="idPropertySettings">
</div>
//javascript
$scope.idPropertyModel = [{
"id": 1
}];
$scope.idPropertyData = [ { id: 1, label: 'David' },
{ id: 2, label: 'Jhon'
}, { id: 3, label: 'Danny' }, ];
$scope.idPropertySettings = {
selectionLimit: 1,
};
How can I solve this problem?
Related
Having a reusable Radio button component, when the options are using the same value for name it works fine:
const drinks = [
{
label: "Coffee",
name: "a"
},
{
label: "Tea",
name: "a"
},
{
label: "Water",
name: "a",
disabled: true
}
];
But when they are different values, it doesn't work fine, it lets the user select multiple options:
const drinks = [
{
label: "Coffee",
name: "1"
},
{
label: "Tea",
name: "2"
},
{
label: "Water",
name: "3",
disabled: true
}
];
Here is a working sandbox of it as it's complicated to create a working example here: https://codesandbox.io/s/custom-radio-button-group-forked-1do5u4?file=/src/App.tsx
It is working as expected. If it's a radio button, then it's ONE name and multiple possible values. Only one of them can be selected at a time.
const drinks = [
{
label: "Coffee",
name: "drinkType"
},
{
label: "Tea",
name: "drinkType"
},
{
label: "Water",
name: "drinkType",
disabled: true
}
];
As i mentioned in comment,
the code is working as expected
const drinks = [
{
label: "Coffee",
name: "a"
},
{
label: "Tea",
name: "a"
},
{
label: "Water",
name: "a",
disabled: true
}
];
the name attribute is used to group radio buttons,and only one radio button in the group can be selected at a time.
The idea is that the user selects a date from a calendar, available time slots are displayed, and upon selecting an available timeslot, the time slot will be blocked to cancel duplicate timeslot selection, and added to the database.
I am using MVC.NET, WebAPI, EntityFramework and angularJS.
my time slots are an array:
$("input").click(function () {
$('.datepicker').pickadate()
$scope.hours = {};
$scope.hours = [
{
id: 1,
name: '12:00'
},
{
id: 2,
name: '13:00'
},
{
id: 3,
name: '14:00'
},
{
id: 4,
name: '15:00'
},
{
id: 5,
name: '16:00'
},
{
id: 6,
name: '17:00'
},
{
id: 7,
name: '18:00'
},
{
id: 8,
name: '19:00'
},
{
id: 9,
name: '20:00'
},
{
id: 10,
name: '21:00'
},
{
id: 11,
name: '22:00'
}
];});
view is simply retrieve the array with ng-options="hour.name as hour.name for hour in hours".
my questions are:
how can i block user selected timeslots using only angular?
is it possible to keep the code skinny on the backend, or is it better to sort such things on the server?
what way is the most efficient?
Cheers.
By using select2.js v4 plugin , how set the default selected value when I use a local array data for source?
for example with this code
var data_names = [{
id: 0,
text: "Henri",
}, {
id: 1,
text: "John",
}, {
id: 2,
text: "Victor",
}, {
id: 3,
text: "Marie",
}];
$('select').select2({
data: data_names,
});
How set id 3 as the default selected value?
$('.select').select2({
data: data_names,
}).select2("val",3);
this worked for me with V4.0.3
$('.select').select2({
data: data_names,
})
$('select').val(3);
$('select').trigger('change.select2');
It is better you send another attribute (selected in my case below) for select and use it to set the default value. I did something like below -
var data_names = [{
id: 0,
text: "Henri",
}, {
id: 1,
text: "John",
}, {
id: 2,
text: "Victor",
}, {
id: 3,
text: "Marie",
selected: true
}];
then do
$(".select").select2({
data : data_names
});
data_names.forEach(function(name){
if(name.selected) {
$(".select").select2('val',name.id);
}
});
It's worked for me.
$('#select').select2({data: data_names}).val(3).trigger('change')
I'm trying to databind 2 dropdowns, where the 2nd dropdown is dependent on what is chosen in the first.
I have this data scructure:
{
EducationId: 1,
EducationCategories:[{
Name: "Category1",
Educations: [{
Id: 1,
Name: "Education1"
}, {
Id: 2,
Name: "Education2"
}]
}, {
Name: "Category2",
Educations: [{
Id: 3,
Name: "Education3"
}, {
Id: 4,
Name: "Education4"
}]
}]
}
This i wanna databind to 2 different "selects" with knockout, so that i have 1 dropdown with all category names, and a 2nd with educations.
EducationId referes to the education that is selected, so in the data example first dropdown would be "Category1", and second would be "Education1".
But how can i make that the 2nd dropdown only gets populated with the educations belonging to the category selected in the first dropdown? and then bind the value(id) of the 2nd dropdown to EducationId.
The data gets mapped by the knockout mapping plugin.
Use a computed property to update the second drop-down when the selected value in the first changes.
For example:
var data = {
EducationId: 1,
EducationCategories :[{
Name: "Category name1",
Educations: [{
Id: 1,
Name: "Education name1"
}, {
Id: 2,
Name: "Education name2"
}]
}, {
Name: "Category name2",
Educations: [{
Id: 3,
Name: "Education name3"
}, {
Id: 4,
Name: "Education name4"
}]
}]
};
var viewModel = ko.mapping.fromJS(data);
viewModel.selectedCategory = ko.observable();
viewModel.Educations = ko.computed(function() {
if (viewModel.selectedCategory()) {
return viewModel.selectedCategory().Educations();
}
});
viewModel.selectedEducation = ko.observable();
ko.applyBindings(viewModel);
<script src="https:////cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="http:////cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<select data-bind="options: EducationCategories, value: selectedCategory, optionsText: 'Name'"></select>
<select data-bind="options: Educations, value: selectedEducation, optionsText: 'Name'"></select>
I have treeview with checkboxes in my application had a one issue is to select only two
checkboxes by pageload remaining must be in disable. (i.e if deselect the one checkboxes remaining are in enable).
My fiddle:
Code:
var tree= $("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource: [{
id: 1, text: "My Project", expanded: true, spriteCssClass: "rootfolder", items: [
{
id: 2, text: "OrderID", expanded: true, spriteCssClass: "folder", items: [
{ id: 3, text: "a" },
{ id: 4, text: "b" },
{ id: 5, text: "c" },
{ id: 6, text: "d" },
{ id: 7, text: "e" }
]
}
]
}]
}).data("kendoTreeView");
tree.dataSource.bind("change", function (e) {
Try something like
function updateChks(){
var checkboxes = $('#treeview input:checkbox');
var selected = checkboxes.filter(':checked');
checkboxes.not(selected).prop('disabled', selected.length > 1)
}
$('#treeview').on('click', 'input:checkbox', updateChks);
updateChks();
Demo: Fiddle