I have a treeview like below, i need to remove one child from the list based on the user. Can any one tell me how to remove the child from the treeview.
var treedata = [
{
label: 'Floor', type: 'Country',
children: [
{
label: 'Bangalore', type: 'Location',
children: [{ label: 'Technopolis', type: 'facility', id: 1 }, { label: 'Ecity Tower-2', type: 'facility', id: 2 }, { label: 'Bagmane', type: 'facility', id: 3 }, { label: 'Cyber Park', type: 'facility', id: 4 }]
},
{
label: 'Hyderabad', type: 'Location',
children: [{ label: 'Hitech City ', type: 'facility', id: 5 }, { label: 'Cyber City', type: 'facility', id: 6 }]
},
{
label: 'Chennai', type: 'Location',
children: [{ label: 'XXX', type: 'facility', id: 7 }]
},
{
label: 'Mumbai', type: 'facility', id: 8
}
]
},
{
label: 'Role Administration', type: 'Role',
children: [{ label: 'Assign Role', type: 'Role', id: 1 }]
},
{
label: 'Hoteling Admin', type: 'Hoteling',
children: [{ label: 'Hoteling', type: 'Hoteling', id: 1 }]
}
];
The above is my jquery tree data. I want to remove the role administration if the user is a normal user by checking the user role.
Anyone help me how to do using jquery.
Thanks
You can use $.grep() to filter the array to a new array based on whatever conditions you want.
var userRole='normal';
if( userRole === 'normal'){
treeview = $.grep(treeview, function(item){
return item.label != 'Role Administration';
});
}
grep() API docs
Related
I have 3 schema,
Menu
Section
Sub-Section
i want to conditionally filter the list of options provided based on the current object. Lets say i want to create a new sub-section which is under Pizza Menu so i will input Menu: Pizza (I created it before) and so section input should only accept and display all the available sections under pizza menu only.
Code:
subSection.js
export default {
name: 'sub-section',
title: 'Sub-Section',
type: 'document',
fields: [
{ name: 'title', type: 'string' },
{ name: 'description', type: 'string' },
{
name: 'menu',
type: 'reference',
to: [{ type: 'menu' }],
},
{
name: 'section',
type: 'reference',
to: [{ type: 'section' }],
options: {
filter: 'menu == references($menu)', // this does not work
filterParams: { menu: 'Neopolitan' }, // ^ ^ This is static, cannot reference current object
},
},
],
};
section.js
export default {
name: 'section',
title: 'Section',
type: 'document',
fields: [
{ name: 'title', type: 'string' },
{ name: 'description', type: 'string' },
{
name: 'menu',
type: 'reference',
to: [{ type: 'menu' }],
},
],
};
menu.js
export default {
title: 'Menu',
name: 'menu',
type: 'document',
fields: [
{
title: 'Title',
name: 'title',
type: 'string',
},
],
};
I would like to find a solution to cascade lookups on a popup form, given that the second lookup needs to set its dataSource at runtime (or calling an API), since the lookup source could be coming from different sources. For example, say that if I selected Arkansas, then it would set a different lookup from a web service call, and if California is selected it would use a call from a database to populate the lookup values.
I have taken the DevExtreme sample below as an example, what events or methods would I need to achieve this?
Code Example:
$(() => {
$('#gridContainer').dxDataGrid({
keyExpr: 'ID',
dataSource: employees,
showBorders: true,
editing: {
allowUpdating: true,
allowAdding: true,
mode: 'popup',
},
onEditorPreparing(e) {
if (e.parentType === 'dataRow' && e.dataField === 'CityID') {
e.editorOptions.disabled = (typeof e.row.data.StateID !== 'number');
}
},
columns: ['FirstName', 'LastName', 'Position',
{
dataField: 'StateID',
caption: 'State',
setCellValue(rowData, value) {
rowData.StateID = value;
rowData.CityID = null;
},
lookup: {
dataSource: states,
valueExpr: 'ID',
displayExpr: 'Name',
},
},
{
dataField: 'CityID',
caption: 'City',
lookup: {
//this is not a static list and will need to be populated when the State changes from various sources...
dataSource(options) {
return {
store: cities,
filter: options.data ? ['StateID', '=', options.data.StateID] : null,
};
},
valueExpr: 'ID',
displayExpr: 'Name',
},
},
],
});
});
Data:
const states = [{
ID: 1,
Name: 'Alabama',
}, {
ID: 2,
Name: 'Alaska',
}, {
ID: 3,
Name: 'Arizona',
}, {
ID: 4,
Name: 'Arkansas',
}, {
ID: 5,
Name: 'California',
}];
const cities = [{
ID: 1,
Name: 'Tuscaloosa',
StateID: 1,
}, {
ID: 2,
Name: 'Hoover',
StateID: 1,
}, {
ID: 3,
Name: 'Dothan',
StateID: 1,
}, {
ID: 4,
Name: 'Decatur',
StateID: 1,
}, {
ID: 5,
Name: 'Anchorage',
StateID: 2,
}, {
ID: 6,
Name: 'Fairbanks',
StateID: 2,
}, {
ID: 7,
Name: 'Juneau',
StateID: 2,
}, {
ID: 8,
Name: 'Avondale',
StateID: 3,
}, {
ID: 9,
Name: 'Buckeye',
StateID: 3,
}];
I managed to resolve the issue using the onEditorPreparing method, basically you have to register the onValueChanged event to manipulate the column cell you need to:
onEditorPreparing: (e): any => {
if (e.parentType === 'dataRow') {
if (e.dataField === 'FieldType') {
e.editorName = 'dxLookup';
$.extend(e.editorOptions, {
showClearButton: true,
dataSource: this.SetDatasource(this.GetArrayDataStore(AdvancedSettingsBuilder.GetFieldTypes)),
valueExpr: 'value',
displayExpr: 'text',
value: e.value || [],
onValueChanged: async (args): Promise<void> => {
e.setValue(args.value);
.........
I want to plot symmetrical multi-level pie chart. Refer the organizational hierarchy example: Here
I tried the following http://jsfiddle.net/amrutaJgtp/7r8eb5ms/7/
series: [{
type: "sunburst",
data: [{
id: '0.0'
}, {
id: '1.0',
parent: '0.0',
name: 'Consumer',
color: colors[1]
}, {
parent: '1.0',
name: 'Furniture',
value: 1
}, {
parent: '1.0',
name: 'Office Supplies',
value: 1
}, {
parent: '1.0',
name: 'Technology',
value: 1
}, {
id: '2.0',
name: 'Corporate',
parent: '0.0',
color: colors[2]
}, {
parent: '2.0',
name: 'Furniture',
value: 1
}, {
parent: '2.0',
name: 'Office Supplies',
value: 1
}, {
parent: '2.0',
name: 'Technology',
value: 1
}, {
id: '3.0',
name: 'Home office',
parent: '0.0',
color: colors[3]
}, {
parent: '3.0',
name: 'Furniture',
value: 1
}, {
parent: '3.0',
name: 'Office Supplies',
value: 1
}, {
parent: '3.0',
name: 'Technology',
value: 1
}, {
id: '4.0',
name: 'Small Business',
parent: '0.0',
color: colors[4]
}, {
parent: '4.0',
name: 'Office Supplies'
}, {
parent: '4.0',
name: 'Technology'
}],
Observe the category "Small Business" is not seen.
When i don't define any of the data values, sunburst chart is not plotted. I want that all categories are seen symmetrical in size.
Is there any way to achieve symmetrical multi-level pie using Highcharts sunburst chart?
Based on what is wanted there is a variety of options. Here are four possible options, and their corresponding fiddles:
Fiddle 1:
Fiddle 2:
Fiddle 3:
Fiddle 4:
3 of these have an added parameter per point:
tooltipIncluded: false
That controlls the tooltip using this formatter:
tooltip: {
formatter: function() {
if (this.point.tooltipIncluded) {
return 'The population of <b>' + this.point.name + '</b> is <b>' + this.point.value + '</b>';
} else {
return false;
}
}
}
I can't get autoValue to fire more than once, even though the docs suggest it always runs:
var saleItem = new SimpleSchema({
productId: {
label: 'Product Id',
type: String
},
sku: {
label: 'Item Name',
type: String
},
name: {
label: 'Item Name',
type: String
},
price: {
label: 'Item Price',
type: Number,
decimal: true,
min: 0
},
qty: {
label: 'Item Quantity',
type: Number,
min: 0
},
subtotal: {
label: 'Item Subtotal',
type: Number,
decimal: true,
autoValue: function(doc) {
console.log(doc);
return doc.$push.items.price * doc.$push.items.qty;
}
}
});
The console logs a JSON document the first time the document is inserted, but not thereafter. It's important to note that this schema is a sub-schema.
I'm trying to display the JSON structure shown below in a nested list. Each category has a name and consists of subcategories and leafs.
{
name: 'root',
categories: [
{
name: 'Category 1',
categories: [
{
name: 'Category 1.1',
leafs: [
{ name: 'Leaf 1.1.1', leaf: true },
{ name: 'Leaf 1.1.2', leaf: true }
]
}
],
leafs: [
{ name: 'Leaf 1.1', leaf: true },
{ name: 'Leaf 1.2', leaf: true }
]
},
{
name: 'Category 2',
leafs: [
{ name: 'Leaf 2.1', leaf: true },
{ name: 'Leaf 2.2', leaf: true }
]
}
]
}
The data model is the following:
Ext.define('MyApp.model.Leaf', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'name', type: 'string'}
]
}
});
Ext.define('MyApp.model.Category', {
extend: 'Ext.data.Model',
//requires: ['MyApp.model.Leaf'],
config: {
fields: [
'id', 'name'
],
hasMany: [
{
model: 'MyApp.model.Category',
name: 'categories',
associationKey: 'categories'
},
{
model: 'MyApp.model.Leaf',
name: 'statistics',
associationKey: 'leafs'
}
],
proxy: {
type: 'ajax',
url : 'http://192.168.178.103?data',
reader: {
type: 'json',
rootProperty: 'categories'
}
}
}
});
And here is the nested list:
{
xtype: 'nestedlist',
title: 'Kategorien',
displayField: 'name',
store: Ext.create('Ext.data.TreeStore', {
model: 'MyApp.model.Category'
})
}
The problem is: The nested list shows me all categories und their child categories correctly, but I'm not able to get the leafs displayed. I think the reason is that the identifier of the leaf array is named 'leafs' and therefor is not recognized but i can only give one root property identifier.
Any ideas? Thanks in advance.