Changing the column header name in Angular ui grid exporter - angularjs

I am exporting the ui-grid to CSV using the angular ui grid exporter. Is there a way to update the header name while exporting it to CSV/PDF. I am using exporterFieldCallback to format some of the values in the table, but when I try to update the header name in exporterFieldCallback from col, it does not take effect.
I also would like to know if its possible to suppress a row from exporting.

You can use exporterHeaderFilter callback in your gridOptions to change the column header before exporting it. For example:
exporterHeaderFilter: function (name) {
// do something with name
return name;
}
I don't know if it's possible to suppress a single row, but I would suggest to enable filtering and then export only visible data or use the option to export only selected rows.

Related

How to highlight cell conditionally in aura component datatable?

I am building a lightning datatable with Aura component and I am showing data in this table from external system and I want to select one or more record so that I can import selected data in salesforce and after importing I want to to highlight that rows which had selected and imported in salesforce.
enter image description hereWhen you import data from external source than add an extra key value in json or js-object.,let's say isExternal which has value =''slds-theme_success" and use it is cellAttributes in lightningdatable, you can use cellAttributes in each column to highlight whole row.
Ex:-
Columns=[{ label: 'test', fieldName:'test' , cellAttributes:{class: { fieldName: 'isExternal' }} } ];

PrimeNG Dropdown with filterMatchMode

I have a PrimeNG dropdown with 1000s of values. So I put in a filter.
Now the issue is I want to have a filter with something like "filterMatchMode = startwith" which we have for table filter columns.
The default implementation is "contains" which cannot be overridden by the "filterMatchMode" property like we have in tables.
Issue with this is that I have multiple values ending in "xyz" and I have a value which is "xyz". So I have to scroll all the way down to select the value.
What could be possible solutions?
Current Code which does not solve the problem:
<p-dropdown [options]="myOptions" [(ngModel)]="selectedModel" filter="true" placeholder="Select a Model"
[style]="{'width':'200px'}">
</p-dropdown>
Only thing I can think of is to make a full copy of the primeNG dropdown component to change it.
They use a filter method in an objectutils class to filter. This method is using indexOf to do the filtering, you could replace it with contains.

AngularJs ui-grid how refer column defination name to add filter?

I want to set filer to a column in ui-grid dynamically using gridOptions.columnDef using column name. Right now I am only able to use number as a key.
How can I add multiple filters on a single column dynamically?
Try creating a custom filter for your grid item and then in the logic there you can do whatever you want. Something like this
field: 'myfilteredfield',
filter: {
condition: myCustomFilter
}
and in your controller
$scope.myCustomFilter = function(searchTerm,cellValue,row,column) {
};
Look here for details http://ui-grid.info/docs/#/api/ui.grid.class:GridOptions.columnDef

ExtJs Gridpanel selection modal

I have a two questions:
How to set first row in ExtJs gridpanel as selected and
How to write separate JS file for custom validations for phone nos and datefields and etc
Thanks in advance
Assuming you have an instance of your grid, you can select the row using selectFirstRow(). Here is the sample code:
grid.getSelectionModel().selectFirstRow();
You can move your custom validations to another file. All you need to move your
Ext.apply(Ext.form.VTypes, {
daterange : function(val, field) {
var date = field.parseDate(val);
...
}
});
to separate file. and ensure that the js file is included.
try this to select first row in grid :
Ext.getCmp('grid').getSelectionModel().selectRow(0);

How to hide rows in ExtJS GridPanel?

Suppose I know which row index to target (with this.rowToBeDeleted having a value of 2, say), how can I hide this row only from the grid but not the store (I have a flag in the store, which signifies what rows should be deleted from the db later in my PHP webservice code).
You can either use one of the store.filter() methods or you can hide the row element.
grid.getView().getRow(rowIndex).style.display = 'none';
I think it's much better though to just remove the record from the store and let the store update the view since you are deleting the record and not just hiding it. With the store in batch mode (the default: batch: true, restful: false), it will remember which rows you've removed and won't fire a request to the server until you call store.save().
I suggest using store.FilterBy() and pass a function to test the value of the value in rowToBedeleted:
store.filterBy(function(record) {
return record.get("rowToBeDeleted") != 2;
});
I wrote a basic blogpost about gridfiltering a while ago, you can read it here: http://aboutfrontend.com/extjs/extjs-grid-filter/
In ExtJS 4.1, there is no view.getRow(..). Instead you can use:
this.view.addRowCls(index, 'hidden');
to hide the row at the specified index, and
this.view.removeRowCls(index, 'hidden');
to show it (where 'this' is the grid).
CSS class hidden is defined as
.hidden,
{
display: none;
}
This is useful for peculiar scenarious where store.filterBy() is not appropriate.
In the grid js file write following code to apply a CSS to those rows which you want to hide.
<pre><code>
Ext.define('MyGrid',{
extend : 'Ext.grid.Panel',
xtype : ''mygrid',
viewConfig : {
getRowClass : function(record,id){
if(record.get('rowToBeDeleted') == 2){
return 'hide-row';
}
}
},
.................
.................
});
</code></pre>
Now define a custom CSS in custom.css file:
.hide-row{display:none}
This will hide rows in grid without removing or filtering from store.
You can use the store.filter() or store.filterBy() methods for that.
Set a "hidden" property on your records and the filter all records that have hidden set to true for example. This way they'll still be present in the store but not visible in the grid.

Resources