How to disable the DataTables dropdown option? - javascript

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?

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.

Group and Stack data in Kendo UI Chart

I have a json data like:
arr = [{ Name: 'PAVI', value: 3}, {Name: 'Crystal', value: 2}, {Name: 'PAVI', value: 6}, {Name: 'Crystal', value: 11}]
How to stack data with similar Name in Kendo UI Chart? Here is my code for this moment
$("#chart").kendoChart({
dataSource: {
data: data,
group: {
field: 'Name'
}
},
series: [{
name: "Total Sales",
field: "value",
stack: true
}],
categoryAxis: {
field: 'Name'
},
Actually here is the structure of real data that i use
{
Account:"Piscopo Cash and Carry"
AccountName:"Piscopo Cash and Carry"
Category:""
MainCategory:"Other"
TotalQty:146
TotalSales:9747.616
}
UPDATE
I found the solution by setting group to MainCategory (dont even think that solution is so simple XD )
I'm not sure what you meant by "stack" because with that data structure, I don't see any way how you could stack it. However, if you wanted to sum the values with the same name and show the total, then you can use the aggregate option in the chart.
Here's how to do that: This will sum PAVI's & Crystal's values and show only two columns in the chart.
var dataSource = new kendo.data.DataSource({
data: data,
group: {
field: "Name", aggregates: [{
field: "value", aggregate: "sum"
}]
}
});
Notice the group and aggregate options.
Here's the full code:
var data = [
{ Name: 'PAVI', value: 3 },
{ Name: 'Crystal', value: 2 },
{ Name: 'PAVI', value: 3 },
{ Name: 'Crystal', value: 10 }
];
var dataSource = new kendo.data.DataSource({
data: data,
group: {
field: "Name", aggregates: [{
field: "value", aggregate: "sum"
}]
}
});
dataSource.read();
$("#chart").kendoChart({
dataSource: getChartData(dataSource),
series: [{
type: "column",
field: "value",
categoryField: "Name"
}]
});
function getChartData(dataSource) {
var chartData = [];
var view = dataSource.view();
for (var idx = 0; idx < view.length; idx++) {
chartData.push({
Name: view[idx].value,
value: view[idx].aggregates.value.sum
});
}
return chartData;
}
Here's a Fiddle
Hope it helps :) Feel free to ask if you have any doubts.

How can I select articles by categories in Meteor?

I'm a beginner meteor. I create a blog with many posts(article) by each categories. This is my Collection:
if (Category.find().count() === 0) {
[
{
name: 'IT',
sub_categories: [
{ name: 'Java' },
{ name: 'PHP' },
{ name: '.NET' },
{ name: 'Android/iOS' },
{ name: 'HTML/CSS' },
{ name: 'Javascript and Framworks' },
{ name: 'Ruby on Rails' },
],
},
{
name: 'ENGLISH',
sub_categories: [
{ name: 'Listening' },
{ name: 'Speaking' },
{ name: 'Writing' },
{ name: 'Reading' },
{ name: 'Topic' },
],
},
{
name: 'SoftSkill',
sub_categories: [
{ name: 'CV and CL' },
{ name: 'Presentation' },
{ name: 'Teamwork' },
],
},
{
name: 'ENTERTAINMENT',
sub_categories: [
{ name: 'Sports' },
{ name: 'Games' },
{ name: 'Music & Videos' },
{ name: 'Fashion' },
{ name: 'Talk show' },
],
},
].forEach(doc => {
Category.insert(doc);
});
}
After I save all posts by each categories, Now I want to show it throught select option
Details:
When I click on "IT" button -> app show all sub_categories. Then I choose one option (example "Java") it will show all posts have sub_categories = "Java". Can you help me to do it?
You can use navbar for your requirement.
In that navbar you can have dropdown as navbar element
Please Follow this steps if it is useful for you

Select2.js v4.0: how set the default selected value with a local array data source?

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')

java script filling up an array so it matches following structure

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

Categories

Resources