Premium support for our pure JavaScript UI components


Post by mats »

Put a ”cls” on your Grid and then you get your custom CSS class added ( see docs too)


Post by gorakh.nath »

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
Screenshot 2022-05-23 at 12.12.12 PM.png (94.59 KiB) Viewed 444 times

Post by alex.l »

Hi gorakh.nath,

and the style should not effect the global style of the panel

Did you try it and get problems with it?
That "panel" is a title of the grid you mentioned. If you set cls attribute for your grid and will use it in your CSS rules, you will reach your goal.

https://bryntum.com/docs/grid/api/Grid/view/Grid#config-cls

All the best,
Alex


Post by gorakh.nath »

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.


Post by mats »

Please show your code which adds cls in the config?


Post by gorakh.nath »

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 39 times

Post by alex.l »

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
Screenshot 2022-05-24 at 19.31.39.png (46.3 KiB) Viewed 426 times

All the best,
Alex


Post Reply