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

Select programattically row, show scrollbars when we have an overflow, localization

Thread ID:

Created:

Updated:

Platform:

Replies:

130420 May 11,2017 03:47 PM May 16,2017 06:17 AM Angular 3
loading
Tags: ejGrid
sarah
Asked On May 11, 2017 03:47 PM

Hi

We are new to discover your component ejGrid under Angular2, and we like you help us with some points:

Our grid is defined like this : 
 <ej-grid id="Grid" [dataSource]="gridData" [allowPaging]="true" [allowSorting]="true" [allowFiltering]="true" locale="fr-FR" 
    [filterSettings]="filterType" (detailsDataBound)="detailsDataBound($event)"
    (rowSelecting)= rowSelecting($event
    >

And we have tree points to adapt : 
-Select programattically row, 
-Show scrollbars when we have an overflow, 
-Localization.

An other point relayed to ejGrid, if you have documentation else than https://help.syncfusion.com/angular-2/grid/overview;

Thanks in advance !

Regards

Sarah

Vignesh Natarajan [Syncfusion]
Replied On May 12, 2017 09:01 AM

Hi Sarah, 

Thanks for contacting Syncfusion Support. 

We have prepared sample that can be downloaded from below link 


Query 1: Select programattically row 
 
In above sample, on a button click event we have selected a row in Grid using “selectRows” method, based on a row index value in textbox. 
 
Note: give rowIndex as value 
 
<input type="text" id="text" /> 
<input type="button" ej-button id="button" value="Click me" (click)="onClick($event)" /> 
 
onClick(event) { 
        var value = $("#text").val() 
        this.Grid.widget.selectRows(ej.parseInt(value)); 
     }    
  
Query 2: Show scrollbars when we have an overflow,  
 
You can display scroller in grid by enabling allowScrolling as true and set scroll height use scrollSettings property of grid.  
 
<ej-grid  [allowPaging]="true" [allowSorting]="true"  allowScrolling="true" [scrollSettings]="scrollSettings" [dataSource]="gridData" [allowSearching]="true"  
locale="es-ES" #grid> 
 
Typescript 
export class AppComponent {         
     
    public scrollSettings = { height: 200, width: 400 }; 
@ViewChild('grid') Grid: EJComponents<any, any>; 
 
Query 3: Localization. 
Locale property of grid is used to set localization to grid.  
 
<ej-grid  [allowPaging]="true" [allowSorting]="true"  allowScrolling="true" [scrollSettings]="scrollSettings" [dataSource]="gridData" [allowSearching]="true"  
locale="es-ES" #grid> 
 
 
export class AppComponent {         
    constructor() { 
         ej.Pager.Locale["es-ES"] = { 
            pagerInfo: "{0} de {1} p&aacute;ginas ({2} art&iacute;culos)" 
        }; 
        ej.Grid.Locale["es-ES"] = { 
            GroupDropArea:  "Arrastre un encabezado de columna aquí para agrupar su       columna"  
        };    } 
    onClick(event) { 
        var value = $("#text").val() 
        this.Grid.widget.selectRows(ej.parseInt(value)); 
     }    
    public scrollSettings = { height: 200, width: 400 }; 
 
 
Please refer the below link for API documentation where you can get events, methods and functions 


Regards, 

Vignesh Natarajan 


Ranjani Prabhakaran [Syncfusion]
Replied On May 15, 2017 01:01 AM

From: Sarah Laasri  
Sent: Friday, May 12, 2017 1:54 PM
To: Syncfusion Support <support@syncfusion.com>
Subject: RE: Syncfusion support community forum 130420, Select programattically row, show scrollbars when we have an overflow, localization, has been updated. 
 
Hi,  
 
Thanks ! That was really helpful for the 2 first points and see another documentation for grid. 
 
For point 3 of localization, As you show me I can now change some attributes of grid as :  
ej.Pager.Locale["fr-FR"] = { 
            pagerInfo: "{0} de {1} pages ({2} items)" 
        }; 
        ej.Grid.Locale["fr-FR"] = {  
            EmptyRecord: "Pas de données"   
        };  
 
  1. But As I add excel filtering option in the grid, I would like to do the localization for filtering attributes too, is there anyway to do it ? it will be even better to have an option to apply localization generally to all your components by a file or something of sort.
 
  1. I remarked an issue by clicking of filter excel when the grid is empty :
 
 
 
When I have data in grid that show properly : 
 
 
Thanks in advance. 
 
Best regards 


Saravanan Arunachalam [Syncfusion]
Replied On May 16, 2017 06:17 AM

Hi Sarah, 
Query 1: I would like to do the localization for filtering attributes too, is there anyway to do it? 
We understood from your query, you need to do localization for the excel filtering and we have already discussed this query in the following UG documenatation. 
Query 2: I remarked an issue by clicking of filter excel when the grid is empty. 
The filter dialog will be render for each columns in the Grid control based on its type (number, string and boolean) that the type of the columns will be set automatically based on first record value in the Grid’s dataSource. If the dataSource is empty, the type will not set for the columns which is the cause of the issue. 
So, we suggest you to set the type manually for the each column by using type propety of Grid’s columns to avoid the reported issue. Please refer to the below jsplayground sample and api reference link. 
Regards, 
Saravanan A. 


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.

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.

;