How to save column chooser selected values as user preference
9 Replies
Hi Madhur ,
Query 1: For the first problem it is now working fine. I think something got changed which caused the problem. But Could you please let me know how can I save the state in indexeddb.
We are happy to hear that your issue has been resolved. We have suspect that , you want to save what are the column has changed the visibility(show/hide) from the Grid. We have suggest to use the following code you can get show columns and hide columns from the grid .
<ejs-grid #grid [dataSource]='data' (actionComplete)='actionComplete($event)' allowPaging='true' showColumnChooser='true' [toolbar]="toolbar" >
. .
</ejs-grid>
</div>
import { ToolbarService, ColumnChooserService, GridComponent, Column } from '@syncfusion/ej2-angular-grids';
import { data } from './data';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
providers: [ToolbarService, ColumnChooserService]
})
export class AppComponent {
public data: Object[];
public toolbar: string[];
public pageSettings: Object;
@ViewChild('grid')
public grid : GridComponent;
public showColumns : Column[];
public hideColumns : Column[];
actionComplete(args){
if(args.requestType==='columnstate'){
this.showColumns = this.grid.getVisibleColumns();
this.hideColumns = this.grid.getHiddenColumns();
}
}
.. .
In the above code, we can get the show and hide column when pressed ok button of the column chooser through actionComplete event with its requestType as ‘columnstate’ by using ‘getVisibleColumns()’ and ‘getHiddenColumns()’ method of Grid. Please find the documentation for your reference.
you can store the column details in your database as you want. This is not meet your requirement could you please explain more details about your requirement. Also share the details about in which state you want to save in your database.
Query 2: Is it possible i can apply a background Image instead of Cloumn Chooser button text Columns.
You can change the column chooser button from the toolbar by using the following code.
[app.component.html]
<ejs-grid #grid (dataBound)="dataBound($event)"[dataSource]='data' allowPaging='true' showColumnChooser='true' [toolbar]="toolbar" [pageSettings]='pageSettings'>
<e-columns>
<e-column field='OrderID' isPrimaryKey='true' headerText='Order ID' width='120' textAlign='Right'></e-column>
<e-column field='CustomerName' headerText='Customer Name' width='150' [showInColumnChooser]='false'></e-column>
<e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right'></e-column>
<e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column>
<e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right'></e-column>
<e-column field='ShipCountry' headerText='Ship Country' [visible]='false' width='150'></e-column>
<e-column field='ShipCity' headerText='Ship City' [visible]='false' width='150'></e-column>
</e-columns>
</ejs-grid>
[app.component.ts]
export class AppComponent {
public data: Object[];
public toolbar: string[];
public pageSettings: Object;
public editSettings: Object;
. . .
dataBound(e){
if(this.grid.element.querySelector('#' + this.grid.element.id + '_columnchooser')){
this.grid.element.querySelector('#' + this.grid.element.id + '_columnchooser').remove();
var img = document.createElement('img');
img.src = "https://ej2.syncfusion.com/angular/demos/assets/grid/images/1.png";
this.grid.element.querySelector('.e-cc-toolbar').append(img);
}
}
}
[app.component.css]
.e-grid .e-cc-toolbar img{
width: 30px;
height: 30px;
}
In the above code, we have remove the column chooser button from the toolbar and add the ‘img’ tag. Please find the screenshot for your reference.
Query 3: So is it possible that I can change the text globally.
Yes, you can change the text of Column chooser from the default by using the following code.
[app.component.html]
<ejs-grid #grid (load)='load($event)' [dataSource]='data' allowPaging='true' showColumnChooser='true' [toolbar]="toolbar" [pageSettings]='pageSettings'>
. . .
</ejs-grid>
[app.component.ts]
export class DataBindingComponent implements OnInit {
public data: Object[];
public toolbar: string[];
public pageSettings: Object;
@ViewChild('grid')
public grid : GridComponent;
load(e){
this.grid.localeObj['localeStrings']['CancelButton']= 'Canceled';
this.grid.localeObj['localeStrings']['OKButton'] = 'Confirm';
this.grid.localeObj['localeStrings']['ChooseColumns'] = 'Select Columns';
}
In above code, we have changed the text column chooser text by using ‘load’ event and localeStrings of localObj in Grid.
Regards,
J Mohammed Farook
Hi Madhur,
We have already explained the State Persistence feature and browser local storage clearly in our previous update . Please check the previous update as follows.
|
By default , the State Persistence feature worked based on browser local storage. If you the run same sample in that same browser(without clear history) , The Grid loaded the settings from the browser local storage. So the Grid sample rendered with your last changes. But if you run the sample in another browser , the Grid can render in that first time in that browser (local storage is not any information , this is default behavior of browser). So it will be rendered based on your Grid model definition . So this is not possible load the Grid settings from one browser to another browser.
|
By default if you have run the same sample in different screen or different browser we are unable to get state persistence . this is default behavior. In the last update we suggest to store the column state inform through actionComplete event when you change the column state. Please find the code example.
|
actionComplete(args){
if(args.requestType==='columnstate'){
this.showColumns = this.grid.getVisibleColumns();
this.hideColumns = this.grid.getHiddenColumns();
}
} |
You can store the column names and its visibility in your data base.
Once if you have run the same sample in different screen or different browser . you can change the column visibility based on saved column state from your database through ‘load’ event of Grid
|
load(e){
for(var i=0; i< this.grid.columns.length; i++){
// check column visibility from your database here. And if your condition is satisfied , then you can set the column visibility as
// column has visible you can set the visibility as
this.grid.columns[i]. visible = true
// if the column has hidden you can set the visibility as
this.grid.columns[i]. visible = false
}
} |
Now you can rendered the Grid based on your last settings based on your database saved column information
Please get back to us if you need further assistance.
Regards,
Ajith G.
SIGN IN To post a reply.
