According to the documentation it's possible to write own function for creating custom input element for cell:
<script>
function myelem (value, options) {
var el = document.createElement("input");
el.type="text";
el.value = value;
return el;
}
function myvalue(elem, operation, value) {
if(operation === 'get') {
return $(elem).find("input").val();
} else if(operation === 'set') {
$('input',elem).val(value);
}
}
jQuery("#grid_id").jqGrid({
...
colModel: [
...
{name:'price', ..., editable:true, edittype:'custom', editoptions: {custom_element: myelem, custom_value:myvalue} },
...
]
...
});
</script>
Is it possible to access rowObject from custom_element (myelem) function, because I have to create different controls (input, select) depending on rowObject data (e.g rowObject.type)?
You are right, it could be practical to have rowObject parameter which not exist. As a workaround I could suggest to use options parameter of the custom_element (in your example myelem) function.
If custom control for editing will be created the object having id and name properties will be used as the options parameter. The id will be id of the new created elements and the name is the value from the name property of colModel of the corresponding column. You can use the fact that the id value will be constructed from the rowid and it will be appended by underscore and the column name (the name property). So the options.id is rowid + '_' + options.name and you can easy get the value of current rowid. Then using getRowData you can get rowObject, which you need. Instead of getRowData you can use getCell of cause.
Related
I didn't find doSort function available in EXT 6 with respect to the grid columns and also didnt find it in any upgrade notes. may be because it is a private function, can anyone please tell me what is the alternative to do the same thing what doSort was doing in Ext 4 ?
I tried to use sorters instead,
{
text: 'columnText',
dataIndex: 'columnIndex',
sorter: me.sort
}
sort: function(v1,v2) {
...
}
but i didn't found smth like dataIndex or columnName in v1, v2 parameters to do sort. (it's just a model)
I need empty cell be from below after Sort Ascending, empty cell be from above after Sort Descending
Thanks.
What is the problem here? You can use the model object to retrieve your column data to sort. From the docs:
sorter: function(record1, record2) {
var name1 = record1.data.columnIndex;
var name2 = record2.data.columnIndex;
return name1 > name2 ? 1 : (name1 === name2) ? 0 : -1;
}
EDIT: If you dont want to rewrite this for every column, then you can do a trick like this:
sorter: (function(columnIndex){ return function(v1, v2){ me.sort(v1, v2, columnIndex);} })("column1")
Now, you can get the column name as 3rd argument in your sort function.
You want to sort the store, not a column. Have a look at the doSort function in ExtJS 4 for a moment:
doSort: function(state) {
var tablePanel = this.up('tablepanel'),
store = tablePanel.store;
// If the owning Panel's store is a NodeStore, this means that we are the unlocked side
// of a locked TreeGrid. We must use the TreeStore's sort method because we cannot
// reorder the NodeStore - that would break the tree.
if (tablePanel.ownerLockable && store.isNodeStore) {
store = tablePanel.ownerLockable.lockedGrid.store;
}
store.sort({
property: this.getSortParam(),
direction: state
});
},
/**
* Returns the parameter to sort upon when sorting this header. By default this returns the dataIndex and will not
* need to be overriden in most cases.
* #return {String}
*/
getSortParam: function() {
return this.dataIndex;
},
Now, this code is still working in ExtJS 6, just that it is no longer part of the framework. You can "put it back into the framework" (e.g. as an override) and it should work again. Or you can use the relevant parts directly from the column event, e.g.
columns:[{
dataIndex:'ABC',
listeners:{
headercontextmenu:function(ct, column) {
column.mySortState = column.mySortState=='ASC'?'DESC':'ASC';
ct.up('grid').getStore().sort({
property:column.dataIndex;
direction:column.mySortState
});
}
}
}]
Maybe you need to define it in the model like this:
fields: [{
name: "textField",
type: 'string',
//sortType: 'asInt'
}]
I have setup drag and drop headings to group by the relevant column from jQgrid Grouping Drag and Drop
It works great however I am trying to display the column name before the value i.e.
Client : Test data data
Client : Test2 data data
I've been going around in circles if any one could help.
if i take the same code used for the dynamic group by which should be the (column Name)
I end up with The Column data not the column name.
$('#' + gridId).jqGrid('groupingGroupBy', getheader());
function getheader() {
var header = $('#groups ol li:not(.placeholder)').map(function () {
return $(this).attr('data-column');
}).get();
return header;
}
if i use the same function in group text I get data not the column name.
I've come from C# and I am very new to jQuery.
If any one could help it would be greatly appreciated.
Kind Regards,
Ryan
First of all the updated demo provides the solution of your problem:
Another demo contains simplified demo which demonstrates just how one could display the grouping header in the form Column Header: Column data in the grouping header instead of Column data used as default.
The main idea of the solution is the usage of formatDisplayField property of groupingView which I suggested originally in the answer. The current version of jqGrid support the option. If one would use for example the options
grouping: true,
groupingView: {
groupField: ["name", "invdate"],
groupColumnShow: [false, false],
formatDisplayField: [
customFormatDisplayField,
customFormatDisplayField
]
}
where customFormatDisplayField callback function are defined as
var customFormatDisplayField = function (displayValue, value, colModel) {
return colModel.name + ": " + displayValue;
}
will display almost the results which you need, but it will uses name property of colModel instead of the corresponding name from colNames. To makes the final solution one use another implementation of customFormatDisplayField:
var getColumnHeaderByName = function (colName) {
var $self = $(this),
colNames = $self.jqGrid("getGridParam", "colNames"),
colModel = $self.jqGrid("getGridParam", "colModel"),
cColumns = colModel.length,
iCol;
for (iCol = 0; iCol < cColumns; iCol++) {
if (colModel[iCol].name === colName) {
return colNames[iCol];
}
}
},
customFormatDisplayField = function (displayValue, value, colModel, index, grp) {
return getColumnHeaderByName.call(this, colModel.name) + ": " + displayValue;
};
I am using the row editing facility in jqGrid to do inline editing, and then saving the data in the grid (i.e., using "clientArray" for the url). I am using the "onSelectRow" function to put the select row into edit mode.
This logic works fine when the row is saved via a save button, but when another row is clicked while the first row is still in edit mode, calling the saveRow function for the first row does not save the changes, and the row fields revert to their prior values.
I have tried this both with and without the "beforeSelectRow" function. How can I properly save row changes in this context?
Here is the logic:
var iRow;
...
beforeSelectRow: function (id, e) {
if (id != null) {
if (iRow != null && iRow != id) {
SaveRow();
}
}
return true;
},
onSelectRow: function (id, status, e) {
if (id != null) {
if (iRow != null && iRow != id) {
SaveRow();
}
if (iRow == null) {
iRow = id;
$("#GridMain").jqGrid("editRow", id, false);
$("#RowPanel").show();
}
}
}
function SaveRow() {
// Save the current row if it was being edited
if (iRow != null) {
$("#GridMain").jqGrid("saveRow", iRow, { url: "clientArray" });
$("#RowPanel").hide();
iRow = null;
}
}
You should check a couple of things:
Check the iRow is correct. If the row that needs to be saved is still editable when SaveRow is called, you should be able to get the row id by calling the following without the need of keeping a global variable:
iRow = $('tr[aria-selected=true]', $("#GridMain")).attr('id'); // Do you have the correct id?
If your using client side sorting, check that you have at least one column set as key on your column model. For example, if you have a hidden Id column it should be set up like this:
{name: 'Id', index: 'Id', label: 'Id', editable: false, hidden: true, key: true }
Also, from what I see on your code you are using a "#RowPanel" row to edit the values? If so probably you need to send the edited values back to the grid on Save then. Otherwise you shouldn't need to show and hide anything when editing and saving.
Hope this helps!
I have implemented a Web - Application which features a GridPanel which can be grouped or ungrouped and where the rows should be sorted alphanumerically (like the standard grid sorting function does) but with the exception that some rows which represent summary rows should not be sorted at all and should stay at the same row position.
To archieve this i wanted to write a custom row sorting function for the gridpanel. Can someone give me a hint how to archive this ? (overwrite which functions, how to implement). Or does anybody know literature, tutorials, examples etc. or could share source code on how this can be done ?
I am using ExtJs Version 3.4.
Many thanks in advance.
Cheers,
Seha
To sort the store data that underlies a gridpanel, the Ext.data.Store.sort() method is used. You can override that method in your particular store instance.
The other possibility is to set remoteSort to true and sort the data on the server.
Here is some sample code that worked for me in ExtJS 3.4.
You can use this in a GridPanel or EditorGridPanel, I placed it in the constructor using an inherited class, but you should be able to add it if you are instantiating a vanilla grid as well, just make sure you are not using the global variable scope.
Make sure the grid variable contains a reference to your grid (after it has been defined).
// Apply column 'sortBy' overrides
var column, columns = grid.getColumnModel() && grid.getColumnModel().config;
var sortColumns = {}, sortByInfo = {};
if (columns && columns.length) {
for (var i = 0; i < columns.length; i++) {
column = columns[i];
// Do we have a 'sortBy' definition on a column?
if (column && column.dataIndex && column.sortBy) {
// Create two hashmap objects to make it easier
// to find this data when sorting
// (using 'if (prop in object)' notation)
sortColumns[column.dataIndex] = column.sortBy;
sortByInfo[column.sortBy] = column.dataIndex;
}
}
if (!$.isEmptyObject(sortColumns)) {
// Override the 'getSortState()' helper on the store, this is needed to
// tell the grid how its currently being sorted, otherwise it
// will get confused and think its sorted on a different column.
grid.store.getSortState = function() {
if (this.sortInfo && this.sortInfo.field in sortByInfo)
return { field: sortByInfo[this.sortInfo.field], direction: this.sortInfo.direction || 'ASC' };
return this.sortInfo;
}
// Override the default sort() method on the grid store
// this one uses our own sorting information instead.
grid.store.sort = function(field, dir) {
var sort = this.constructor.prototype.sort;
if (field in sortColumns) {
return sort.call(this, sortColumns[field], dir);
} else {
return sort.call(this, field, dir);
}
}
}
}
Then just add a sortBy entry to your column definition:
colModel: new Ext.grid.ColumnModel({
defaults: {
sortable: true
},
columns: [
{
header: 'Name',
dataIndex: 'name',
width: 350
}, {
header: 'Code',
dataIndex: 'code_summary',
sortBy: 'code_sort_order',
width: 100
}, {
header: 'Start Date',
dataIndex: 'start_date',
width: 85
}]
}),
PS: dont forget to add the field you are sorting on (code_sort_order) to your data store.
If column names are sidx,sord,filters , jqGrid getting data is broken. I tried to add underscores to them using code below but those parameters are still passed without underscores. Other parameters like _rowid, _page etc. are passed properly with underscores.
How to use sidx,sord,filters as column names in jqgrid ?
jQuery.extend(jQuery.jgrid.defaults, {
prmNames: { id: "_rowid", oper: "_oper", page: "_page",
sidx: "_sidx", sord: "_sord", page: "_page", rows: "_rows", filters: "_filters"
}
});
I don't understand what you mean under "If column names are sidx,sord,filters , jqGrid getting data is broken". Nevertheless if you need you can rename or remove the jqGrid parameters with two ways: prmNames and serializeGridData.
You should carefully examine the list of default values of the prmNames. There are no possibility to rename filters in the way, but to rename the name of other parameters you should use
$.extend(jQuery.jgrid.defaults, {
prmNames: {
id: "_rowid", page: "_page", rows: "_rows",
oper: "_oper", sort: "_sidx", order: "_sord"
}
});
(sort and order instead of sidx and sord). To rename filters to _filters and to remove sending of empty searchField, searchString and searchOper you can do almost the same what I described here:
serializeGridData: function (postData) {
var myPostData = $.extend({}, postData); // make a copy of the input parameter
myPostData._filters = myPostData.filters;
delete myPostData.filters;
delete myPostData.searchField;
delete myPostData.searchString;
delete myPostData.searchOper;
return myPostData;
}
Using Fiddler or Firebug you can verify that in the URL of the demo are used the following parameters
_search=true&nd=1313235583212&_rows=10&_page=1&_sidx=invdate&_sord=desc&_filters=...
like you as need.