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

Binding Grid with Angular 7

Thread ID:

Created:

Updated:

Platform:

Replies:

141132 Nov 26,2018 10:45 AM UTC Dec 4,2018 12:32 PM UTC Angular - EJ 2 5
loading
Tags: Grid
Velkumar
Asked On November 26, 2018 10:45 AM UTC

Good day, 

I'm new to SyncFusion, we planning to buy it for ANGULAR 7. I just started exploring but i have some difficulties while binding Grid. Below are my questions

1. In your examples, some case I seen ej-grid and some where ejs-grid - which is the right one for Angular 7? 
2. How to i enable pagination, searching and sorting
3. I'm facing out of memory exception while talking build in PROD env


Thavasianand Sankaranarayanan [Syncfusion]
Replied On November 27, 2018 09:12 AM UTC

Hi Velkumar, 
 
Thanks for contacting Syncfusion support. 
 
Query 1: In your examples, some case I seen ej-grid and some where ejs-grid - which is the right one for Angular 7?  
 
You can use the ejs-grid for using Angular 7 platform and ejs-grid is the next generation product. Essential JS 2 is fully re-written to be modular, responsive and lightweight.  

Refer the following documentation for getting started with angular platform. 

 
Query 2: How to i enable pagination, searching and sorting 
 
We have already discuss about above mention queries in the following documentations. 
 
 
 
  
Query 3: I'm facing out of memory exception while talking build in PROD env. 
 
Before proceeding to your query please provide the following details for better assistance. 
 
  1. Reported issue occur after the grid packages are installed or before itself ?
  2. What are the features are that you have enabled in Grid ?
  3. Share the complete Grid code example.
 
Regards, 
Thavasianand S. 


Velkumar
Replied On November 27, 2018 09:37 AM UTC

Hi Velkumar, 
 
Thanks for contacting Syncfusion support. 
 
Query 1: In your examples, some case I seen ej-grid and some where ejs-grid - which is the right one for Angular 7?  
 
You can use the ejs-grid for using Angular 7 platform and ejs-grid is the next generation product. Essential JS 2 is fully re-written to be modular, responsive and lightweight.  

Refer the following documentation for getting started with angular platform. 

 
Query 2: How to i enable pagination, searching and sorting 
 
We have already discuss about above mention queries in the following documentations. 
 
 
 
  
Query 3: I'm facing out of memory exception while talking build in PROD env. 
 
Before proceeding to your query please provide the following details for better assistance. 
 
  1. Reported issue occur after the grid packages are installed or before itself ?
  2. What are the features are that you have enabled in Grid ?
  3. Share the complete Grid code example.
 
Regards, 
Thavasianand S. 


Hi Thavasianand, 

Thanks for you response. I will follow the steps what you have mentioned below. 
If still I get the out of memory exception i will share my code base.

Thanks,
Velkumar

Madhu Sudhanan P [Syncfusion]
Replied On November 27, 2018 11:56 AM UTC

Hi Velkumar, 
Please try the given solution and get back to us if you faced any difficulties. 
Regards, 
Madhu 


Velkumar
Replied On December 3, 2018 10:01 AM UTC

Hi Team,

I have few questions, before purchasing the control which is related with Angular 7

1. It is possible to customize the current tabs style format to box types style format (Ex:- Gmail inbox tabs). like below



2. Possible to reduce the tabs navigation animate duration or remove the navigation animation?
3  It is possible to add extra tabs with different content template in run time?
4. I'm struggling to use base64 icon fonts. How do we add any extra style for icon fonts. Here i attached my sample project "syncfusion demo.zip"
5. How to add the extra icon fonts our projects
6.How to add the Data grid item more lines and add different text colors for single rows like below



7. .It is possible to Drag and drop with list of input box,text area box and custom templates.
8. If there any sample projects with all UI controls in syncfusion. It is possible please share? 

Attachment: syncfusion_demo_d47d5423.zip

Dhivya Rajendran [Syncfusion]
Replied On December 4, 2018 12:32 PM UTC

Hi Velkumar, 

Thanks for your update. 

Query1: It is possible to customize the current tabs style format to box types style format (Ex:- Gmail inbox tabs). like below  
 
We have used box type style format in tab component in bootstrap theme.  
 

Query2: Possible to reduce the tabs navigation animate duration or remove the navigation animation?  
 
You can remove the tab animation by setting ‘effect’ as ‘None’ using created event.    
  

Query3: It is possible to add extra tabs with different content template in run time?  

Yes. It is possible to add extra tab with different content template.    
 

Query4: I'm struggling to use base64 icon fonts. How do we add any extra style for icon fonts. Here i attached my sample project "syncfusion demo.zip"  

By default, we have added base 64 icon fonts.  If you wish to add extra font icons, you can add the customized icons using third party and use into tab control.  

Please let us know if you are facing any console error or the screen of the issue you are facing. So that we can check further and update you the solution accordingly.  

Query5: How to add the extra icon fonts our projects 

We can add font awesome icons into tab component.  Please find the below link.  
 

Query6: How to add the Data grid item more lines and add different text colors for single rows 
 
We have analyzed your requirement and you can achieve this by using queryCellInfo event of Grid. In the below, we have add different text color for the $ symbol of Freight column in Grid. 

Please find the below code example and modified sample for more information. 

<ejs-grid  [dataSource]='data' (queryCellInfo)='queryCellInfo($event)' [allowPaging]="true" [allowSorting]="true" [pageSettings]="pageSettings"  
                [enablePersistence]='true'   [searchSettings]='searchOptions' [toolbar]='toolbarOptions' > 
                  <e-columns> 
                      <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column> 
                  </e-columns> 
                  </ejs-grid> 


  
  queryCellInfo(args) { 
      if(args.column.field === 'Freight'){ 
        let dollar= args.cell.innerText.slice(0,1); 
        let freight = args.cell.innerText.substring(1); 
        args.cell.innerHTML = `<span style='color: #ff0000'>${dollar}</span>${freight}`; 
      } 
  } 



Query7: It is possible to Drag and drop with list of input box,text area box and custom templates. 

Could you please provide more information or below details regarding your requirement. It will be helpful for further analysis and to provide a better solution as soon as possible. 

  1. Do you want to drag the input/text box and drop to grid columns.
  2. If possible share video and demonstrate your requirement(what you need or expected output)
 
Query8: If there any sample projects with all UI controls in syncfusion. 
 
We suggest you to refer the demo sample(if you are already installed the build) from the below location. In the below location we have sample for all web UI controls of Syncfusion Essential JavaScript2. 

Demo sample location: <C:\Users\Public\Documents\Syncfusion\JavaScript - EJ2\xx.x.x.xx\Angular>  

Regards, 
R.Dhivya 


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