I'm using Extjs for rendering some information inside grid. Columns properties are like:
SEValue: {
dataIndex: "SEValue",
header: MCW.lr.s_lbl_sevalue,
hidden: false,
renderer: MCW.common.DeviceHelper.renderSEValue,
infoGroup: 30
},
Below method is used for manipulation of rendered values:
MCW.common.DeviceHelper.renderSEValue = function (value) {
if (value) return value;
return "Not Available";
};
Problem is that, whenever column value is '' or Null in DB, it doesn't show that column and in case of any value it shows the column.
M.b. need in field dataIndex: "SEValue", from which to draw the column's value set allowNull = true?
Related
I am working on an existing application in which they have used ag-grid library for angular for most of the grids that they have in their application. Now the ag-grid gives the functionality to filter the grid based on a column value by using the filter option in the column header. I am giving a link to that https://www.ag-grid.com/angular-data-grid/filtering-overview/. I wanted to implement a feature in which we can save the filter keyword that the user is searching for and when he comes back to the same grid the previous filter is already applied. for example https://plnkr.co/edit/?p=preview&preview here we can pick athlete and filter that by going to the column and searching a value so what I want is that if I search 'abc' I should be able to preserve that. is there a way to do that ? I am giving the colDef for the link above
this.columnDefs = [
{ field: 'athlete' },
{
field: 'age',
filter: 'agNumberColumnFilter',
maxWidth: 100,
},
{
field: 'date',
filter: 'agDateColumnFilter',
filterParams: filterParams,
},
{
field: 'total',
filter: false,
},
];
this.defaultColDef = {
flex: 1,
minWidth: 150,
filter: true,
};
}
Any kind of help is appreciated, thanks :)
You can save the filter applied by using the Grid Event onFilterChanged. Inside here you can get the filterModel by calling api.getFilterModel(). In the plunkr below we are showcasing this by saving the filter model to local storage and restoring it by applying it inside the Grid Event onFirstDataRendered
onFilterChanged(params) {
const filterModel = params.api.getFilterModel();
localStorage.setItem('filterModel', JSON.stringify(filterModel));
}
onFirstDataRendered(params) {
const filterModel = JSON.parse(localStorage.getItem('filterModel'));
if (filterModel) {
params.api.setFilterModel(filterModel);
}
}
See this implemented in the following plunkr
You may also find the following documentation pages relevant:
Saving and Restoring Filter Models
Grid Events
To apply existing filters to ag-grid, it can be done using by setting up filterModel on gridApi.
gridApi.getFilterInstance("fieldName").setModel({
"filterType":"equals", //type of filter condition
"type":"text", //Type of column [text/number/date]
"filter":"value" //Value need to be applied as filter.
})
Similarly onFilterChanged event you can capture changes and apply filter dynamically.
Im using the modern toolkit with extjs 6.5.1.
I want to use the renderer property in a grid cell to use html. The renderer simply returns '<a>...</a>' but when I use this it will encode the html code so that the cell shows '<a>...</a>' instead of a link.
Regarding to the answers on this thread I will need a cell property with "encodeHtml" turned to false but as soon as I add a cell property the renderer wont get executed anymore (Even when I use EncodeHtml) and shows the data like there was no renderer property.
Why cant I use the renderer property anymore?
Heres my code:
{
xtype: 'gridcolumn',
renderer: function(value, record, dataIndex, cell, column) {
console.log('hello world');
return '<a>...</a>';
},
width: 30,
text: '...',
cell: {
xtype: 'textcell',
encodeHtml: false
}
}
What it looks like without encodeHtml
This behavior is because you specify
cell: {
xtype: 'textcell'
}
in the first place. Just remove it, and your renderer can return HTML. This should work:
{
xtype: 'gridcolumn',
renderer: function(value, record, dataIndex, cell, column) {
console.log('hello world');
return '<a>...</a>';
},
width: 30,
text: '...'
}
At least id does in my application, where I use renderers returning html to generate special formatting.
If you need to specify the cell property, because of something you didn't show in your code, use the default cell xtype instead: gridcell.
The idea I'm trying to achieve is to embed the datatable into the form.
For now, the form acts as a container. So far there are no any issues, but the name property for the datatable if ignored. The datatable not belongs to the form elements. AFAICS the following configuration is pretty common:
{
view:"form",
elements:[
{ view:"text", name:"inp1", value:"Test input" },
{ view:"datatable", name:"formDT", autoConfig:true, data:grid_data }
]
}
http://webix.com/snippet/7b7a8f2e
But if in the dataForm.elements I see only inputs.
Ideally, I want to get and set the datatable selection through the form's setValues and getValues methods. Or do I need to write my own method to gather the data from the inputs and the datatable separately? Has anyone faced such task before? TIA.
Here a custom component draft inherit datatable but support getValue setValue in order to act as a form input :
webix.protoUI({
name: "datatableInput",
defaults: {
},
$init: function(config) {
},
// Define component value (used by form setValues)
setValue: function(value) {
console.log('setValue');
this.clearSelection();
if (value) this.select(value);
},
// Get component value (used by form getValues)
getValue: function() {
console.log('getValue');
var item = this.getSelectedItem();
if (item) return item.id;
}
}, webix.ui.datatable);
Updated snippet :
http://webix.com/snippet/f952f35e
I have two grids in my application.
var columns1 = [
{
name: "Address",
field: "address"
id: "address",
sortable: true
}
]
var columns2 = [
{
{
name: "Rating, in %",
field: "rating"
id: "rating_percent",
resizable: false
}
]
They are absolutely independent from each other. Also, I have some grid events descriptions in another js file.
grid.onColumnsReordered.subscribe(function (e, args) {
_this.updateHeaderRow();
// here
});
When user changes the columns order, then I want to save this order. Should I change (overwrite) the DOM elements, I mean column1 and column2?
So question: how can I save the columns order?
njr101's answer (using store.js) is great, but note: store.js cannot store functions (i.e. for editors, formatters), so once you store.get() the columns, you'll need to add the functions back, using your original stock "columns" array:
if (store.get('gridColumns')) {
grid.setColumns(store.get('gridColumns')); // Restore settings if available
grid.getColumns().forEach(function(ch) { // Re-create editor and formatter functions
var result = $.grep(columns, function(e){ return e.id == ch.id; });
if (result[0]) {
ch.editor = result[0].editor;
ch.formatter = result[0].formatter;
}
});
}
I have done this before and the easiest way I found was to store the columns in local storage. I use the store.js library which makes this pretty simple.
grid.onColumnsReordered.subscribe(function (e, args) {
store.set('gridColumns', grid.getColumns());
});
When you want to restore the columns (e.g. when the user returns to the page) you can just call:
grid.setColumns(store.get('gridColumns'));
I have a datagrid where each row has a column where I have defined a formatter to format the display result depending on what it says in the database and create a div with a background color depending on the database.
I have this structure for my datagrid:
structure: [
{
name: "Name",
field: "name",
width: "auto"
},
{
name: "Initials",
field: "initials"
},
{
name: "E-mail",
field: "email",
width: "auto"
},
{
name: "Kerberos",
field: "kerberos",
width: "120px",
formatter: function(kerberos){
var format = "";
if(kerberos == "password expired" || kerberos == "account expired"){
format = '<div class="yellow" title="'+kerberos+'">'+kerberos+'</div>';
}else if(kerberos == "ok"){
format = '<div class="green" title="'+kerberos+'">'+kerberos+'</div>';
}else{
format = '<div class="red" title="Has no kerberos account">not available</div>';
}
return format;
}
},
When I press the column header to sort, it sorts the rows, put not consistent, so I don't know if it sorts correctly (see image below). How do I define the way the datagrid have to sort this column?
I was thinking it was the HTML <div...> part I do in the formatter due to the <> characters, but it still sorts weird if I only output the text (which by my understanding, should be sorted alphabetically). Does anyone know why this happens and how I can fix it?
EDIT:
forgot to add how i get/assign data. I get a lot of data from a xhr.post in JSON format, then i do as follows:
dojo.xhr.post({
url: "/cgi-bin/users.cgi",
handleAs: "json",
content: {
psearch: "dojoXhrBlank"
},
load: function(jsondata){
// Creating a store for the datagrid
var personStore = new Memory({ data: jsondata });
// Create datastore for datagrid
var gridStore = ObjectStore({objectStore: personStore});
...
I found an answer. The problem lies in ObjectStore. This store (for some reason) wont sort properly and after changing the store type to ItemFileReadStore it sortet properly. The other reason for switching store was that ItemFileReadStore also supports the comparatorMap attribute which allows for custom sorting, ObjectStore dose not support this attribute.
solution:
load: function(jsondata){
var store = new ItemFileReadStore({
data: { identifier: "id", items: jsondata }
});
pgrid = new DataGrid({
store: store,
...