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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

141049 Nov 20,2018 01:46 PM UTC Dec 30,2019 11:00 AM UTC Angular - EJ 2 5
loading
Tags: Grid
Laurens Albers
Asked On November 20, 2018 01:49 PM UTC

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

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. 
 
 
Regards, 
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"/> 

greetings,

Laurens

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. 
 
Regards 
J Mohammed Farook 


madhu
Replied On 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

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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 


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

Live Chat Icon For mobile
Live Chat Icon