Put a ”cls” on your Grid and then you get your custom CSS class added ( see docs too)
Support Forum
I have to add style only for panel not the grid and the style should not effect the global style of the panel. In grid we are adding config like this:-
this.gridComponent = new UnplannedGrid({
ref: this.ref,
appendTo: this.gridContainer.current,
/* Schedulers stores are contained by a project,
pass it to the grid to allow it to access them */
project: this.props.scheduler?.project,
eventStore: this.props.eventStore,
store: {
modelClass: Task
},
columns: this.props.columns,
data: this.props.data,
onCellClick: this.showRowAction,
collapsible : {
direction : 'right',
animation:{
duration: 400
}
},
...globalTextHeader
});
- Attachments
-
- Screenshot 2022-05-23 at 12.12.12 PM.png (94.59 KiB) Viewed 494 times
Hi alex,
In screenshot that I shared is
.b-panel-header
not the grid title, please read previous comment.Now If I want to modify this panel where I need to pass the cls?
collapsible : {
direction : 'right',
animation:{
duration: 400
}
},
I added this config in grid cofig to show the expander in grid header , and when will check that in browser we will find that .b-panel-header class use to set the style.
Hi
I added the style.css in src/components/style.css and pass the config as :-
this.unplannedGrid = new UnplannedGrid({
appendTo : 'unplannedContainer',
title : 'Unplanned Tasks',
collapsible : {
direction : 'right'
},
cls: 'gridHeader',
// cls : {
// 'gridHeader': 1
// },
eventStore : this.props.eventStore,
store : {
modelClass : Task,
readUrl : 'data/unplanned.json',
autoLoad : true
}
});
In above code you can see as object and direct css class name I passed but did not help me to add the style for the expander.I added the sample app for reference.
- Attachments
-
- addStyleCollapse.zip
- (3.43 MiB) Downloaded 42 times
I was not able to run your app, I checked in our examples. As we recommended above, I've added custom class to grid:
this.unplannedGrid = new UnplannedGrid({
appendTo : 'unplannedContainer',
eventStore : this.props.eventStore,
title : 'Title',
collapsible : {
direction : 'right'
},
cls: 'unplanned-grid-cls',
And into App.scss I've added style for b-panel-header
incapsulated into grid CSS class.
.unplanned-grid-cls {
.b-panel-header {
background-color: black;
}
}
- Attachments
-
- Screenshot 2022-05-24 at 19.31.39.png (46.3 KiB) Viewed 476 times
All the best,
Alex