Develop Reference

kendoui Grid & React : selectable row allows to select one row in each page

By setting selectable: row. The grid allow you to select an item in each page. I just want to select only one row in the Grid and limit the selected row to 1.
<Grid
{...{
dataSource: dataSource,
sortable: sortable,
selectable: selectable,
scrollable: false,
navigatable: true,
filterable: filterable,
allowCopy: allowCopy,
pageable: pageable,
perPage: perPage,
editable: editable,
change: e => e.sender.selectedKeyNames()),
persistSelection: true,
columns: [
{
template: "<span class='sl-select-check'></span>",
attributes: { class: 'sl-select-check-td' }
},
...columns
]
}}
/>

It would be easier with the new version of the Kendo Grid implemented in React:
https://www.telerik.com/kendo-react-ui/components/grid/selection/
In this demo the selection code is fully customizable and the state of if an item is selected or no is in the item itself.
if (!event.nativeEvent.ctrlKey) {
this.state.data.forEach(item => item.selected = false);
}
//this works across pages.

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/

DataTables FixedColumn Plugin, 2 fixed columns issue

I'm using the DataTables jquery plugin to build an HTML scrolling table with fixed headers and fixed columns.
Everything was working fine with 1 fixed column, but there seems to be a bug if I set more than one fixed column. The first fixed column works normally, but for the others, only the header stay fixed.
This is the javascript I'm using to initialize the DataTable :
_$grid.dataTable({
colReorder: {
fixedColumnsLeft: 1
},
dom: 'Rlfrtip',
info: false,
ordering:false,
paging: false,
scrollCollapse: true,
scrollY: scrollYSize(), // A function that compute the height of the table wrapper
scrollX: '100%',
searching: false,
fixedColumns: {
leftColumns: 1 // If leftColumns is set to 2 (or more) the bug appears
}
});
I've tried to initialize the FixedColumns extension this way, same effect :
_dataTable = _$grid.dataTable({
colReorder: {
fixedColumnsLeft: 2
},
dom: 'Rlfrtip',
info: false,
ordering:false,
paging: false,
scrollCollapse: true,
scrollY: scrollYSize(), // A function that compute the height of the table wrapper
scrollX: '100%',
searching: false
});
new $.fn.dataTable.FixedColumns(_dataTable, {
leftColumns: 2 // If leftColumns is set to 2 (or more) the bug appears
})
Did you ever facing this problem ?
EDIT : (screenshot)

ExtJS 4 Grid unwanted scrolling on load and node selection

I have a problem with the ExtJS 4 grid. I am using ExtJS 4.2.1, and whenever I load data into my grid using the loadRawData function, it automatically scrolls to the bottom, or near the bottom. Also, I am using grouping in the grid, and whenever I expand or collapse the node, it auto scrolls to the bottom again. This is really frustrating, and I can't seem to find a solution. I tried any solutions in this post from the Sencha forums, but nothing seemed to work.
This is my grid config:
gridPanel = new Ext.grid.Panel({
header: false,
title: 'Resultset',
id: 'resultTable',
width: 400,
split: true,
collapsible: true,
collapseMode: 'mini',
store: {
model: 'resultset',
autoLoad: false,
pageSize: 100,
proxy: {
type: 'ajax',
url: STORE_URL,
reader: {
type: 'json',
root: 'rows'
}
},
groupField:'tid'
},
features: [{ftype:'grouping'}],
deferRowRender: false,
columns: createColumns(),
selModel: {
checkOnly: true,
moveEditorOnEnter: false,
width: 20,
mode: 'MULTI'
},
selType: 'rowmodel',
tbar: [ createMenubar() ],
bbar:[ createPagingBar() ],
/*viewConfig: {
preserveScrollOnRefresh: true
}*/
});
And then when I load the data, I just do something like this:
var store = gridPanel.getStore();
store.loadRawData(data, false);
Any help would be appreciated!

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.