Render dynamic html in content of panel directive in react splitter component

[soumya]

Hello,

I am using the react splitter component with the panes directive and I have two panes here. In one of the pane directive, I have specified

i m using the content to be wrapped from the dynamic html. 

When running the application, I get the below error:

actTemplate is not a function

Can you please provide more details on how to use the above and it would be helpful if you can provide a sample application for the same. In the above scenario, I do not have a constant html to render , based on state parameters and other conditions I return the html. Please advice .

Thanks

Soumya

[Narayanasamy Panneer Selvam]

Hi Soumya,

Thanks for contacting Syncfusion support.

We have validated your query. We have prepared a sample to reproduce your issue in the dynamic update of paneDirective content using state. But we couldn't able to get your exact issue in the reported scenario. It is better that, if you are share reproducible code snippet of sample to get your actual issue.

demo sample: https://stackblitz.com/edit/react-t633pq-wng79v

Regards,
Narayanasamy P.

 

[Martin Bleakley]

This is an example where it doesn't work. 

You can see that the h1 text is updated, but not the left panel content.  What is missing in there please?

https://react-t633pq-anxonk.stackblitz.io/

[Indrajith Srinivasan]

Hi Martin,  

 

Greetings from Syncfusion support, 

 

We have checked the shared sample and it is not in a runnable state. Also we have prepared a sample of updating the splitter left pane content, using the latest package version which works fine. 

 

Sample: https://stackblitz.com/edit/react-t633pq-h7lrju?file=package.json 

 

Can you please replicate the issue in the above sample and revert back to us?. So that we can validate and provide solution at earliest. 

 

Regards, 

Indrajith 

[Martin Bleakley]

import { render } from 'react-dom';

import './index.css';

import * as React from 'react';

import { SampleBase } from './sample-base';

import { SplitterComponent, PanesDirective, PaneDirective } from '@syncfusion/ej2-react-layouts';

/**

 * Splitter Basic rendering

 */

export class Basic extends SampleBase {

    constructor(props) {

    super(props);

    this.handleChange = this.handleChange.bind(this);

    this.leftPaneTemplate = this.leftPaneTemplate.bind(this);

    this.state = { value: 'Type here!' };

  }

    handleChange(e) {

    this.setState({ value: e.target.value });

  }

leftPaneTemplate() {

    return (<div>

<h1>{this.state.value}</h1>

    </div>);

  }

  rightPaneTemplate() {

    return (<div>

<h1>Hello World!</h1>

    </div>);

  }

  render() {

    return (

      <div id="defaultSplitter" className="control-section">

              <textarea

          id="markdown-content"

          onChange={this.handleChange}

          defaultValue={this.state.value}

        />

      <div className="pane1">

        <div id="pane-heading">Horizontal Splitter</div>

        <SplitterComponent height="110px" width="100%" separatorSize={4}>

        <PanesDirective>

    <PaneDirective size={"200px"} content={this.leftPaneTemplate}/>   

    <PaneDirective content = {this.rightPaneTemplate}/>

  </PanesDirective>

        </SplitterComponent>

      </div>

    </div>);

  }

}

render(<Basic />, document.getElementById('sample'));

[Martin Bleakley]

I've added the code above. 

The left panel I want to populate using a function. 

Thanks!

[Indrajith Srinivasan]

Hi Martin, 

 

Good day to you, 

 

We have validated your reported query. In order to populate the content using a function, you need to pass the template and the data for the splitter content. The template as the function call content and data is the state value to be updated. We have also modified the already shared sample. 

 

Sample: https://stackblitz.com/edit/react-t633pq-7inins?file=index.js 

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith 

[Martin Bleakley]

Thank you Indrajith that was indeed extremely helpful.

Cheers

[Indrajith Srinivasan]

Hi Martin, 

  

Welcome,

Please let us know if you need any further assistance.

Regards,
Indrajith