Develop Reference

Ag-grid not scrolling vertically down

using ag-grid version 9.1.0
gridOptions = {
enableColResize: true,
enableSorting: true,
enableFilter: true,
suppressMenuHide: true,
rowBuffer : 200,
columnDefs: columnDefs,
rowData: Columns,
onRowClicked: onRowClicked,
getRowStyle: getRowStyle,
onGridReady: function(event) {
vm.gridOptions.api.ensureIndexVisible(scrollId, null);
//vm.gridOptions.api.ensureColumnVisible(scrollId);
}
};
This is grid initialization. onGridReady , I call this ensureIndexVisible but when i open the grid , its not scrolling down automatically. It just shows the top part and doesn't scroll. Ensured that the scrollId exists. How to make it scroll automatically?

datatable example not working to fixed column

I am trying to implement datatable fixed colum example coping from there side inside my code but it simply dopesn't work. I created a jsfiddle with the same code but columns are not fixed.
site:
https://datatables.net/extensions/fixedcolumns/examples/initialisation/two_columns.html
JS sample:
http://jsfiddle.net/jsf6cg6L/229/
var table = $('#example').DataTable( {
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: {
leftColumns: 1,
rightColumns: 1
}
} );

Your fiddle is missing a dependency:
https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js
Adding it as an external resource makes it work.

Complex column widths with Jquery Datatables

I have created a datatable with the following code
$(document).ready( function () {
$('#data-table').DataTable( {
"bFilter": false,
"scrollY": 300,
"scrollX": true,
"paging": false,
"ordering": false,
"info": false,
"columnDefs": [
{ "width": "20%", "targets": 0 }
]
});
} );
Note that I have the widths set to 20% for each of the columns. My question is how do I specify a width for column 1 while still being able to set a width for the rest of the columns?
I've seen examples like this on the datatable website:
$('#example').dataTable( {
"columns": [
{ "width": "20%" },
null,
null,
null,
null
]
} );
But I do not think this will work for me because it looks as if it would require me to know how many columns my table has in advance, and user requirements require the number of columns to be variable.

Try replacing your columnDefs part with this (and adding the appropriate percentages):
"columnDefs": [
{ "width": "(percentage)%", "targets": "_all" }
{ "width": "(other percentage)%", "targets": 0 }
]
This will set the first column to one width and the others to a different width.
Targets define which column will be affected. Setting it as an integer will affect the columns starting from left to right (i.e. '"targets": [0, 1]' would affect the leftmost and second-leftmost columns). Negative integers affect the columns from right to left. The string "_all" will affect all columns.

Grouping and Column Filtering on jQuery DataTable at different div

I am using jQuery DataTables with Grouping and Filtering on data. But both can't work together. Only one can work.
oTable = $('#schedule').dataTable({
'bLengthChange': false,
'bPaginate': false,
'bJQueryUI': true,
'processing': true,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": ["no-sort"] }
]
}).columnFilter({
sPlaceHolder:"head:before"
}).rowGrouping({
sGroupingColumnSortDirection: "desc",
bExpandableGrouping: true,
bExpandSingleGroup: false,
iExpandGroupOffset: -1,
asExpandedGroups: ['Pending Action', 'In Operation']
});
Please give me advice on how to work with both and I want to add the filter field in different div.

It doesnt work because you are using chaining. You are accidently trying to initialise rowGrouping on whatever columnFilter() returns :
dataTable().columnFilter().rowGrouping()
< dataTable < columnFilter
Use another approach to initialise the plugins, for example in the initComplete callback (fnInitComplete if you are using 1.9.x) :
var table = $('#example').dataTable({
initComplete : function() {
this.columnFilter();
this.rowGrouping({
bExpandableGrouping: true,
asExpandedGroups: ["Other Browsers", "Trident"],
fnOnGrouped: function() { alert('Rows are regrouped!'); }
});
}
})
demo -> http://jsfiddle.net/y2s2b0an/

jqgrid header and data row are not align after resize

I am having a problem that i try to resize some column header, but when i do, the header and the respective data row are not aligned.
Here is the definition of my jqgrid.
Thanks in Advance ;)
Marcelo
var loadGrid = function () {
uCurriculosGrid.grid.data = $("#gridCurriculos").jqGrid({
datatype: "local",
height: "0",
shrinkToFit: false,
fixed: true,
width: 1240,
emptyrecords: 'Não existem curriculos para serem visualizados com esse filtro.',
colNames : uCurriculosGrid.grid.myColumnsState.colNames,
colModel: uCurriculosGrid.grid.myColumnsState.colModel,
ignoreCase: true,
multiselect: true,
multiboxonly: true,
caption: 'Curriculos',
pager: '#pager',
pgbuttons: false,
pginput: false,
editurl: "Administracao.aspx",
viewrecords: true,
onSelectRow: checkSelected,
onSelectAll: checkSelected,
beforeSelectRow: function (rowid, e) { return false; },
gridComplete: onGridComplete,
gridView: false,
postData: uCurriculosGrid.grid.myColumnsState.filters,
sortname: uCurriculosGrid.grid.myColumnsState.sortname,
sortorder: uCurriculosGrid.grid.myColumnsState.sortorder,
loadComplete: uCurriculosGrid.grid.loadComplete,
resizeStop: uCurriculosGrid.grid.resizeStop,
onSortCol: uCurriculosGrid.grid.onSortCol
}).navGrid('#pager',
{ add: false, edit: true, del: true, search: true, refresh: false, editfunc: editSelected, delfunc: deleteSelected }, //options
{ reloadAfterSubmit: true, viewPagerButtons: false, closeOnEscape: true, closeAfterEdit: true }, // Edit options
{}, // Add options
{},
{}
);
UPDATE: I know that the grid's configuration is being saved correcty in the localStorage because when i reload the page, the grid that wasn't aligned becomes aligned.
It gets more weird. When i edit my grid configuration with de columnChooser, and add some column to the Grid, it all works fine. But when i restore to default configurations, this error happens.

Try setting the property shrinkToFit as true;
shrinkToFit : true,
As given in the wiki
This option, if set, defines how the the width of the columns of the grid should be re-calculated, taking into consideration the width of the grid. If this value is true, and the width of the columns is also set, then every column is scaled in proportion to its width. For example, if we define two columns with widths 80 and 120 pixels, but want the grid to have a width of 300 pixels, then the columns will stretch to fit the entire grid, and the extra width assigned to them will depend on the width of the columns themselves and the extra width available.

BeforeLoad = function () {
$('#AdvertisementGrid td:nth-child(6)').attr('colspan',6);
}
It works for me. Here "#AdvertisementGrid" is grid id replace this id to your grid id.