updating state doesn't cause <ColumnDirective> to re-render

[Deniz]

I'm trying to show some action when user hovers on a row. I could set hovered row's id as state but updating it doesn't cause template of ColumnDirective to re-render. Whole component itself renders, because it displays hovered ID inside the <p> tag. Am I missing something?

function Test() {
  const gridRef = useRef<GridComponent>(null);
  const [hoveredOrderId, setHoveredOrderId] = useState<string | null>(null);

  useEffect(() => {
    if (gridRef.current) {
      let table = gridRef.current.element;
      table.onmouseover = (e) => {
        if (e.target) {
          let target = e.target as HTMLElement;
          if (target.classList.contains("e-rowcell")) {
            const dataSet = target.closest("tr")?.dataset;
            if (dataSet?.orderid) {
              setHoveredOrderId(dataSet.orderid);
            }
          }
        }
      };
      return () => {
        if (table) {
          table.onmouseover = null;
        }
      }
    }
  }, [gridRef]);

  const rowDataBound = useCallback((args: RowDataBoundEventArgs) => {
    if (args.row && args.data) {
      // @ts-ignore
      let orderID = args.data?.OrderID;
      args.row.setAttribute("data-orderid", orderID);
    }
  }, []);

  return (
      <div>
        <p>hovered: {hoveredOrderId}</p>
        <GridComponent dataSource={data} ref={gridRef} rowDataBound={rowDataBound}
        >
          <ColumnsDirective>
            <ColumnDirective field='OrderID' width='100' textAlign="Right"/>
            <ColumnDirective field='actions' width='100' template={() => {
              return <div>
                <div>hovered: {hoveredOrderId}</div>
              </div>
            }}/>
          </ColumnsDirective>
        </GridComponent>
      </div>
  )
}



[Deniz]

Hi,

I have spent quite a bit of time with this and I have found something similar in the Form. 

https://www.syncfusion.com/forums/173914/inside-syncfusion-template-i-need-updated-state-value

My question is; When using <ColumnDirective>, is rendering done only once for the directive? I think the function we provide for the template is captured once and it captures the original value of the state variable. Since it is never re-created it is never aware of updates to the component state. Gird itself renders, the column also renders but it uses the original value of the state variable always, not aware of any update done to it. 

[Joseph Christ Nithin Issack]

By default the child components(column.template/state property used element) inside the grid component can be refreshed only by using the instance of the grid component by calling the method `grid.refresh`. Otherwise, the  child components of the grid won’t be refreshed, hence it will not be able to identify the updated state variables. Hence we suggest you to use the solution provided in the forum which you have mentioned in your previous update.

Please get back to us for further details.