Related
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 have an array of object and i need to convert that into antd table columns format. Here is the online editor link.
const a = [
{
id: 1,
startValue: 1,
endValue: 3,
box: "ele",
},
{
id: 2,
startValue: 3,
endValue: 5,
box: "vcu",
},
{
id: 3,
startValue: 2,
endValue: 6,
box: "mcu",
},
]
// output
// [
// {
// dataindex: id,
// key: id,
// title: id,
// },
// {
// dataindex: startValue,
// key: startValue,
// title: startValue,
// },
// {
// dataindex: endValue,
// key: endValue,
// title: endValue,
// },
// {
// dataindex: box,
// key: box,
// title: box,
// },
// ]
Based on what you provided, I guess you are trying to automatically extract the column names from the given dataSource. Here is what you are looking for (I reused the variable named a :
const columns = Object.keys(a[0]||{})
.map(key => ({dataIndex: key, key, title: key}));
<Table dataSource={a} columns={columns} />
There is little to do to achieve what you want. According to Ant Design documentation your data does not need to be converted into output. It can directly be used as the dataSource array. And you will need to supply the columns array as shown below:
const dataSource = [
{
id: 1,
startValue: 1,
endValue: 3,
box: "ele",
},
{
id: 2,
startValue: 3,
endValue: 5,
box: "vcu",
},
{
id: 3,
startValue: 2,
endValue: 6,
box: "mcu",
}
];
const columns=
[
{
dataindex: "id",
key: "id",
title: "Id"
},
{
dataindex: "startValue",
key: "startValue",
title: "Start value"
},
{
dataindex: "endValue",
key: "endValue",
title: "End value"
},
{
dataindex: "box",
key: "box",
title: "Box"
}
];
// the following JSX expression will create the ant table in a React environment:
<Table dataSource={dataSource} columns={columns} />;
With the columns array you define which property of the dataSource elements you want to display in the table. The title property defines the title to be shown in each column header.
Not sure how to exactly explain this in words, but I think with a couple of examples it will make sense
In this first example, I am grouping by just one column, location. In the location fields, I am using spaces in the path, ie location: ['Home', ''], (1 space), location: ['Home', ' '], (2 spaces) so I can have 2 other columns as "details" of the main row (ie in this example cleaner type and cleaner weight)
It looks like this:
Perhaps there is a better way to do this, but this would work in the above if I just wanted to group by the one column.
However, I actually want to group by two columns, but only have those 2 detail (child) records "nested").
In the above, I also want to group by the room, but NOT have room as a nested row.
So, in the above I have (location=Home, room=room1), but I may also have (location=Home, room=room2), ie I have room2
eg would like like this:
I have tried all sorts of things, but just cannot get this view (I always end up with unwanted nestings), eg this is what I don't want:
Plnkr link
Is there a way to do this sort of view?
I found the way to do this from this post.
So in this example, you can use a completely different property not shown in the grid at all for getDataPath to control the grouping, and then use valueGetter to put what you want in the grouped column.
So I can have the following....
var gridOptions = {
columnDefs: [
// we're using the auto group column by default!
{ field: 'room',resizable: true, },
{ field: 'cleanertype', resizable: true, },
{ field: 'cleanerweight',aggFunc: 'sum', resizable: true, },
{ field: 'totalweight', resizable: true, },
],
defaultColDef: {
flex: 1,
},
autoGroupColumnDef: {
headerName: 'location',
sortable: true,
resizable: true,
filter: 'agTextColumnFilter',
valueGetter: (params) => {
return params.node.data.location; // <--- what to show in the group column
},
cellRendererParams: {
suppressCount: true,
},
},
rowData: rowData,
treeData: true, // enable Tree Data mode
animateRows: true,
groupDefaultExpanded: -1, // expand all groups by default
getDataPath: function (data) {
return data.grouping; // <= how to group/nest
},
};
and the data...
var rowData = [
// Home/room1
{
grouping: ['1'],
location: 'Home',
room: 'room1',
cleanertype: '',
totalweight: 60
},
{
grouping: ['1', '1'],
cleanertype: 'type1',
cleanerweight:10,
},
{
grouping: ['1', '2'],
cleanertype: 'type2',
cleanerweight:10,
},
// Home/room2
{
grouping: ['2'],
location: 'Home',
room: 'room2',
cleanertype: '',
totalweight: 60
},
{
grouping: ['2', '1'],
cleanertype: 'type1',
cleanerweight:10,
},
{
grouping: ['2', '2'],
cleanertype: 'type2',
cleanerweight:10,
},
{
grouping: ['3'],
location: 'Work',
room: 'room1',
cleanertype: '',
cleanerweight: 30,
totalweight: 60
},
{
grouping: ['3', '1'],
cleanertype: 'general',
cleanerweight:10,
},
{
grouping: ['3', '2'],
cleanertype: 'heavyduty',
cleanerweight: 10,
},
];
So I am using grouping to control the grouping/nesting, and works perfectly, and is exactly what I was after.
Can see the working example here.
I currently have an array of data that I am trying to display on Highcharts.
const data = [10,31,13,19,21]
I am having issues with displaying a specific index of an array. For example, I would like one column to be data: data[0] the other data: data[1] etc.. When doing this I do not have any data displaying on my graph.
I am able to display data when doing data:data and displaying the whole array which creates multiple columns but for my situation, like to keep each point in one column.
Here is a link to a jsfiddle
desired look with specific index of an array i.e. data: data[1]:
outcome if using data: data
here is my code:
const data = [10,31,13,19,21]
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: "Bar Graph"
},
xAxis: {
},
yAxis: {
min: 0,
formatter: function () {
return this.value + "%";
},
title: {
text: '% of Total'
}
},
legend: {
reversed: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Low',
data: data[0],
showInLegend: false,
},{
name: 'Low',
data: data[1]
},{
name: 'Medium-Low',
data: data[2]
}, {
name: 'Medium',
data: data[3]
}, {
name: 'Medium-High',
data: data[4]
}, {
name: 'High',
data: data[5]
}
]
});
The data must be an array, meanwhile data[0], data[1], ... are numbers. Instead, you need to assign those values in the array, like: data: [data[1]].
Demo: https://jsfiddle.net/BlackLabel/ty42b0hs/
series: [{
name: 'Low',
color: '#0D6302',
data: [data[0]],
showInLegend: false,
},{
name: 'Low',
color: '#0D6302',
data: [data[1]]
}, ...]
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