Jspreadsheet v4.9.0 change the data type of cell to text.
Column type is numeric, requirement is for some cells in that column need to change data type to text.
Locale settings causes problem when alphanumeric value is populated in cell, when it is removed it works as expected. But locale was set for digit separator
{ title: 'Amount (In crore)', name: 'AMOUNT', width: 150, type: 'numeric', locale: 'en-IN', align: 'right' }
is it possible to have both by removing the locale settings for specific cell alone
Related
I would like AgGrid to look like this Google Spreadsheet, where the editor shows all of the textarea content, and when in read-mode (non-edit mode), the cell stretches to show all the text. Here is the Google sheet.
Here is what I have by default with my AgGrid:
Notice how (a) it is showing it the same height as the rest of the "input" one-liner cells (in non-edit mode), and (b) edit mode it is still condensing it. It should expand to fill the area. This is basically what I have to create my dynamic columns:
const editableColumns: Array<ColumnType> =
data?.nodes.map(node => ({
suppressMenu: true,
sortable: false,
headerName: node.title,
field: node.id,
editable: true,
cellEditor: 'agLargeTextCellEditor',
})) ?? [];
I used agLargeTextCellEditor to try and get the texteditor, which preserves new lines for example, so that's good. But do I need to implement my own editor, or can I use some sort of default behavior to make it more like the Google sheet above?
In my extjs6 project I have a datefield. When I getvalue it comes back as '2017-07-26T00:00:00'. How can I convert this to 07-26-2017?
I am trying the below which is coming back blank.
var newVal = Ext.Date.format(value, 'm-d-Y')
screenshot below
As per the docs,
Ext.Date.parse makes a javascript date from a string.
Ext.Date.format makes a string from a javascript date.
Since you need to convert a string to a string, you have to combine the two:
Ext.Date.format(Ext.Date.parse('2017-07-26T00:00:00','c'), 'm-d-Y')
You don't need to use
Ext.Date.format and Ext.Date.parse functions
just change the xtype and format property to your gridcolumn
xtype: 'datecolumn',
format: 'm-d-Y'
Example code set grid column property
columns: [
{
text: 'Date',
dataIndex: 'date',
xtype: 'datecolumn',
format:'m-d-Y'
}
],
This will give the output as in '07-26-2017' format..
No need to use renderer as well
hope ull try this
Is it possible to put a custom column definition for select fields in a ui grid and pick up the rest of the fields from the data schema? This use case arises because my json data schema is variable and there's just one column I'm sure about(its presence in data) and would like to apply a custom cell template to just that column.
Grid options:
$scope.gridOptions = {
data: data,
columnDefs: [
{ field: 'name', width: 250, cellTemplate: "../../tpl/grid/name_template.html" }
]
}
where data is the json object of variable schema.
If I define the grid this way, only the name field from my data object will be displayed in the grid. Is it possible to use the custom column def for the name field and also display the other objects in the data object without specifying column definitions for them?
To provide more clarity:
my data object can be:
[{name: 'apple', type: 'fruit', seasonal: true}]
or:
[{name: 'apple', color: 'green', taste: 'sour'}]
Basically my use case is such that there's no way for me to know before hand what columns will be returned from the query that initialises the grid data object but I'm sure of the fact that a name column will be part of the data returned by the query. I would want to supply a custom cell template and other properties to the name field and also display the other columns that might be there.
The normal behaviour is that if I specify a column definition for one column in the field, then I have to specify definitions for all the other columns that are part of the data to make them visible and in my case I don't know what the other field names might be.
$scope.gridOptions = {
data: data,
columnDefs: [
{ field: 'name', width: 250, cellTemplate: $.get('url-to-your-template.html') }
]
}
Check if the above works. You can use your own service for fetching template
Can someone help me to figure out a way to arrange the columns irrelevant of it columns array positioning? For example, in below grid columns array i just want to display Phone as 1st column and Name as 2nd column. How can i achieve that programmatically?
Columns Array:-
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email'
}, {
text: 'Phone',
dataIndex: 'phone'
}]
While debugging the grid column config with Chrome developer tools, i figured out a parameter "fullColumnIndex" which value getting increased for every column. But specifying that explicitly doesn't make any difference :(
Thanks!
You can do it by using reconfigure method. Docs — http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.panel.Table-method-reconfigure
Here is the description of this method:
reconfigure( [store], [columns] )
Reconfigures the grid / tree with a new store/columns. Either the store or the > columns can be omitted if you don't wish to change them.
The enableLocking config should be set to true before the reconfigure method is > executed if locked columns are intended to be used.
Parameters
store : Ext.data.Store (optional)
The new store. You can pass null if no new store.
columns : Object[] (optional)
An array of column configs
I am using Extjs 4.2, so i have a grid with rowediting plugin. All works fine, I want to know how I can update one field value, depending on another field. I mean for example if in my grid I have field1, and field2, I need to update field3 value with field1 + field2 values when one of those were changed. Normally using jquery we can code a change event for each of the fields, but how i can do this on rowediting event?
Is this possible?
You can use edit events of rowedit as follow:
Sencha Fiddle : Grid RowEditor - Change cell value based on condition
grid.on('edit', function(editor, e){
/**
* here I am checking the column name to complete process
* you change what you want
*/
if (e.field == "name") {
e.record.set('result', parseInt(e.record.get('dummy')) + parseInt(e.record.get('age')));
}
})
You have to add editors to the columns, the editor is like any component, has listeners, type etc. then add a change listener
Example:
...
{
header: 'HeaderName',
dataIndex: 'man_peso',
type: 'number',
width: 50,
editor: {
enableKeyEvents: true,
listeners: {
change: function(c, e, eOpts) {
//here you can modify others components
}
},
xtype: 'textfield',
maskRe: /[0-9\.]/,
maxLength: 16
},
...
When you use RowEditor, the e.field value entirely depends on the field that was clicked on to edit the row.
To illustrate the problem:
In the previous answer, open the fiddle link (https://fiddle.sencha.com/#fiddle/4pj).
Double click the email field and change the name.
The handler will not update the result field as e.field will now be 'email' and not 'name'.
That is, Row Editor considers the field on which you click as the edited field. This does not make sense as it is a 'row' editor and is most probably used to edit multiple fields in the row.
To get the list of only modified fields, use e.record.getChanges(). These will give you only the modified fields and their new values.