We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

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
loading
Tags: Splitter
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

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.

 


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?

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

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!

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. 
 
 
Please let us know if the solution helps, 
 
Regards, 
Indrajith 


Martin Bleakley
Replied On August 17, 2020 08:07 PM UTC

Thank you Indrajith that was indeed extremely helpful.

Cheers

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon