Select only two checkboxes for kendotreeview - javascript

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

Why Radio button selects multiple options when label values are different

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.

How to disable the DataTables dropdown option?

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?

MongoDB - MongooseJS - Retrieve ID from parent to set child in collection

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!

How to access nested key on object with array JavaScript?

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.

Default selection not working when selectionLimit: 1 in angularjs dropdown multiselct

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?

Categories

Resources