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

Grid, Styling issues: Angular, TypeScript 3+, Material, JS2

Thread ID:





141049 Nov 20,2018 01:46 PM UTC Nov 21,2018 08:24 AM UTC Angular - EJ 2 3
Tags: Grid
Laurens Albers
Asked On November 20, 2018 01:49 PM UTC


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

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

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

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

Mohammed Farook J [Syncfusion]
Replied On 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. 
J Mohammed Farook 

Laurens Albers
Replied On 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"/> 



Mohammed Farook J [Syncfusion]
Replied On 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. 
J Mohammed Farook 


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