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

soumya

Asked On July 18, 2019 01:03 PM UTC

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

Reply | Reply with quote

Narayanasamy Panneer Selvam [Syncfusion]

Replied On July 21, 2019 06:35 PM UTC

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.

Reply | Reply with quote

Martin Bleakley

Replied On August 15, 2020 04:46 AM UTC

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/

Reply | Reply with quote

Indrajith Srinivasan [Syncfusion]

Replied On August 17, 2020 07:00 AM UTC

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

Reply | Reply with quote

Martin Bleakley

Replied On August 17, 2020 09:23 AM UTC

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'));

Reply | Reply with quote

Martin Bleakley

Replied On August 17, 2020 09:24 AM UTC

I've added the code above.

The left panel I want to populate using a function.

Thanks!

Reply | Reply with quote

Indrajith Srinivasan [Syncfusion]

Replied On August 17, 2020 10:43 AM UTC

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

Reply | Reply with quote

Martin Bleakley

Replied On August 17, 2020 08:07 PM UTC

Thank you Indrajith that was indeed extremely helpful.

Cheers

Reply | Reply with quote

Indrajith Srinivasan [Syncfusion]

Replied On August 18, 2020 06:48 AM UTC

Hi Martin,

Welcome,

Please let us know if you need any further assistance.

Regards,
Indrajith

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
156953	Jul 18,2019 01:03 PM UTC	Aug 18,2020 06:48 AM UTC	React - EJ 2	8

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US