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

Data Grid Template Edit Issue with the lookup

Hi,
I followed this example - https://ej2.syncfusion.com/angular/demos/#/material/grid/dialog-reactive-form

But my screen shows as follows -

<div class="form-row">
                <div class="form-group col-md-4">
                  <div class="e-float-input e-control-wrapper">
                    <input formControlName="tkid" id="tkid" name="tkid" type="text" [attr.disabled]="true">
                    <span class="e-float-line"></span>
                    <label class="e-float-text e-label-top" for="tkid"> TKID</label>
                  </div>

                </div>
                <div class="form-group col-md-4">
                  <div class="e-float-input e-control-wrapper">
                    <input formControlName="networkUserName" id="networkUserName" name="networkUserName" type="text" [attr.disabled]="true">
                    <span class="e-float-line"></span>
                    <label class="e-float-text e-label-top" for="networkUserName">Network User Name</label>
                  </div>

                </div>
                <div class="form-group col-md-4">
                  <div class="e-float-input e-control-wrapper">
                    <input formControlName="jobTitle" id="jobTitle" name="jobTitle" type="text" [attr.disabled]="true">
                    <span class="e-float-line"></span>
                    <label class="e-float-text e-label-top" for="jobTitle">Job Title</label>
                  </div>

                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-md-3">
                  <div class="e-float-input e-control-wrapper" [ngClass]="{'e-error': firstName.invalid && (firstName.dirty || firstName.touched)}">
                    <input formControlName="firstName" data-msg-containerid='firstNameError' id="firstName" name="firstName" type="text">
                    <span class="e-float-line"></span>
                    <label class="e-float-text e-label-top" for="firstName">First Name</label>
                  </div>
                  <div id="firstNameError" [style.visibility]='((firstName.invalid && (firstName.dirty || firstName.touched)) || (firstName.invalid && submitClicked))? "visible": "hidden"'>
                    <label class="e-error" for="firstName" id="firstName-info" style="display: block;">*First Name is required</label>
                  </div>
                </div>
                <div class="form-group col-md-3">
                  <div class="e-float-input e-control-wrapper">
                    <input formControlName="middleName" id="middleName" name="middleName" type="text">
                    <span class="e-float-line"></span>
                    <label class="e-float-text e-label-top" for="middleName">Middle Name</label>
                  </div>
                </div>
                <div class="form-group col-md-3">
                  <div class="e-float-input e-control-wrapper" [ngClass]="{'e-error': lastName.invalid && (lastName.dirty || lastName.touched)}">
                    <input formControlName="lastName" data-msg-containerid='lastNameError' id="lastName" name="lastName" type="text">
                    <span class="e-float-line"></span>
                    <label class="e-float-text e-label-top" for="lastName">Last Name</label>
                  </div>
                  <div id="lastNameError" [style.visibility]='((lastName.invalid && (lastName.dirty || lastName.touched)) || (lastName.invalid && submitClicked))? "visible": "hidden"'>
                    <label class="e-error" for="lastName" id="lastName-info" style="display: block;">*Last Name is required</label>
                  </div>
                </div>
                <div class="form-group col-md-3">
                  <div class="e-float-input e-control-wrapper">
                    <input formControlName="displayName" id="displayName" name="displayName" type="text">
                    <span class="e-float-line"></span>
                    <label class="e-float-text e-label-top" for="displayName">Display Name</label>
                  </div>
                </div>
              </div>

Here is how it shows on the screen -


Can you let me know which css file I am missing?
Thanks,
Ameet


1 Reply

MF Mohammed Farook J Syncfusion Team December 14, 2018 10:18 AM UTC

Hi Ameet, 
 
Thanks for contacting Syncfusion support. 
 
Query: I followed this example - https://ej2.syncfusion.com/angular/demos/#/material/grid/dialog-reactive-form. Can you let me know which css file I am missing? 
 
We have validated your query and we suspect that you don’t include styles for ej2-inputs. Please include styles for ej2-inputs in your styles file.  
 
[code example] 
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';   
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';   
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';   
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';   
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';   
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; 
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; 
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';   
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css'; 
 
Note: If you want to refer styles for individual components, then please use above way to refer your style files. (you need to refer individual style references in your styles.css file) 
 
(or) 
 
If you want to refer all components style, then please use the below link. (refer in index.html file) 
 
<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet"> 
 
 
Please get back to us if you need further assistance. 
 
 
Regards, 
J Mohammed Farook 


Loader.
Live Chat Icon For mobile
Up arrow icon