Data Grid Template Edit Issue with the lookup

[Ameet Phadnis]

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

[Mohammed Farook J]

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"> 

 

Help Documentation: https://ej2.syncfusion.com/angular/documentation/grid/getting-started/?no-cache=1#adding-css-reference  

 

Please get back to us if you need further assistance. 

 

 

Regards, 

J Mohammed Farook