React Scheduler > Difficulty with applying css on row header background and rowmove handle

Asked by Andy
23 hours ago.

Hello,

We have a requirement to make the background of the row header blue on hover of the row header. However, upon hovering on the rowmove handle, the row header’s background is no longer blue.

Can you provide guidance on this? Thank you!

Context:

I am rendering row header’s JSX using `onBeforeRowHeaderDomAdd`
I am overriding the rowmove handle css using styled-component and the snippet is as seen below.

const RowMoveHandlerCssOverride = css`
  .scheduler_default_rowheader:hover {
    background-color: blue; // Make background of row header blue
  }
  
  .scheduler_default_rowmove_handle {
    left: 20px !important;
    top: 50% !important; /* Center vertically */
    transform: translateY(-50%);
    cursor: grab !important;
    background-color: transparent !important;
    background-image: ${({ theme }) =>
      `url("${createDragGripIconDataUri({ color: 'blue' })}")`} !important;
  }

  .scheduler_default_rowmove_handle:hover {
    background-image: ${({ theme }) =>
      `url("${createDragGripIconDataUri({ color: 'red' })}")`} !important;

   // TODO - `scheduler_default_rowheader` hover effect is not being applied 
   // when rowmove handle is hovered on
  }
`;

<RowMoveHandlerCssOverride />

how-to javascript

Comment posted by Andy
23 hours ago.

While I don’t think it is currently supported, I am wondering whether it’s possible expose the callback (maybe via arguments of onBeforeRowHeaderDomAdd) that Daypilot currently calls to trigger the row move process.

In that case, we can hide the default rowmove handle via css, render our own custom row move handle UI (in onBeforeRowHeaderDomAdd) and trigger the exposed callback on mouse down of the move handle.

Answer posted by Dan Letecky [DayPilot]
2 hours ago.

It looks like this CSS works for me, so the problem might be somewhere else. You can try turning off your custom JSX temporarily to see if that causes the issue.

.scheduler_default_rowheader:hover {
    background-color: blue;
}

.scheduler_default_rowmove_handle {
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%);
    cursor: grab !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'><g fill='%23fff'><rect x='3' y='3' width='2' height='2' rx='1'/><rect x='3' y='7' width='2' height='2' rx='1'/><rect x='3' y='11' width='2' height='2' rx='1'/><rect x='10' y='3' width='2' height='2' rx='1'/><rect x='10' y='7' width='2' height='2' rx='1'/><rect x='10' y='11' width='2' height='2' rx='1'/></g></svg>");
}

.scheduler_default_rowmove_handle:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'><g fill='%23fff'><rect x='3' y='3' width='2' height='2' rx='1'/><rect x='3' y='7' width='2' height='2' rx='1'/><rect x='3' y='11' width='2' height='2' rx='1'/><rect x='10' y='3' width='2' height='2' rx='1'/><rect x='10' y='7' width='2' height='2' rx='1'/><rect x='10' y='11' width='2' height='2' rx='1'/></g></svg>");
}

You can also create a custom handle using an active area in onBeforeRowHeaderRender like this:

onBeforeRowHeaderRender: args => {
    args.row.columns[0].areas = [
        {
            left: 0,
            top: "calc(50% - 10px)",
            height: 20,
            width: 20,
            backColor: "red",
            action: "Move",
            // image, symbol, cssClass....
        }
    ];
}

With action: "Move", it automatically activates row moving on mousedown.

New Reply

This reply is

a comment

an answer

Attachments:

or drop files here

Your name (optional):

React Scheduler > Difficulty with applying css on row header background and rowmove handle

Products

Learn

Get Support

DayPilot Pro