I'm using fullcalendar in react and all works fine until I start using the resourceRender prop and the child resources are displaying not as a part of the resource parent expansion anymore.
How show the child of a resource as to how the default designs?
This is how my resources looks like
export const resources = [
{
id: 1,
title: "Conversación estaciones",
},
{
id: 2,
title: "Renovaciones Las Americas",
},
{
id: 3,
title: "Remuneración II",
children: [
{ id: "d1", show: true, title: "Room D1" },
{ id: "d2", show: false, title: "Room D2" }
],
},
{
id: 4,
title: "Actividades cotidianas",
},
{
id: 5,
title: "Actividades rudimentarias ",
}
];
And this is how the children resources render in the calendar
this is how the children resources render in the calendar
Related
I have a rails backend with the following relationships: a USER has many MOVES. a Move has many boxes. A Box has many items.
I have page that lists all of the boxes inside of a specific move and this page ALSO lists all of the items for that specific move. I have a search bar on this page that enables you to search for specific items. I am able to filter my items display, however, i cannot figure out how to filter my boxes BY the searching for the name of the items WITHIN them.
I have tried iterating over the array of Box objects, and then iterating over the key within each box that points to its array of items. I am able to get the filtered ITEMS, but I dont know how to translate that back to reflect the BOXES with those items.
For instance, in the console I tried:
var filteredBoxes = boxes.map((box) => {
return box.items.filter((i) => {
return i.name.includes(this.state.searchTerm)
})
})
But it keeps returning items, not the boxes im trying to filter.
This is how the JSON looks when I fetch my boxes. I used a serializer to list the items as well:
{
id: 1,
name: "Bedding",
category: "Bedroom",
move_id: 1,
move: {
id: 1,
name: "Leaving for College",
date: "2019-08-12",
user_id: 1
},
items: [
{
id: 1,
name: "Comforter",
image: "https://www.shopmarriott.com/images/products/v2/lrg/Marriott-down-duvet-comforter-MAR-112_1_lrg.jpg",
box_id: 1
},
{
id: 2,
name: "Throw Pillows",
image: "https://media.kohlsimg.com/is/image/kohls/3427815?wid=500&hei=500&op_sharpen=1",
box_id: 1
}
]
},
{
id: 2,
name: "Random Blankets",
category: "Den",
move_id: 1,
move: {
id: 1,
name: "Leaving for College",
date: "2019-08-12",
user_id: 1
},
items: [
{
id: 3,
name: "Pillows",
image: "https://www.greatsleep.com/on/demandware.static/-/Sites-tbp-master-catalog/default/dw9ff5c1cf/product-images/pillows/nautica/down-alt-pillow-2-pack-na-91644/nautica-down-alternative-pillow-2-pack_91644-icon-2500x2500.jpg",
box_id: 2
},
{
id: 4,
name: "Stuffed Animals",
image: "https://s7d9.scene7.com/is/image/JCPenney/DP0817201617082870M?resmode=sharp2&op_sharpen=1&wid=550&hei=550",
box_id: 2
}
]
},
{
id: 3,
name: "Cleaning Supplies",
category: "Kitchen",
move_id: 1,
move: {
id: 1,
name: "Leaving for College",
date: "2019-08-12",
user_id: 1
},
items: [
{
id: 5,
name: "Pillows",
image: "https://www.greatsleep.com/on/demandware.static/-/Sites-tbp-master-catalog/default/dw9ff5c1cf/product-images/pillows/nautica/down-alt-pillow-2-pack-na-91644/nautica-down-alternative-pillow-2-pack_91644-icon-2500x2500.jpg",
box_id: 3
},
{
id: 6,
name: "Stuffed Animals",
image: "https://s7d9.scene7.com/is/image/JCPenney/DP0817201617082870M?resmode=sharp2&op_sharpen=1&wid=550&hei=550",
box_id: 3
}
]
}
you just have to iterate boxes, and so filter items. Based on these filtered items you may choose to return or not a box to the list.
const data = [{
id:1,
name:"Bedding",
category:"Bedroom",
move_id:1,
move:{
id:1,
name:"Leaving for College",
date:"2019-08-12",
user_id:1
},
items:[
{
id:1,
name:"Comforter",
image:"https://www.shopmarriott.com/images/products/v2/lrg/Marriott-down-duvet-comforter-MAR-112_1_lrg.jpg",
box_id:1
},
{
id:2,
name:"Throw Pillows",
image:"https://media.kohlsimg.com/is/image/kohls/3427815?wid=500&hei=500&op_sharpen=1",
box_id:1
}
]
},
{
id:2,
name:"Random Blankets",
category:"Den",
move_id:1,
move:{
id:1,
name:"Leaving for College",
date:"2019-08-12",
user_id:1
},
items:[
{
id:3,
name:"Pillows",
image:"https://www.greatsleep.com/on/demandware.static/-/Sites-tbp-master-catalog/default/dw9ff5c1cf/product-images/pillows/nautica/down-alt-pillow-2-pack-na-91644/nautica-down-alternative-pillow-2-pack_91644-icon-2500x2500.jpg",
box_id:2
},
{
id:4,
name:"Stuffed Animals",
image:"https://s7d9.scene7.com/is/image/JCPenney/DP0817201617082870M?resmode=sharp2&op_sharpen=1&wid=550&hei=550",
box_id:2
}
]
},
{
id:3,
name:"Cleaning Supplies",
category:"Kitchen",
move_id:1,
move:{
id:1,
name:"Leaving for College",
date:"2019-08-12",
user_id:1
},
items:[
{
id:5,
name:"Pillows",
image:"https://www.greatsleep.com/on/demandware.static/-/Sites-tbp-master-catalog/default/dw9ff5c1cf/product-images/pillows/nautica/down-alt-pillow-2-pack-na-91644/nautica-down-alternative-pillow-2-pack_91644-icon-2500x2500.jpg",
box_id:3
},
{
id:6,
name:"Stuffed Animals",
image:"https://s7d9.scene7.com/is/image/JCPenney/DP0817201617082870M?resmode=sharp2&op_sharpen=1&wid=550&hei=550",
box_id:3
}
]
}];
const searchTerm = "Animals"
// function to filter sub-items
const filterItems = items => items.filter((i) => searchTerm ? i.name.includes(searchTerm) : i.name);
const filteredBoxes = data.map(boxes => {
//filter sub-items
const items = filterItems(boxes.items);
//in case there is any item, return that boxes
if (items.length) {
return Object.assign({}, boxes, { items })
}
// in case there is nothing, return false
return false;
}).filter(Boolean); // filter the boxes list removing the false values
console.log('filteredBoxes', filteredBoxes);
I'm using the TreeView component from Kendo UI library and I would like to know how to update the data in the tree. Is it possible?
This is my code:
class TreeViewTest extends React.Component {
dataSource = [
{
id: 123,
text: "aaaa",
expanded: true,
spriteCssClass: "rootfolder",
items: [
{
id: 2,
text: "aaa1",
expanded: true,
spriteCssClass: "folder",
items: [
{
id: 3,
text: "aaa2",
spriteCssClass: "html"
},
{
id: 4,
text: "aaa3",
spriteCssClass: "html"
},
{
id: 5,
text: "aaa4",
spriteCssClass: "image"
}
]
}
]
}
];
async componentDidUpdate(prevProps) {
if (this.props.endpoint !== prevProps.endpoint) {
init(this.props, this);
}
}
render() {
return (
<div>
<TreeView dataSource={this.dataSource} />
</div>
);
}
}
const init = async (props, _this) => {
const { endpoint, selectContent, setModal } = props;
const actions = props;
const response = await fetch(`${endpoint}/my/api/here`);
const body = await response.json();
/* some work on body here....*/
const data = [
{
id: 345,
text: "bbbb",
expanded: true,
spriteCssClass: "rootfolder",
items: [
{
id: 2,
text: "bbb1",
expanded: true,
spriteCssClass: "folder",
items: [
{
id: 3,
text: "bbb2",
spriteCssClass: "html"
},
{
id: 4,
text: "bbb3",
spriteCssClass: "html"
},
{
id: 5,
text: "bbb4",
spriteCssClass: "image"
}
]
}
]
}
];
_this.dataSource.push(data);
};
How can I update the dataSource after a remote call with the new data?
Before to install the react package I add a working solution with the Kendo UI jquery version and it worked fine with all the updates.
With the jquery version I have to set the options and I have the function setDataSource(data) and it works perfectly, now what I have to do?
Edit
I improved the code with the componentDidUpdate and the network call.
You could take a reference to the wrapped kendo.ui.TreeView element. Then you could call the function you have mentioned - setDataSource(data). Here is an example:
class TreeViewContainer extends React.Component {
wrappedWidget;
constructor(props) {
super(props);
this.dataSource = [{
id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
{
id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
{ id: 3, text: "about.html", spriteCssClass: "html" },
{ id: 4, text: "index.html", spriteCssClass: "html" },
{ id: 5, text: "logo.png", spriteCssClass: "image" }
]
}
]
}];
}
render() {
return (
<div>
<TreeView widgetRef={(el) => { this.wrappedWidget = el }} dataSource={this.dataSource} />
</div>
);
}
componentDidMount() {
// Simulate a response from a web request.
setTimeout(() => {
this.wrappedWidget.setDataSource(new kendo.data.HierarchicalDataSource({
data: [{
id: 1111, text: "My Documents1111", expanded: true, spriteCssClass: "rootfolder", items: [
{
id: 222, text: "Kendo UI Project222", expanded: true, spriteCssClass: "folder", items: [
{ id: 333, text: "about333.html", spriteCssClass: "html" },
{ id: 444, text: "index444.html", spriteCssClass: "html" },
{ id: 555, text: "logo555.png", spriteCssClass: "image" }
]
}
]
}]
}));
}, 1000)
}
}
ReactDOM.render(
<TreeViewContainer />,
document.querySelector('my-app')
);
I'm using this getorgchart library to generate organization chart in my application. I just want to highlight a particular node, i.e. the user who has logged in the application his node should be highlighted.
// Code goes here
var orgChart = new getOrgChart(document.getElementById("people"), {
theme: "monica",
primaryFields: ["name", "title"],
photoFields: ["image"],
gridView: true,
linkType: "B",
dataSource: [
{ id: 1, parentId: null, name: "Amber McKenzie", title: "CEO", phone: "678-772-470", mail: "lemmons#jourrapide.com", adress: "Atlanta, GA 30303", image: "images/f-11.jpg" },
{ id: 2, parentId: 1, name: "Ava Field", title: "Paper goods machine setter", phone: "937-912-4971", mail: "anderson#jourrapide.com", image: "images/f-22.jpg" },
{ id: 3, parentId: 1, name: "Evie Johnson", title: "Employer relations representative", phone: "314-722-6164", mail: "thornton#armyspy.com", image: "images/f-24.jpg" },
{ id: 6, parentId: 2, name: "Rebecca Randall", title: "Optometrist", phone: "801-920-9842", mail: "JasonWGoodman#armyspy.com", image: "images/f-8.jpg" },
{ id: 7, parentId: 2, name: "Spencer May", title: "System operator", phone: "Conservation scientist", mail: "hodges#teleworm.us", image: "images/f-7.jpg" },
{ id: 8, parentId: 3, name: "Max Ford", title: "Budget manager", phone: "989-474-8325", mail: "hunter#teleworm.us", image: "images/f-6.jpg" },
{ id: 9, parentId: 3, name: "Riley Bray", title: "Structural metal fabricator", phone: "479-359-2159", image: "images/f-3.jpg" }
],
customize: {
"1": { color: "green" },
"2": { theme: "deborah" },
"3": { theme: "deborah", color: "darkred" }
}
});
Here
customize: {
"1": { color: "green" },
"2": { theme: "deborah" },
"3": { theme: "deborah", color: "darkred" }
}
u can customize for particular Id based on your login data id you can customize and make it highlight
I am using Angularjs version of Kendo UI Tree List Widget. Below is the code that I am using
HTML
<div id="treeview" kendo-tree-list="treelist"
k-options="TreeViewOptions" style="margin-top: 5px" class="trade_show">
</div>
Code for binding the Tree List
var treeDataSource = new kendo.data.TreeListDataSource({
data: [
{ id: 1, Name: "Main Menu", Icon: "", View: "", parentId: null },
{ id: 5, Name: "Sub Menu 1", Icon: "", View: "", parentId: 1 },
{ id: 6, Name: "Sub Menu 2", Icon: "", View: "", parentId: 1 },
{ id: 7, Name: "Sub Menu 3", Icon: "", View: "", parentId: 1 },
],
schema: {
model: {
id: "id",
expanded: true
}
}
});
$scope.TreeViewOptions = {
dataSource: treeDataSource,
height: 540,
editable: {
move: true
},
sortable: true,
columns: [
{ field: "Name" },
{ field: "Icon" },
{ field: "View" }
]
};
Every thing is working fine, but I am unable to get column ordering working. Essentially what I need is to be able to drag drop the rows to set their display order.
This feature exists in Kendo UI TreeView widget.
Is this feature supported in the Kendo UI Tree List Widget?
If not, then is there a workaround to get it working?
I am novice to Ext-js and referring sencha.com for tutorials. I am trying to modify an existing application build in ext-js 2.2. It has in particular page following options for checkbox.
var assetPermissions = [
{ id: 'MF', name: 'Mutual Funds' },
{ id: 'ETF', name: 'ETFs' },
{ id: 'CE', name: 'Closed End Funds' },
{ id: 'ST', name: 'Stocks' },
{ id: 'VA', name: 'Variable Annuities' },
{ id: 'FI', name: 'Bonds' },
{ id: 'SMA', name: 'Separately Managed Accounts' },
{ id: 'MO', name: 'Models' },
{ id: 'MM', name: 'Managed Models' },
{ id: 'UD', name: 'User Defined' },
{ id: 'I:MD', name: 'Model Dashboard' },
{ id: 'I:SC', name: 'Screener' },
{ id: 'CUAS', name: 'Create Custom Assets & Folders' },
{ id: 'OA', name: 'Other Assets'}
];
Now I want that when a user selects the Other Assets option in the check box and another check box should be prompted something like this.
Name Select
ABC
XYZ
Save | Cancel
I also want a Save and Cancel button for that dialog box and changes made to it are saved.
So can any one suggest how to do this in ExtJs. Thanks.