1. Home
  2. Forum
  3. Angular
  4. Select programattically row, show scrollbars when we have an overflow, localization

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

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

3 Replies
VN Vignesh Natarajan Syncfusion Team May 12, 2017 01:01 PM UTC

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 


RP Ranjani Prabhakaran Syncfusion Team May 15, 2017 05:01 AM UTC

From: Sarah Laasri  
Sent: Friday, May 12, 2017 1:54 PM
To: Syncfusion Support <[email protected]>
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 


SA Saravanan Arunachalam Syncfusion Team May 16, 2017 10:17 AM UTC

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. 


Loader.
Up arrow icon