I am using buffered store grid in extjs 4.1 after checking header checkbox all records get checked in view and if I scroll to the last and come back to first record my header checkbox and some rows get unchecked. i have used prunRemoved false on selection model. Please provide workaround for it. Thanks
my store for grid and grid:
var bufferedStore = Ext.create('Ext.data.Store', {
fields: ['key', 'fullName', 'text'],
buffered: true,
purgePageCount: null,
pageSize: 50,
leadingBufferZone: 200,
trailingBufferZone: 200,
proxy: {
type: 'direct',
directFn: diFn,
reader: {
type: 'json',
root: 'data',
totalProperty: 'total'
}
},
remoteFilter : true
});
var tabGridPanel = Ext.create('Ext.grid.Panel', {
itemId : _gridPanelId,
maxWidth: 478,
minWidth: 328,
width: 328,
maxHeigth : 150,
minHeight : 40,
rowLines: false,
store : _store,
id : panelId,
searchAllowed : _showSearch,
persistedSelections : {},
selModel: new Ext.selection.CheckboxModel({
allSelected : false,
allDeSelected : false,
mode : 'SIMPLE',
includeFuture : false,
pruneRemoved: false
}),
viewConfig: {
stripeRows: true,
deferEmptyText: false,
emptyText: ' No instance available',
listeners: {
'refresh': function(view, opt) {
var grid = mainPanel.queryById(_gridPanelId);
var store = view.getStore();
var selModel = grid.getSelectionModel();
var record = view.getStore().findRecord("text", "all",0, false, true, true);
if (!selModel.allSelected && selModel.isSelected(record))
selModel.deselect(record,true);
if (selModel.allSelected)
selModel.selectAll(true);
else if (selModel.allDeSelected)
selModel.deselectAll(true);
else{
for (var i in grid.persistedSelections) {
var index = store.findExact('fullName',i);
if (index != -1) {
grid.getSelectionModel().select(index,true,true);
}
}
}
},
'afterrender' : function() {
this.el.dom.style['overflow-x'] = 'hidden';
this.el.dom.style['overflow-y'] = 'auto';
}
}
},
columns: [{
dataIndex: 'fullName',
width : "92%",
menuDisabled: true,
sortable:false
}]
});
when i scroll normally selection remains but if i go directly to the end some rows get unchecked with header checkbox too.
Related
I want to add some styling to the last row in my grid. I wont know what the row number is as there could be any number of rows. How can I go about this? I've seen rowClass and rowRenderer but not a working example. Here is the code I have:
var displayData = function (itemViewModelList) {
var fields = [
{
name: 'ConsultantName', type: 'text', width: 100, title: 'Consultant Name'
},
{
name: 'BranchName', type: 'text', width: 100, title: 'Branch Name', css: "red"
},
{ name: 'NumberOfInvestments', type: 'text', title: 'Number Of Investments' },
{
name: 'ValueOfInvestments', type: 'money', width: 150, title: 'Value Of Investments',
itemTemplate: function (value) {
return tisCommon.formatForMoney(value);
}
},
{
name: 'AverageValueOfInvestments', type: 'money', width: 150, title: 'Average Value Of Investments',
itemTemplate: function (value) {
return tisCommon.formatForMoney(value);
}
},
{
name: 'Month', type: 'text', width: 100, title: 'Month',
itemTemplate: function (value) {
return moment(value, 'M').format('MMMM');;
}
},
];
var options = {
inserting: false,
editing: false,
pageSize: 20,
fields: fields,
rowHeaders: false,
colHeaders: false,
data: itemViewModelList,
controller: controller = {
loadData: function () {
},
},
};
$('#investment-grid').tisGrid('', options);
if (itemViewModelList[0].ConsultantName != null) {
$("#investment-grid").jsGrid("fieldOption", "BranchName", "visible", false);
} else {
$("#investment-grid").jsGrid("fieldOption", "ConsultantName", "visible", false);
}
};
My data being passed "itemViewModelList" is an array of objects
I resolved this by using rowClass as follows:
controller: controller =
{
loadData: function () {},
},
rowClass: function (item, itemIndex) //item is the data in a row, index is the row number.
{
if ((item.ConsultantName == "Totals") || (item.BranchName == "Totals"))
{
return "totalItem highlight";
}
}
I have my if statement where I find the item in the last row based on my conditions. When they are met, I add my custom CSS classes to that row.
I'm working Extjs 4.2. I have grid with rowediting plugin. Problem is when starting edit row, columns with align:center not showing correctly, but align:right works correct on editor row. I searched problem, but didn't find solve. Please Help with this.
This is my editor:
buildPlugins: function () {
var rowEditing = Ext.create("Ext.grid.plugin.RowEditing",{
autoCancel: false,
pluginId: 'rowedit',
errorSummary: false
});
return [rowEditing];
},
This is last three column code
{
text: Message.cameralGrid.columns.menu5,
menuDisabled: true,
columns: [
{
text: Message.cameralGrid.columns.cameralMustHoldDate,
dataIndex: "cameralMustHoldDate",
width: 120,
sortable: false,
xtype: "datecolumn",
style: "text-align:left;",
align: "center"
},
{
text: Message.cameralGrid.columns.cameralHoldDate,
dataIndex: "cameralHoldDate",
width: 100,
sortable: false,
xtype: "datecolumn",
style: "text-align:left;",
align: "center",
editor: {
xtype: "datefield",
format: "d.m.Y",
allowBlank: false
}
},
{
text: Message.cameralGrid.columns.fineSum,
dataIndex: "fineSum",
width: 120,
sortable: false,
xtype: "numbercolumn",
style: "text-align:left;",
align: "right",
editor: {
xtype: "numberfield",
minValue: 0,
allowBlank: false
}
}
]
}
Thanks for Help!
I needed to override Ext.grid.RowEditor class. After this problem is solved.
Ext.define('helper.RowEditor', {
override: 'Ext.grid.RowEditor',
requires: [
'Ext.grid.RowEditor'
],
addFieldsForColumn: function(column, initial) {
var me = this,
i,
length, field;
if (Ext.isArray(column)) {
for (i = 0, length = column.length; i < length; i++) {
me.addFieldsForColumn(column[i], initial);
}
return;
}
if (column.getEditor) {
// Get a default display field if necessary
field = column.getEditor(null, {
xtype: 'displayfield',
// Override Field's implementation so that the default display fields will not return values. This is done because
// the display field will pick up column renderers from the grid.
getModelData: function() {
return null;
}
});
if (column.align === 'right') {
field.fieldStyle = 'text-align:right';
}
// this block is added -------------------------------->
if (column.align === 'center') {
field.fieldStyle = 'text-align:center';
}
// <-----------------------------------------------------
if (column.xtype === 'actioncolumn') {
field.fieldCls += ' ' + Ext.baseCSSPrefix + 'form-action-col-field'
}
if (me.isVisible() && me.context) {
if (field.is('displayfield')) {
me.renderColumnData(field, me.context.record, column);
} else {
field.suspendEvents();
field.setValue(me.context.record.get(column.dataIndex));
field.resumeEvents();
}
}
if (column.hidden) {
me.onColumnHide(column);
} else if (column.rendered && !initial) {
// Setting after initial render
me.onColumnShow(column);
}
}
}
});
I want to use jtable in jquery UI dialogue widget. I'm loading the content of dialogue widget dynamically as follows
$( "#dialog4" ).dialog({
autoOpen: false,
height:$(window).height() - 50,
width:$(window).width() - 50,
show: {
effect: "blind",
duration: 400,
},
hide: {
effect: "explode",
duration: 400
},
open: function (){
$(this).load("managegroupmembers.jsp");
}
});
my jtable code is present in managegroupmembers.jsp. It is as follows:
<script>
$(function() {
$('groupmembers')
.jtable(
{
title : 'Members in Group',
jqueryuiTheme : true,
selecting : true, //Enable selecting
multiselect : true, //Allow multiple selecting
selectingCheckboxes : true,
paging : true,
pageSize : 20,
pageSizes : [ 20, 50, 75, 100, 200, 500 ],
defaultSorting : 'fullName ASC',
sorting : true,
actions : {
listAction : 'group'
},
fields : {
groupID : {
key : true,
list : false
},
memberID : {
key : true,
list : false
},
fullName : {
create : false,
edit : false,
title : 'Name',
width : '15%'
},
memberRole : {
title : 'Role in Group',
width : '7%',
display : function(data) {
var roleName = "";
if (data.record.memberRole != null) {
roleName = data.record.memberRole.roleName;
}
return roleName;
}
},
memberSince : {
list : true,
title : 'Member Since',
inputClass : 'text ui-widget-content ui-corner-all inputClass'
}
}
});
$('#groupmembers').jtable('load');
});
</script>
<div id="groupmembers" class="ui-widget"></div>
I tried to debug the code using chrome's developer tools and I'm seeing following error:
"cannot call methods on jtable prior to initialization; attempted to call method 'load'"
Can anybody help me here? Thanks in advance.
You are not initializing the jTable because you forgot the # in front of the groupmembers ID in the init code....
$('groupmembers')
should be:
$('#groupmembers')
I'm new to ExtJS and try to add a button at the bottom of the grid. This button will open a modal dialog to select more persons. I don't know how to add this button after the grid. Do I have to use another component than GridPanel?
Can somebody help me?
The code looks like:
var selectedPersons = [
[1, 'Persnr', 'Name', 'Vorname']
];
var store = new Ext.data.ArrayStore({
fields: [
{name: 'PrsOid', type: 'int'},
{name: 'PersonalNr'},
{name: 'Nachname'},
{name: 'Vorname'}
]
});
store.loadData(selectedPersons);
var grid = new Ext.grid.GridPanel({
store: store,
columns:
[
{
id : 'PersonalNr',
header : 'PersonalNr',
width : 100,
sortable : true,
dataIndex: 'PersonalNr'
},
{
header : 'Nachname',
width : 100,
sortable : true,
dataIndex: 'Nachname'
},
{
header : 'Vorname',
width : 100,
sortable : true,
dataIndex: 'Vorname'
}
],
stripeRows: true,
autoExpandColumn: 'PersonalNr',
height: 200,
//width: 460,
title: 'Personenauswahl',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});
grid.render('gridSelectedPersons');
Do you mean something like a bottom bar ?
var grid = new Ext.grid.GridPanel({
store: store,
columns:
[
....
],
stripeRows: true,
autoExpandColumn: 'PersonalNr',
bbar: new Ext.Toolbar({
renderTo: document.body,
height: 30,
items: [
// begin using the right-justified button container
'->',
{
xtype:'button',
text:'The button',
//makes the button 24px high, there is also 'large' for this config
scale: 'medium'
}
]
})
I have a category and a subcategory column in a Jqgrid. I have enabled inline editing, both category and subcategory are dropdownlists columns (edittype:'select'). I need to filter the subcategory list based on the selected category. I wonder how can I acheive this functionlity?
I tried the below event but its not working for me
afterEditCell: function(rowid, celname, value, iRow, iCol) {
//to do here
}
the above event doesn't get fired. my all column are editable
Thanks,
This question will be often asked. So I wrote a small code example which demonstrate how to implement such scenario with local data only (for jqGrid starting with 3.7.x). For data editing (inline editing) I use here the double-click event. The modified data will be saved after pressing of the "enter" key. For the filling of select elements I use ids. If you prefer use texts of the categories and subcategories instead you should remove formatter:'select' and make the corresponding changes in building of <option> elements (see code of dataEvents event handler).
var categories = ["sport", "science"];
var subcategories = ["football", "formel 1", "physics", "mathematics"];
var mydata = [
{Name:"Lukas Podolski", Category:0, Subcategory:0},
{Name:"Michael Schumacher", Category:0, Subcategory:1},
{Name:"Albert Einstein", Category:1, Subcategory:2},
{Name:"Blaise Pascal", Category:1, Subcategory:3}
];
var subcategoriesOfCategory = [
["football", "formel 1"],
["physics", "mathematics"]
];
var grid = jQuery("#list").jqGrid({
data: mydata,
datatype: 'local',
colModel: [
{ name: 'Name', width: 200 },
{ name: 'Category', width: 200, editable:true, formatter:'select',
edittype:'select', editoptions: {
value: categories,
dataInit : function (elem) {
var v = $(elem).val();
grid.setColProp('Subcategory', {
editoptions:{value:subcategoriesOfCategory[v]}});
},
dataEvents: [
{ type: 'change',
data: { id: 7 },
fn: function(e) {
var v=$(e.target).val();
var sel = grid.getGridParam('selrow');
grid.setColProp('Subcategory', { editoptions:
{value:subcategoriesOfCategory[v]}});
var res = '';
var sc = subcategoriesOfCategory[v];
for (var i=0; i<sc.length; i++) {
res += '<option role="option" value="' + i + '">' +
sc[i] + '</option>';
}
$("select#"+sel+"_Subcategory").html(res);
}
}
]
}
},
{ name: 'Subcategory', width: 200, editable:true, formatter:'select',
edittype:'select', editoptions: {value: subcategories} }
],
onSelectRow: function(id) {
if (id && id !== lastSel) {
grid.restoreRow(lastSel);
lastSel = id;
}
},
ondblClickRow: function(id, ri, ci) {
if (id && id !== lastSel) {
grid.restoreRow(lastSel);
lastSel = id;
}
grid.editRow(id, true);
return;
},
editurl: 'clientArray',
sortname: 'Name',
viewrecords: true,
rownumbers: true,
sortorder: "desc",
pager: '#pager',
caption: "Inline Editing example"
}).navGrid('#pager', { edit: false, add: false, del: false,
search: false, view: false });
This example can be of cause modified for the case of building of select option from the server.