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

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 .


8 Replies

NP Narayanasamy Panneer Selvam Syncfusion Team 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

Narayanasamy P.


MB Martin Bleakley 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?

IS Indrajith Srinivasan Syncfusion Team 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. 

MB Martin Bleakley 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) {
    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>

  rightPaneTemplate() {
    return (<div>
<h1>Hello World!</h1>
  render() {
    return (
      <div id="defaultSplitter" className="control-section">
      <div className="pane1">
        <div id="pane-heading">Horizontal Splitter</div>
        <SplitterComponent height="110px" width="100%" separatorSize={4}>
    <PaneDirective size={"200px"} content={this.leftPaneTemplate}/>   
    <PaneDirective content = {this.rightPaneTemplate}/>

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

MB Martin Bleakley August 17, 2020 09:24 AM UTC

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


IS Indrajith Srinivasan Syncfusion Team 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, 

MB Martin Bleakley August 17, 2020 08:07 PM UTC

Thank you Indrajith that was indeed extremely helpful.


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

Hi Martin, 

Please let us know if you need any further assistance.


Live Chat Icon For mobile
Up arrow icon