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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Data Grid Template Edit Issue with the lookup

Thread ID:

Created:

Updated:

Platform:

Replies:

141491 Dec 13,2018 11:08 PM UTC Dec 14,2018 10:18 AM UTC Angular - EJ 2 1
loading
Tags: Grid
Ameet Phadnis
Asked On December 13, 2018 11:08 PM UTC

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 [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;