I am trying to implement react kendo grid from this example from Kendo. I see that one column is grouped by default. I am trying to implement grouping but without one default column grouped already. How can I load data without default grouped column?
I tried
state = this.createAppState({
take: 10,
group: [ { field: '' } ]
});
Also Tried
state = this.createAppState({
take: 10,
group: []
});
When you set the group to an empty array it will initialize a grouping without a default grouped column - here is an example that worked correctly at my side - https://stackblitz.com/edit/react-ynzwm7-thwt8x?file=app/main.js .
Your second snippet is almost correct, but you are missing the skip property:
state = this.createAppState({
skip: 0,
take: 10,
group: []
});
Without it you would get the message "No records available". Alternatively also remove the take property and it will work too:
state = this.createAppState({
group: []
});
Related
I have an ag-grid table (Enterprise version: 22.1.0) which is grouped using autoGroupColumnDef property. The grouping is dependent on the table's data and the data loads on a button click. I need to update the autoGroupColumnDef property's field name (_this.colName in the below code) after the page is loaded, right before loading the data.
Table's grid options:
_this.gridOptions = {
defaultColDef: {
sortable: true,
resizable: true,
filter: true
},
columnDefs: _this.columnDefs,
rowData: [],
enableRangeSelection: true,
autoGroupColumnDef: {
headerName: "Sector",
field: _this.colName,
cellRendererParams: {
suppressCount: true
},
tooltipValueGetter: function(params) {
return _this.tooltipVal
}
},
suppressAggFuncInHeader: true,
enableBrowserTooltips: true
};
I update the variable _this.colName before setting data to the grid. I have tried the following options and none of them worked for me:
_this.gridOptions.api.refreshClientSideRowModel('group');
_this.gridOptions.api.refreshCells();
_this.gridOptions.autoGroupColumnDef.field = 'Column's Name'
Any help would be appreciated!
There is a good workaround for this. You can set autoGroupColumnDef, then remove and readd all row groupings. It will redraw the group column with the new name.
gridOptions.autoGroupColumnDef.headerName = 'new_name';
// Get current groupings
var colstate = gridOptions.columnApi.getColumnState();
var colstateclear = gridOptions.columnApi.getColumnState();
// Clear groupings
var x = 0, xcount = colstateclear.length;
while ( x < xcount ) {
colstateclear[x].rowGroupIndex = null;
x += 1;
}
gridOptions.columnApi.setColumnState(colstateclear);
// Reset groupings
gridOptions.columnApi.setColumnState(colstate);
I contacted ag-grid support and apparently this is a bug and they have it in their backlog with no ETA available for now. A workaround they provided was to use: https://www.ag-grid.com/javascript-grid-grouping/#showRowGroup.
This is not really a good workaround because the grouped columns are separated and makes the page feel cramped. Also there are some look and feel issues that keep popping up (Eg: empty space added before each column that increases with each grouped column. ie second column has 1 cm added before it, third column has 2 cm added before it and so on. I guess this was added to bring the grouped look in the group column but you wouldn't expect this behavior when the columns are separated.)
ag-grid's backlog ID for the ticket: AG-3359 - Allow the autoGroupColumn to be used in the API calls for columns, at the moment there is no way to dynamically change it after creation. (ie, setColumnDefs …)
Link to track the progress: https://www.ag-grid.com/ag-grid-pipeline/
there is a straight forward method to update the autoGroupColumnDef object and its properties with setAutoGroupColumnDef
this.gridOptions.api.setAutoGroupColumnDef(<ColDef>{
...this.gridOptions.autoGroupColumnDef, // preserve the other settings except the ones you need to change
minWidth: 500
})
if any problems with the spread operator,
do it manually:
this.gridOptions.api.setAutoGroupColumnDef(<ColDef>{
// ...this.gridOptions.autoGroupColumnDef, // preserve the other settings except the ones you need to change
headerName: this.gridOptions.autoGroupColumnDef.headerName,
minWidth: 500
})
and one more thing, add this if you have any visual bugs, like: header row gets resized but bellow rows stays the same as previus state, so the refresh of model is required:
this.gridOptions.api.refreshClientSideRowModel();
this refresh is not ideal solution, because it refreshes everything, so you will loose expanded levels for example, still no clue how to preserve all settings.
https://angulargrid.com/angular-grid/client-side-model/#refreshing-the-client-side-model
and best solution for now is tu use:
this.gridOptions.api.redrawRows();
it keeps the rows expanded if are, checkbox selected if is.
The example i'm goint o use here is taken from http://autoform.meteor.com/quickform
I've been using autoform for a few projects, but i need to get this same behaviour without it, how could i do an insert of an Array of objects??
So here is the Schema definition you need with autoform
items: {
type: Array,
optional: true,
minCount: 0,
maxCount: 5
},
"items.$": {
type: Object
},
"items.$.name": {
type: String
},
"items.$.quantity": {
type: Number
}
Next is the call to autoform to generete the form in the template
{{> quickForm id="demo" schema=schemaFromJSON type="method" meteormethod="demoSubmission"}}
With that in place you get a form, displaying both fields: name and quantity, plus a sign for ading more objects with those same fields, and when you actually submit the form it inserts all of your objects.
The HTML and CSS is not the problem
I'm not quite sure what you are asking. These are two ways of inserting arrays to collection:
// insert items one by one
// NOTE: Meteor doesn't allow inserting of arrays like `Items.insert(items)`
items.forEach(item => Items.insert(item));
// insert all items simultaneously by using raw mongo collection:
Items.rawCollection().insert(items);
I am trying to implement filtering my checkbox checked status similar to (or exactly like?) Ivan when he posted "Using tablesorter custom parser only for filtering". I've gone back and forth on custom parsers and text extraction and every permutation from the examples provided in the docs to no avail.
Could someone look at my example posted at
http://jsfiddle.net/5fLr7c4o/14/
and help me get it working?
I'm using the headers and textExtraction function provided in that and other examples:
headers: {
0: {
sorter: 'false',
filter: 'parsed'
}
},
textExtraction: {
0: function (node, table, cellIndex) {
return $(node).find('.MyCheckbox').prop('checked') ? 'True' : 'False';
}
}
To boil it down, I have two buttons. One will filter anything without the checkbox checked, the other resets the filter. The reset is working fine. The filter (in my local file) filters everything. jsfiddle doesn't work at all.
The jsFiddle isn't working because jQuery is being loaded after the plugin. And the framework is set to load jQuery v1.11.0, so jQuery is actually being loaded twice. The second copy overrides the first and the tablesorter is associated to the first copy. Lots of stuff break - here is the demo updated to remove the second copy - but it still doesn't work!
If you use the parser-input-select.js file included in the repository, it has a checkbox parser that updates the cell after changing so the sort updates properly. Anyway, there are four versions of the code, the older ones don't use the mentioned parser. The demo you might be interested in is this one: http://jsfiddle.net/abkNM/6163/ You probably don't need the pager, so just don't include that code:
$(function() {
var $table = $('table').tablesorter({
theme: 'blue',
widgets: ['zebra', 'filter'],
widgetOptions : {
group_checkbox: [ "checked", "unchecked" ]
},
headers: {
0: { sorter: 'checkbox' }
}
})
// HEADER CELL Checkbox - toggles state of visible checkboxes
// make sure to include the "parser-input-select.js" file
// it contains the most up-to-date checkbox parser
.on('change', 'thead input[type="checkbox"]', function(){
var checkboxColumn = 0,
onlyVisible = true,
$this = $(this),
isChecked = this.checked;
$table
.children('tbody')
.children( 'tr' + ( onlyVisible ? ':visible' : '' ) )
.children(':nth-child(' + ( checkboxColumn + 1 ) + ')')
.find('input')
.prop('checked', isChecked)
.trigger('update');
});
});
Make sure to modify the checkboxColumn & onlyVisible variables as desired.
Update: There was an error in the parser code that was just fixed, it is currently available in the master branch only (linked in my answer). Otherwise you could just enter unchecked or checked" (checked with a quote for an exact match) to filter the checkboxes.
These filter names (checkbox states) are set by the group_checkbox option, which I just added to my answer.
I need to allow my users to submit multiple property addresses by clicking a button that will insert a fieldset with extra text fields. I can do this simply with form.insert(index, component); However, that index will change after the user adds an additional property. For example, the index to add the extra properties is after the 7th component, making the index 7. But when you insert it at 7, it's index is now 7 and the next property will be inserted above it. This effect is further compounded when you try to do this with contact emails and numbers in the same form. So my question is, how can I get the index of the component in the form that I wish to insert the extra fields after?
fieldset.items.getCount()
Or am I missing something?
not exactly straight forward, but not too bad either. take a look at the following code: the first part is the button handler to add a set of fields, the second is the actual function that creates the indexed fields.
handler:function () {
var parts = this.up('fieldset'),
index = parts.query('fieldcontainer').length, //calculate existing Part line items
fields = this.up('window').createPartFieldContainer(index);
parts.add(fields);
}
createPartFieldContainer:function (index) {
index = index || 0;
return {
xtype:'fieldcontainer',
items:[
{
xtype:'textfield', fieldLabel:'Item',
name:'lineItem[' + index + '].itemNumber', width:100,
emptyText:'Part Number'
}
]
}
}
Got an issue, and need your advices
I just started writing an editor grid. (I will actually use this grid as a search filter editor, i.e. columns with criteria name, operators and values).
Now, for the value field, I want to have different edit controls for different rows. For instance, when a criteria type is string I want to display a text box, when it's date time, I want a datetime editor.
So the fact is, I need to control the "edit control creation/display" just before editing starts. and it should be different among rows. Unlike the examples I found which are fixed for the columns.
In order to implement this, can you guys please suggest the steps I need to do? I can probably figure out it if one of you can direct me a way.
Thanks and best regards
Actually you can easily accomplish this by dynamically returning different editors and renders depending on the column you're in. In your ColumnModel object you can define something like this below. Note that i'm getting a type property of each record to determine its type. I have an object containing all my different types of editors, and the same for renderers, and then based on the the type i dish out a different editor or renderer for that cell.
editors: { 'default': {xtype:'textfield'},
texttype: {xtype:'textfield'},
numbertype: {xtype:'numberfield'},
combotype: {xtype:'combo'}....... etc. }
getCellEditor: function(colIndex, rowIndex) {
var store = Ext.getCmp('mygrid').getStore();
var field = this.getDataIndex(colIndex);
var rec = store.getAt(rowIndex);
var type = rec.get('type');
if (type in this.editors) {
return this.editors[type];
} else {
return this.editors['default'];
}
},
In the configuration section of your editorgrid, you will need to define your custom editors:
{
xtype: 'editorgrid',
id : 'mygridID',
stripeRows: true,
...
...
,customEditors : {
//configs go here or pre-define the configs prior to this
'columnName1' : new Ext.grid.GridEditor(new Ext.form.Combobox(configObject)),
//configs go here or pre-define the configs prior to this
'columnName7' : new Ext.grid.GridEditor(new Ext.form.CheckBox(configObject))
}
}
use this grid config - in order to select whole rows:
selType: 'rowmodel'