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, Styling issues: Angular, TypeScript 3+, Material, JS2

Hi,

Im having some issues with the css of the Grid component. The grid is showing a popup of an "ok" or "ok& cancel" button when a grid contains the  property:
                          [editSettings]='editSettings' //html
  editSettings: object = { allowEditing: true }; //ts

Info:
-It's there, even though no selection has been made.(Grid is not in edit mode )
-It does not matter if there is a toolbar inside the grid or not, the weird buttons remain.

please check the attached zip file for examples(.png's).

Any idea what could be causing this? Or am i missing some file/code?

//Styles.css
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-angular-buttons/styles/material.css";
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css';
@import "../node_modules/@syncfusion/ej2-angular-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-angular-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-angular-inputs/styles/material.css";

//package.json
"@syncfusion/ej2-angular-base": "^16.3.32",
    "@syncfusion/ej2-angular-buttons": "^16.3.30",
    "@syncfusion/ej2-angular-diagrams": "^16.3.30",
    "@syncfusion/ej2-angular-grids": "^16.3.30",
    "@syncfusion/ej2-angular-inputs": "^16.3.30",
    "@syncfusion/ej2-angular-lists": "^16.3.30",
    "@syncfusion/ej2-angular-navigations": "^16.3.30",
    "@syncfusion/ej2-angular-splitbuttons": "^16.3.30",
    "syncfusion-javascript": "^16.3.30",
    "ej-angular2": "^16.2.46", // needs this because of the old treeview



Attachment: zip_f8e0b075.zip

5 Replies

MF Mohammed Farook J Syncfusion Team November 21, 2018 06:12 AM UTC

Hi Laurens, 
 
Thanks for contacting Syncfusion support. 
 
From your given screenshot, we suspect you have enabled the editing in the Grid and this buttons are the popup of the edit confirmation dialog. So you need to refer the below popup css to your project to resolve this issue, 
 
 
We must need to refer this css when we use Syncfusion popups control. 
 
If you want all the EJ2 controls css in single reference, then please use this cdn to achieve this, 
 
<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" /> 
 
Otherwise, you need to refer all the EJ2 controls css separately for which you want to use in your project like below list, 
 
<link rel='nofollow' href="node_modules/@syncfusion/ej2-angular-base/styles/material.css" rel="stylesheet"/> 
      <link rel='nofollow' href="node_modules/@syncfusion/ej2-angular-grids/styles/material.css" rel="stylesheet" /> 
      <link rel='nofollow' href="node_modules/@syncfusion/ej2-angular-popups/styles/material.css" rel="stylesheet" /> 
      <link rel='nofollow' href="node_modules/@syncfusion/ej2-angular-navigations/styles/material.css" rel="stylesheet" /> 
      <link rel='nofollow' href="node_modules/@syncfusion/ej2-angular-buttons/styles/material.css" rel="stylesheet" /> 
      <link rel='nofollow' href="node_modules/@syncfusion/ej2-angular-calendars/styles/material.css" rel="stylesheet" /> 
      <link rel='nofollow' href="node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css" rel="stylesheet" /> 
      <link rel='nofollow' href="node_modules/@syncfusion/ej2-angular-inputs/styles/material.css" rel="stylesheet" /> 
      <link rel='nofollow' href="node_modules/@syncfusion/ej2-angular-splitbuttons/styles/material.css" rel="stylesheet" /> 
 
If you still facing this same issue, please share your full Grid code for further assistance. 
 
 
Regards, 
J Mohammed Farook 



LA Laurens Albers November 21, 2018 08:11 AM UTC

Thank you! I used your suggested:

<link rel='nofollow' rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet"/> 

greetings,

Laurens


MF Mohammed Farook J Syncfusion Team November 21, 2018 08:24 AM UTC

Hi Laurens, 
 
Thanks for your update. 
 
We are happy to hear that the provided solution has been resolved your problem. 
 
Regards 
J Mohammed Farook 



MA madhu replied to Mohammed Farook J December 28, 2019 03:15 PM UTC

Hi Laurens, 
 
Thanks for contacting Syncfusion support. 
 
From your given screenshot, we suspect you have enabled the editing in the Grid and this buttons are the popup of the edit confirmation dialog. So you need to refer the below popup css to your project to resolve this issue, 
 
 
We must need to refer this css when we use Syncfusion popups control. 
 
If you want all the EJ2 controls css in single reference, then please use this cdn to achieve this, 
 
<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" /> 
 
Otherwise, you need to refer all the EJ2 controls css separately for which you want to use in your project like below list, 
 
<link rel='nofollow' href="node_modules/@syncfusion/ej2-angular-base/styles/material.css" rel="stylesheet"/> 
      <link rel='nofollow' href="node_modules/@syncfusion/ej2-angular-grids/styles/material.css" rel="stylesheet" /> 
      <link rel='nofollow' href="node_modules/@syncfusion/ej2-angular-popups/styles/material.css" rel="stylesheet" /> 
      <link rel='nofollow' href="node_modules/@syncfusion/ej2-angular-navigations/styles/material.css" rel="stylesheet" /> 
      <link rel='nofollow' href="node_modules/@syncfusion/ej2-angular-buttons/styles/material.css" rel="stylesheet" /> 
      <link rel='nofollow' href="node_modules/@syncfusion/ej2-angular-calendars/styles/material.css" rel="stylesheet" /> 
      <link rel='nofollow' href="node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css" rel="stylesheet" /> 
      <link rel='nofollow' href="node_modules/@syncfusion/ej2-angular-inputs/styles/material.css" rel="stylesheet" /> 
      <link rel='nofollow' href="node_modules/@syncfusion/ej2-angular-splitbuttons/styles/material.css" rel="stylesheet" /> 
 
If you still facing this same issue, please share your full Grid code for further assistance. 
 
 
Regards, 
J Mohammed Farook 


hi mohammed. i could not get the ui design even after adding these styles in the file. Is any other solution is provided??
Thanks in advance

Attachment: error_document_c31fe6e8.zip


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team December 30, 2019 11:00 AM UTC

Hi Madhu, 
 
Greetings from Syncfusion. 
 
Query: i could not get the ui design even after adding these styles in the file. Is any other solution is provided?? 
 
We have validated your query and you can resolve the reported problem by using below way. By default, we can provide style reference by using either mentioning CDN link in html file or mentioning all the EJ2 controls CSS separately styles.css file(src/styles.css). Find the below code snippets and sample for you reference. 
 
[index.html] 
<head> 
  ... 
  <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />    //use rel=’stylesheet’ alone in link tag 
</head> 
 
(Or) use you need to refer all the EJ2 controls CSS separately for which you want to use in your project like below list in styles.css file. 
 
[src/styles.css] 
/* You can add global styles to this file, and also import other style files */ 
@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'; 
 
 
 
Also, please ensure that the syncfusion packages are properly installed in your node_modules folder or not at your end. 
 
Please get back to us if you need further assistance. 
 
Regards, 
Seeni Sakthi Kumar S 


Loader.
Up arrow icon