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.
Related
I have the following DataTables Editor constructed.
var editor;
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: "../php/data.php",
table: "#example",
fields: [ {
label: "User:",
name: "user"
}, {
label: "User Data:",
name: "selections",
type: "select",
options: [
{ label: "abc", value: "abc" },
{ label: "xyz", value: "xyz" },
{ label: "pqr", value: "pqr" },
{ label: "def", value: "def" },
{ label: "lmn", value: "lmn" }
]
}
]
});
});
Now I want to disable the select options with values 'pqr' and 'lmn'.
It should mean that users are able to see this options but they cannot select it.
I tried using $("select option[selections='pqr']").prop('disabled',true);
But it didn't work for me.
Is there an inbuilt DataTables property through which I can do this? Or any other way?
In D3.js layout , the tooltip is visible only for the nodes which has children .
Find my code attached
https://codesandbox.io/s/affectionate-thunder-l024x
I have an object some of them contains children , some are not . While displaying them in the chart , the tooltip only visible to the object which has children in it .
const dataObj = {
name: "Home",
children: [
{
name: "A",
metricsValue: "ma",
children: [
{
name: "A-B",
value: 1.2,
metricsValue: "ma-mb"
},
{
name: "A-B-C",
metricsValue: "ma-mb-mc",
children: [
{
name: "A-B-C-D-1",
value: 2.5,
metricsValue: "ma-mb-mc-md-1"
},
{
name: "A-B-C-D-2",
value: 2.566,
metricsValue: "ma-mb-mc-md-2"
}
]
}
]
},
{
name: "BCD",
value: "6.5",
metricsValue: "m1"
}
]
};
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>
lets say i want to start with empty value of variable data, how can to achieve this result with javascript using push method:
var data = [
{
label: 'node1',
children: [
{ label: 'child1' },
{ label: 'child2' }
]
},
{
label: 'node2',
children: [
{ label: 'child3' }
]
}
];
i have tried:
data.push("label: nodel", "children:"+ ['child1', 'child2']);
looking at code above i need to insert one element that will be linked with list of childs. Can someone help me achieve this.. i would be very grateful.
Best regards.
Is this what you mean?
var object1 = {
label: 'node1',
children: [
{ label: 'child1' },
{ label: 'child2' }
]
};
var data = new Array();
data.push(object1);
OR
data.push({ label: 'node1', children: [ { label: 'child1' }, { label: 'child2' } ] });
EDITED TO SHOW YOSHIS VERSION ASWELL
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