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. Image for the cookie policy date

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

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

8 Replies

NP Narayanasamy Panneer Selvam Syncfusion Team July 21, 2019 01:35 PM

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.

 



MB Martin Bleakley August 14, 2020 11:46 PM

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?


IS Indrajith Srinivasan Syncfusion Team August 17, 2020 02:00 AM

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 



MB Martin Bleakley August 17, 2020 04:23 AM

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


MB Martin Bleakley August 17, 2020 04:24 AM

I've added the code above. 
The left panel I want to populate using a function. 

Thanks!


IS Indrajith Srinivasan Syncfusion Team August 17, 2020 05:43 AM

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 



MB Martin Bleakley August 17, 2020 03:07 PM

Thank you Indrajith that was indeed extremely helpful.

Cheers


IS Indrajith Srinivasan Syncfusion Team August 18, 2020 01:48 AM

Hi Martin, 
  
Welcome,

Please let us know if you need any further assistance.

Regards,
Indrajith 


Loader.
Live Chat Icon For mobile
Up arrow icon