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

Grid inside TabComponent does not allow childGrid to be open

I am trying to have 2 grids inside a tabcomponent, one of the grid does have a child grid, unfortunately I am not allow to expand the childgrid.

See example attached.

Greetings
Matteo

Attachment: ToleranceEditDialogWR_a1487f74.7z

23 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team July 1, 2019 11:26 AM UTC

Hi Matteo, 

Greetings from the Syncfusion support, 

We have validated the your query provided information. We suspect that rendering all the component at same time in React framework. In this case, parent and child components are rendering on DOM incorrectly. It is cause of defect. We suggest you to use the EJ2 Grid rendering on Dialog without fails(expanding is not working) using content property of EJ2 Dialog as bind the child component properly. 

[index.js] 

render() { 
 
      // tab items are defined in render 
         function template1() { 
            return(               
               <div>TEXT</div>      
          ); 
          } 
          function template2() { 
            return(    
 
                 <div className="col-xs-12">                                             
                    <GridComponent dataSource={employeeData} childGrid = {this.detailGrid} width='auto'> 
                        <ColumnsDirective> 
                             
                            <ColumnDirective field='FirstName' headerText='First Name' isPrimaryKey={true} width='110'/>            
                            <ColumnDirective field='LastName' headerText='Last Name' width='110'/> 
                            <ColumnDirective field='Title' headerText='Name' width='150'/> 
                            <ColumnDirective field='Country' headerText='Country' width='110'/> 
                        </ColumnsDirective> 
                        <Inject services={[DetailRow]}/> 
                    </GridComponent> 
            </div> 
          ); 
          } 
          var headertext; 
        headertext = [{ text: "Sequence Usage" }, { text: "Measure Tolerances" }]; 
        return ( 
          <DialogComponent height={1000}  width="90%" showCloseIcon={true} isModal={true} header={"Edit Tolerance for measure: "} 
              ref={d => this.dialog = d}  allowDragging={true}  > 
               <div className='control-pane'> 
                <div className='control-section tab-control-section row'> 
                    <div className='col-lg-8'> 
                        {/* Render the Tab Component */}                
                        <TabComponent ref={(tab) => { this.tabObj = tab }} showCloseButton={ true } heightAdjustMode='None' height={320}> 
                        <TabItemsDirective> 
                        <TabItemDirective header={headertext[0]} content={ template1.bind(this) } /> // Bind the tab items through function   
                        <TabItemDirective header={headertext[1]} content={ template2.bind(this) }/> 
                        
                        </TabItemsDirective> 
                        </TabComponent> 
                    </div> 
                    </div> 
                    </div> 
 
</DialogComponent>  


Please get back to us, if you need further assistance. 

Regards, 
Thavasianand S. 



MA Matteo July 1, 2019 11:52 AM UTC

Thank you!

It appears to work this way.

Greetings
Matteo


TS Thavasianand Sankaranarayanan Syncfusion Team July 2, 2019 06:04 AM UTC

Hi Matteo, 
 
Thanks for your update. 
 
We are happy that the problem has been resolved at your end. 
 
Regards, 
Thavasianand S. 



MA Matteo July 31, 2019 02:21 PM UTC

I found a new issue with this solution,
the components inside the tabcomponent don't update when I change the state.

The content I insert appears to be static.

Matteo


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team August 1, 2019 01:36 PM UTC

Hi Matteo, 

We have achieved the reported issue in EJ2 Grid with Tab component to working properly when we change the state property. In below code example, we have passed the state values using Content.data property of Tab Component and we can access on that state properties in template and it is working state changes on Tab component. Please refer the below code example and sample for more information. 

[index.tsx] 
 
class App extends React.Component { 
  constructor() { 
    super(...arguments); 
    this.data = [ 
      { FirstName: "Ram", LastName: "Kumar", Name: "AJAI", Country: "India" } 
    ];   
    this.state = { name: "name", family: "family" }; 
    this.headertext = [{ text: "Tab1", iconCss: "e-twitter" }]; 
  } 
   
  tabContent = (data, data1) => { 
    return ( 
      <React.Fragment> 
        {console.log("--->tabContent1: Name=", this.state.name)} 
        <p>Grid control is rendered inside Tab Component</p> 
        <div> 
           
          <GridComponent dataSource={this.data} width="auto"> 
            <ColumnsDirective> 
              <ColumnDirective 
                field="FirstName" 
                headerText="First Name" 
                isPrimaryKey={true} 
                width="110" 
              /> 
              <ColumnDirective 
                field="LastName" 
                headerText="Last Name" 
                width="110" 
              /> 
              <ColumnDirective field="Title" headerText="Name" width="150" /> 
              <ColumnDirective 
                field="Country" 
                headerText="Country" 
                width="110" 
              /> 
            </ColumnsDirective> 
            <Inject services={[DetailRow]} /> 
          </GridComponent> 
          <p>{data.text}</p> // state value changed here when update the state value in button click action 
                <p>{data.textVal}</p> // state value changed here when update the state value in button click action 
          <button onClick={this.btnClick.bind(this)}>click hear</button> 
        </div> 
      </React.Fragment> 
    ); 
  }; 
 
  btnClick = () => { 
    var newName = "name :" + new Date().toTimeString(); 
    var familyName = "family : " + new Date().toTimeString(); 
    this.setState({ name: newName }); 
    this.setState({ family: familyName });      
  }; 
 
    ShowTabs = () => { 
    return ( 
      <TabComponent 
        enablePersistence="true" 
        heightAdjustMode="Auto" 
        id="defaultTab" > 
        <TabItemsDirective> 
          <TabItemDirective 
            presentation={true} 
            header={this.headertext[0]} 
            content={{ 
              template: this.tabContent, 
              data: { text: this.state.name, textval: this.state.family }  //Pass the state values in data property in tab component 
            }} 
          /> 
          {console.log("ShowTabs2")} 
        </TabItemsDirective> 
      </TabComponent> 
    ); 
  }; 
 
  render() { 
    return ( 
      <div className="control-pane"> 
        <div className="control-section tab-control-section">           
                <button onClick={this.btnClick.bind(this)}>click here</button> 
                <br /> 
          {this.ShowTabs()}           
        </div> 
      </div> 
    ); 
  } 
} 
render(<App />, document.getElementById("root")); 


Please get back to us, if you need further assistance. 

Regards, 



MA Matteo September 16, 2019 02:07 PM UTC

The Example does not work, it's just showing a button, when I click on it, it dissapears and nothing appears.

Greetings
Matteo


TS Thavasianand Sankaranarayanan Syncfusion Team September 17, 2019 02:09 PM UTC

Hi Matteo, 

We have checked the previously updated the sample. It is working  properly with your requirement. We are prepared a video with explained state property behavior on Tab component with EJ2 Grid. Please refer the sample and Video demonstration for more information.  



Regards, 
Thavasianand S. 



MA Matteo replied to Thavasianand Sankaranarayanan September 19, 2019 02:21 PM UTC

Hi Matteo, 

We have checked the previously updated the sample. It is working  properly with your requirement. We are prepared a video with explained state property behavior on Tab component with EJ2 Grid. Please refer the sample and Video demonstration for more information.  



Regards, 
Thavasianand S. 


This is what I see when I open your link.

There is no grid.



TS Thavasianand Sankaranarayanan Syncfusion Team September 20, 2019 01:49 PM UTC

Hi Matteo, 

We suspect that you have used the sample faced some package connectivity problem since we prepared a sample in local application with your requirement and you are able run the sample with README file guidance. Please refer the below sample for more information. 


Regards, 
Thavasianand S. 



MA Matteo October 23, 2019 07:59 AM UTC

This solution does not work.

If I update the state programmatically I cannot see the changes inside the fields in the tabs.

Also validation via FormValidator does not work inside the tabs

Greetings
Matteo


TS Thavasianand Sankaranarayanan Syncfusion Team October 24, 2019 09:26 AM UTC

Hi Matteo 

Query #1: If I update the state programmatically I cannot see the changes inside the fields in the tabs. 

We couldn’t see you have reported problem “State is not update inside EJ2 Tab component while programmatically to change the state property ” and we checked the previously updated a sample it is working properly for the state change action. We are prepared a sample with explain the Grid and state property rendering with state updating inside tab. Please refer the below video demonstration for more information. 


Query #2: Validation via FormValidator does not work inside the tabs  
 
Before proceeding this query please provide the following details. 
 
  1. Do you have the formvalidator for Grid editing or  render an individual component ?
  2. Share screen shot or video demonstration of the issue.
  3. Share the Rendering code example.

Regards, 
Thavasianand S. 



MA Matteo October 25, 2019 09:12 AM UTC

Hello

#Query 1

See attached file.

#Query 2

See attached file.

I need to validate the data in a different tab from the grid.

Greetings
Matteo

Attachment: SequenceAttachMeasureDialog_190ac911.zip


SP Sureshkumar P Syncfusion Team November 4, 2019 06:44 AM UTC

Hi Matteo, 
 
We have checked the provided code example and prepared the sample for validate the TextBox and DropDownList component in different tab inside the Dialog component and attached below.  
 
 
Please check the above sample and explain the issue that you have faced in your application (which components) by any screenshot or video demonstration that will help us to check and proceed further. 
 
Also, we have updated the value field to the component using state programmatically. 
 
Regards, 
Sureshkumar P 



MA Matteo replied to Sureshkumar P November 4, 2019 04:35 PM UTC

Hi Matteo, 
 
We have checked the provided code example and prepared the sample for validate the TextBox and DropDownList component in different tab inside the Dialog component and attached below.  
 
 
Please check the above sample and explain the issue that you have faced in your application (which components) by any screenshot or video demonstration that will help us to check and proceed further. 
 
Also, we have updated the value field to the component using state programmatically. 
 
Regards, 
Sureshkumar P 


This was my original solution.

It is not possible to modify the state bound inside the tab programmatically.


SP Sureshkumar P Syncfusion Team November 5, 2019 11:02 AM UTC

Hi Matteo, 
 
he content template components have not refreshed since we have rendered the template components as individual react component and we only update the components if we detect any changes in the component properties to avoid multiple rerender of the components, so we suggest you assign a state property in the TabItemDirective to trigger the state changes    
 
<TabItemDirective connectStatus={this.state.connectionFromStore}   
              header={this.tabHeaders[0]}   
              content={this.connectionTabContent}   
            />  
 
   
We have also prepared a sample for content changes in tab on state change. Please find the sample link in below: 
 
Regards, 
Sureshkumar P 



MA Matteo replied to Sureshkumar P November 6, 2019 09:16 AM UTC

Hi Matteo, 
 
he content template components have not refreshed since we have rendered the template components as individual react component and we only update the components if we detect any changes in the component properties to avoid multiple rerender of the components, so we suggest you assign a state property in the TabItemDirective to trigger the state changes    
 
<TabItemDirective connectStatus={this.state.connectionFromStore}   
              header={this.tabHeaders[0]}   
              content={this.connectionTabContent}   
            />  
 
   
We have also prepared a sample for content changes in tab on state change. Please find the sample link in below: 
 
Regards, 
Sureshkumar P 


This is a one time state update,

I need to be able to update the state as much as I like based on the actual status.

The form is composed of several fields: [Italian, French, German, English]
Each field has a button that copies the value present in the chosen field into the others.

The form is contained into a Tab and must be validated via FormValidator.

Please provide me a solution for this specific problem.


SP Sureshkumar P Syncfusion Team November 7, 2019 12:29 PM UTC

Hi Matteo, 
 
While checking the query, we suspect that you want to validate the form fields inside the Tab component and copy the one form fields values to another form fields values. But, we are not aware of the controls for the mentioned fields in your last update since every component have different value type. So, can you please elaborate your requirement with any screenshot or reference that will help us to check and proceed further. 
 
Regards, 
Sureshkumar P 



MA Matteo November 11, 2019 10:38 AM UTC

Hi,

starting from the fact that users are lazy,
we have the attached form, each field is supposed to have the same string in a different language, what users usually do is write the string in one language and just copy the value to the other fields without translating, using the button on the right.

All that button does is check its name, if it contains Italian:
it sets state.french, state,english and state.german to the state.italian value.

Greetings
Matteo

Attachment: Cattura_930ad21.zip


BC Berly Christopher Syncfusion Team November 12, 2019 07:36 AM UTC

Hi Matteo, 

Thanks for providing enough information. We have prepared the sample based on the provided information and attached it below. And we can copy the values from one TextBox component to required component by taking the reference of the component and assigned the value to it as mentioned below.  

<div className="row"> 
    <div className="col-sm-6"> 
        <TextBoxComponent placeholder="Italian" 
                          floatLabelType="Auto" 
                          id="Italian_textbox" 
                          value={connection.host} ref={textbox => 
            this.italianObj = textbox} 
            /> 
    </div> 
    <button id="Italian_button" className="e-btn" onClick={this.ItalianChange.bind(this)}>Copy Italian</button> 
</div> 
ItalianChange = () => { 
    this.frenchObj.value = this.italianObj.value; 
    this.germanObj.value = this.italianObj.value; 
    this.englishObj.value = this.italianObj.value; 
  } 

  
Please find the sample from the below link. 
 
Regards, 
Berly B.C


MA Matteo November 12, 2019 09:35 AM UTC

Hello,


ignoring the fact that this is an extremely inelegant solution,
you took into consideration only my last post and ignored all the previous requirements.

Please include TabComponent and FormValidation into the solution.

Greetings
Matteo


BC Berly Christopher Syncfusion Team November 13, 2019 08:37 AM UTC

Hi Matteo, 

We have integrated the Form Validator with the requested requirement inside the Tab component and attached it below.  

Please find the sample from the below link. 
 
Regards, 
Berly B.C


MA Matteo replied to Berly Christopher November 21, 2019 05:07 PM UTC

Hi Matteo, 

We have integrated the Form Validator with the requested requirement inside the Tab component and attached it below.  

Please find the sample from the below link. 
 
Regards, 
Berly B.C

When you change the state the tab gets reloaded and doesn't remember the changes,
all the components should work together.


SP Sureshkumar P Syncfusion Team November 22, 2019 09:11 AM UTC

Hi Matteo, 
 
We have validated your reported issue, we suspect that in that sample button element is not updated with type=”buuton” property. If button not mentioned as button type inside the form element act as submit button. That is the reason the sample gets reloaded while changing the state property through button click. 
 
Kindly refer the below code block. 
 
<form id="form1"> 
    <div className="form-horizontal mt-3"> 
        <div className="row"> 
            <div className="col-sm-6"> 
                <TextBoxComponent placeholder="Italian" floatLabelType="Auto" id="Italian_textbox" name="Italian" 
                    change={this.textboxChange.bind(this)} value={connection.host} ref={textbox=> this.italianObj = 
                    textbox} 
                    /> 
            </div> 
            <button id="Italian_button" type="button" className="e-btn" onClick={this.ItalianChange.bind(this)}>Copy 
                Italian</button> 
        </div> 
        <div className="row"> 
            <div className="col-sm-6"> 
                <TextBoxComponent placeholder="French" name="French" floatLabelType="Auto" id="French_textbox" 
                    change={this.textboxChange.bind(this)} value={connection.port} ref={textbox=> this.frenchObj = 
                    textbox} 
                    /> 
            </div> 
            <button id="French_button" type="button" className="e-btn" onClick={this.FrenchChange.bind(this)}>Copy 
                French</button> 
 
        </div> 
        <div className="row"> 
            <div className="col-sm-6"> 
                <TextBoxComponent placeholder="German" name="German" floatLabelType="Auto" id="German_textbox" 
                    change={this.textboxChange.bind(this)} value={connection.port} ref={textbox=> this.germanObj = 
                    textbox} 
                    /> 
            </div> 
            <button id="German_button" type="button" className="e-btn" onClick={this.GermanChange.bind(this)}>Copy 
                German</button> 
        </div> 
        <div className="row"> 
            <div className="col-sm-6"> 
                <TextBoxComponent placeholder="English" name="English" floatLabelType="Auto" id="English_textbox" 
                    change={this.textboxChange.bind(this)} value={connection.port} ref={textbox=> this.englishObj = 
                    textbox} 
                    /> 
            </div> 
            <button id="English_button" type="button" className="e-btn" onClick={this.EnglishChange.bind(this)}>Copy 
                English</button> 
 
        </div> 
    </div> 
    <div className="row mt-5"> 
        <div className="col-sm-4 btn-group"> 
            <div className="pl-2"></div> 
        </div> 
    </div> 
</form> 
 
 
We have modified our previously attached sample. Please refer the sample here: https://stackblitz.com/edit/react-knu8jc-k7jqhy?file=index.js  
 
If we misunderstood your query, please revert as with the comprehensive and exact scenario with issue reproducing steps. That will help us to provide exact solution at our end earliest. 
 
Regards, 
Sureshkumar P 


Loader.
Live Chat Icon For mobile
Up arrow icon