splitter documentation

[Steve]

Hi,

I'm looking at the splitter documentation but I cannot seem to find an example or explanation on how I would do an interactive update on the panels.

Example: if having 3 panels left treeview , center a Grid and right a form with some text controls.
When clicking on the treeview the center should show the correct list, if clicked on the grid row the right panel should load the correct text in the textbox.

I found the mail demo but this is not showing how this would work if one clicks on the items.
Do you have an example that could help me out?

[Revanth Krishnan]

Hi Steve, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “If having 3 panels left tree view, center a Grid and right a form with a text controls. When clicking on the tree view the center should show the correct list, if clicked on the grid row the right panel should load the correct text in the textbox.” 

 

 

Your requirement can be achieved by using the ‘nodeClick’ to detect the tree view node click and load/filter data based on the click using the instance of the Grid and then when clicking on the Grid, the ‘rowSelected’ event can be used to get the data and then assign the data in the fields in the third pane. We have prepared a sample for your reference, 

 

Code Snippet: 

export class OutlookLayout extends SampleBase { 

  . . . 

  nodeClicked(args) { 

    if (args.node.getElementsByClassName('textcontent')[0].innerText) { 

      var gridObj = document.getElementsByClassName('e-grid')[0] 

        .ej2_instances[0]; 

      gridObj.dataSource = gridObj.dataSource.slice(0, 5); 

      // likewise you can change Grid dataSource as per your needs. 

    } 

  } 

  rowSelected(args) { 

    document.getElementById('firstname').ej2_instances[0].value = 

      args.data.CustomerID; 

  } 

  . . . 

  content1() { 

    return ( 

      <div className="splitter-content"> 

        <TreeViewComponent 

          id="splitter-tree" 

          fields={this.treeFields} 

          nodeTemplate={this.nodeTemplate} 

          nodeClicked={this.nodeClicked.bind(this)} 

        /> 

      </div> 

    ); 

  } 

  content2() { 

    return ( 

      <div className="control-pane"> 

        <div className="control-section"> 

          <GridComponent 

            dataSource={data} 

            rowSelected={this.rowSelected.bind(this)} 

            height="350" 

          > 

            . . . 

          </GridComponent> 

        </div> 

      </div> 

    ); 

  } 

  content3() { 

    return ( 

      <div> 

        <div className="splitter-content"> 

          <div style={{ width: '100%', padding: '15px' }}> 

            <table> 

              <tr> 

                <td id="firstname-target"> 

                  <h4>Grid data Displayed</h4> 

                  <TextBoxComponent 

                    id="firstname" 

                    placeholder="Customer Name" 

                  /> 

                </td> 

              </tr> 

            </table> 

          </div> 

        </div> 

      </div> 

    ); 

  } 

  onSplitterResize() { 

    this.rteObj.refreshUI(); 

  } 

  render() { 

    return ( 

      <div id="target" className="control-section outlook-style"> 

        <SplitterComponent 

          id="splitter1" 

          height="493px" 

          width="100%" 

          ref={splitter => { 

            this.splitterInstance = splitter; 

          }} 

          resizing={this.onSplitterResize.bind(this)} 

        > 

          <PanesDirective> 

            <PaneDirective 

              size={this.paneSize1} 

              min={this.minimumSize1} 

              content={this.content1.bind(this)} 

            /> 

            <PaneDirective 

              size={this.paneSize2} 

              min={this.minimumSize2} 

              content={this.content2.bind(this)} 

            /> 

            <PaneDirective 

              size={this.paneSize3} 

              min={this.minimumSize3} 

              content={this.content3.bind(this)} 

            /> 

          </PanesDirective> 

        </SplitterComponent> 

      </div> 

    ); 

  } 

} 

 

Sample: https://stackblitz.com/edit/react-asvqrr-kzx4kb?file=index.js 

 

Please check the above code snippet and the sample and let us know if it satisfies your requirement. 

 

Regards, 

Revanth