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
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.
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?
I am currently working in an app which the data is persisted in MongoDB using the MongooseJS.
There is a collection: DataRoomFolder. The documents have the following structure:
{
id,
isFolder,
name,
parentId: ObjectId(parent-DataRoomFolder),
projectId,
...
}
For each model Project, there is linked different DataRoomFolder but by default, when it is created, it will add a schema already predefined which I already have:
[
{
label: '01-Architecture',
items: [
{ label: 'Design', items: [] },
{ label: 'Drawings', items: [] },
],
},
{
label: '02-Permits',
items: [{ label: 'Building Permit', items: [] }],
},
{
label: '02-Permits',
items: [{ label: 'Building Permit', items: [] }],
},
{
label: '03-Control office',
items: [
{ label: 'Construction', items: [
{ label: 'Calculation reports', items: [] },
{ label: 'Datasheets', items: [] },
{ label: 'Drawings', items: [] },
{ label: 'Hand-over reports', items: [] },
{ label: 'Maintenance checklists', items: [] },
{ label: 'One-line diagrams', items: [] },
{ label: 'Technical notices', items: [] },
] },
{ label: 'Environment', items: [] },
{ label: 'Safety', items: [
{ label: 'Calculation reports', items: [] },
{ label: 'Datasheets', items: [] },
{ label: 'Drawings', items: [] },
{ label: 'Hand-over reports', items: [] },
{ label: 'Maintenance checklists', items: [] },
{ label: 'One-line diagrams', items: [] },
{ label: 'Technical notices', items: [] },
] },
],
}
As you can see, there is parent-children reference.
The question: when I loop for each to create every folder, I need to create have first the parent folder saved to get the ID and parsed to the children.
I saw a workaround with Populate but it does not fit my needs.
How should I persist to get parent IDs and carrying on adding to the children and saving and not getting affected the performance?
Thanks!
I want to make hierarchy role layout. So I want to access nested JavaScript array with in a object. Needs to add 'row' and 'column' key in every object based depth and index.
API response array like this:
const dataArray = [
{
name: "master name",
child: [
{
name: "child 1a",
child: [
{ name: "child 1a2a" },
{
name: "child 1a2b",
child: [
{ name: "child 2b3a" },
{
name: "child 2b3b",
child: [
{ name: "child 3b4a" },
{ name: "child 3b4b" },
{ name: "child 3b4c" },
],
},
{ name: "child 2b3c" },
],
},
{ name: "child 1a2c" },
],
},
{
name: "child 1b",
child: [
{ name: "child 1b2a" },
{ name: "child 1b2b" },
{ name: "child 1b2c" },
],
},
],
},
];
This is what I have tried, row key added following code, need help for column
const assignDepth = (arr, row = 0, index = 0) => {
if (index < arr.length) {
arr[index].row = row;
if (arr[index].hasOwnProperty("child")) {
return assignDepth(arr[index].child, row + 1, 0);
}
return assignDepth(arr, row, index + 1);
}
return;
};
await assignDepth(dataArray);
console.log(JSON.stringify(dataArray, undefined, 4));
Then my expected result array is:
const resultArray = [
{
name: "master name",
row: 0,
column: 0,
child: [
{
name: "child 1a",
row: 1,
column: 1,
child: [
{ name: "child 1a2a", row: 2, column: 1 },
{
name: "child 1a2b",
row: 2,
column: 2,
child: [
{ name: "child 2b3a", row: 3, column: 1 },
{
name: "child 2b3b",
row: 3,
column: 2,
child: [
{ name: "child 3b4a", row: 4, column: 1 },
{ name: "child 3b4b", row: 4, column: 2 },
{ name: "child 3b4c", row: 4, column: 3 },
],
},
{ name: "child 2b3c", row: 3, column: 3 },
],
},
{ name: "child 1a2c", row: 2, column: 3 },
],
},
{
name: "child 1b",
row: 1,
column: 2,
child: [
{ name: "child 1b2a", row: 2, column: 4 },
{ name: "child 1b2b", row: 2, column: 5 },
{ name: "child 1b2c", row: 2, column: 6 },
],
},
],
},
];
So how can I render this, Anyone help me out. Thanks in advance!
You can try the following logic:
var ranking = {0:0};
let addRowColumn = (data,row=0) =>{
data.forEach(item=>{
item.row = row;
item.column = ranking[row];
ranking[row]+=1;
if(item.child && item.child.length){
ranking[row+1] = ranking[row+1] || 1;
addRowColumn(item.child,row+1);
}
});
};
addRowColumn(dataArray);
console.log(dataArray);
This is tested. you can change the ranking object to start with a specific row and column. The key of object represents the row and value represents the column of data.
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?