How to re-render datasource with viewer

[Tri]

I'm currently working with Stimulsoft Reports in a React application. I encountered an issue where I update the dataSource of the report by setting a new data source, but the report still displays the old data. When I check the dataSource value, it shows that the new data has been assigned correctly. However, the report does not seem to re-render or refresh with the updated data source. Can anyone explain why changing the dataSource doesn't trigger a re-render in Stimulsoft? How can I force the report to reload and display the latest data?

Code: Select all

 useEffect(() => {
    if (reportPayload && !isEmpty(datasetMetadata) && !isEmpty(payload)) {
      const dataSet = new Stimulsoft.System.Data.DataSet('QueryHub');
      const result = reportPayload;
      //   const result = payload;
      //   const result = payload;
      const temp = result.map((item) => {
        if (item.datasetKey === 'GL') {
          const { dimensions, measures } = datasetMetadata || ({} as any);
          const result = {};
          const arrItems = [];
          dimensions.map((dimension) => {
            const { items } = dimension || {};
            if (items && items.length > 0) arrItems.push(...items);

            result[dimension.dimensionKey] = '';
            return true;
          });
          measures.map((measure) => {
            result[measure.measureKey] = '';
            return true;
          });
          const payloadData = arrItems.map((item) => {
            const finded =
              (isArray(payload) && payload?.find((ele) => ele.DIM_BAL_GL === item.itemId)) || {};

            return {
              ...result,
              ...(finded || {}),
              LEDGER_BAL: finded.LEDGER_BAL || 0,
              itemId: item.itemId,
              parentId: item.parentId || null,
              name: item.name,
            };
          });
          console.log({ payloadData });
          return { GL: payloadData };
        }
        return {
          [item.datasetKey]: [item],
        };
      });
      console.log({ temp });

      dataSet.readJson(
        JSON.stringify({
          Metadata: temp,
        }),
      );
      //   report.dictionary.dataSources.clear();
      //   report.regData('');
      viewer.report.dictionary.dataSources.clear();
      viewer.report.regData('QueryHub', 'JSON', dataSet);
      viewer.report.dictionary.synchronize();
      viewer.report.renderAsync();
      //   viewer.postMessage('refresh');
      //   report.invokeRefreshViewer();
      //   if (!isReady) viewer.renderHtml('viewer');
      //   viewer.renderHtml('viewer');
      //   if (isReady) viewer.refreshViewer();

      if (!isReady) viewer.renderHtml('viewer');
      setIsReady(true);
    }
  }, [reportPayload, datasetMetadata, payload]); 
   <div id="viewer"></div>
      {(fetchingData || metadataLoading || datasetLoading) && (
        <div className="loading-overlay">
          <div className="spinner"></div>
        </div>
      )}
  

[Lech Kulikowski]

Hello,

Please send us a sample project that reproduces the issue for analysis.

Thank you.

[Tri]

I'm sorry, but I can't share the source code right now. Here's the flow: The viewer contains some parameters, and every time the user submits those parameters, I need to reset the data source and display the updated data. Is there a way to achieve this?

[Lech Kulikowski]

Hello,

Try to use the onInteraction event of the viewer:
https://www.stimulsoft.com/en/documenta ... events.htm

Thank you.