I have a Item Selector, which has 2 sections, Avaliable Column and Selected Column.
I want to fetch all values from selected column and store it in a List.
How to do that ?
items : [{
// first column
xtype : 'itemselector',
columnWidth: 0.5,
store: showFieldStore,
id: 'fieldSelector',
displayField: 'columnLabel',
valueField: 'dataIndex',
allowBlank: false,
msgTarget: 'side',
fromTitle: 'Available Columns',
toTitle: 'Selected Columns'
}
you want to display values as a string list or from display fields :
itemSelectorField.toField.store.getRange().collect("display_value_propery_name").join(",");
Related
I have written the function for row selection.It is not highlighting the selected row(sometimes highlighting sometimes other row highlighted) and not displaying the icons the way I have written it. following is the code
multiselect : true,
iconSet: "fontAwesome",
datatype : "json",
loadonce : true,
rowNum : 10,
rowList : [ 10, 20, 30 ],
toppager:true,
pager : '#prowed1',
sortname : 'id',
viewrecords : true,
sortorder : "asc",
editurl : "editGrid.html",
onSelectRow : function(rowId) {
var rowId = jQuery("#list1").jqGrid('getGridParam',
'selarrrow');
if (rowId.length > 1) {
$("#list1_iledit").addClass('ui-state-disabled');
}
},
$("#list1").jqGrid(
"navGrid",
"#prowed1",
{
cloneToTop:true,
formatter : "checkboxFontAwesome4",
addicon:"fa fa-plus ",
add : true,
delicon:"fa fa-trash",
del : true,
searchicon:"fa fa-search",
search : true,
refreshicon:"fa fa-refresh",
refresh : true,
editicon:"fa fa-edit ",
edit : true,
saveicon : 'fa fa-floppy-o',
save : true,
},`{ // edit options
afterSubmit : function() {
location.reload(true);
},
beforeShowForm : function(form) {
$("td .navButton navButton-ltr").hide();
},
closeAfterEdit : true
},
{ // add options
beforeShowForm : function(form) {
$("#buName").removeAttr("readonly");
},
closeAfterAdd : true,
clearAfterAdd : true
},
{ // del options
serializeDelData : function(postdata) {
return {
'buName' : $('#list1').jqGrid('getCell',
postdata.id, 'buName'),
'oper' : 'del'
}
}
}
);` $("#list1").jqGrid('inlineNav', "#prowed1", {
//cloneToTop:true,
//iconSet: "fontAwesome",
add : false,
edit : true,
editicon : 'fa fa-pencil-square-o',
save : true,
saveicon : 'fa fa-floppy-o',
editParams : {
aftersavefunc : function(id) {
jQuery('#list1').jqGrid('setSelection', id, false);
},
},
});`
You should provide the demo, which reproduce the problem. The reason of the most problems with highlighted: wrong input data or wrong colModel. Every row of jqGrid have always id attribute (rowid), which should be part of input data: see here. The id value must be unique. If you have id duplicates then you could problems with selection/highlighting of rows.
If you fill the data from the database than you can use native ids from the tables of the database to build unique rowids. Database tables don't allow id duplicates too.
To be able to edit the data in the database you will need to identify the edited data. Such unique value could be used as the rowid. If you fill the grid by JOIN from multiple tables, than composed id could be used. For example, if you fill the the grid with the data from two tables User and Location then the paar (user_id, location_id) are unique. If both user_id and location_id are numbers, then you can use user_id + "_" + location_id as rowid. The value will be sent to the server during editing and you will have full information to find the data in the tables, which need be modified.
I think that you have problems with unique id in the data. Check that the ids used when you insert data in the grid are unique and you do not have duplicate one.
Kind Regards
In your ColModel make sure the property key:true is only specified once and represents a unique row ID value. See http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options
Dumb on my part, but I had the property beforeSelectRow set in the grid code that I had copied from another project. This of course was blocking any selection of a grid row.
beforeSelectRow: function (rowid, e) {
return false;
},
How to have correctly formated data in columns when row template is used?
I'm creating a grid with knockout-kendo where I define columns and row template:
<div data-bind="kendoGrid: {
data: Entries,
sortable: true,
selectable: true,
useKOTemplates: true,
rowTemplate: 'rowTemplate',
columns: [
{
title: 'Created on',
field: 'Timestamp',
format: '{0:d}'
},
{
title: 'The Mighty Value',
field: 'Value'
},
{
title: 'I.D.',
field: 'Id'
},
{}
]}"></div>
If I do so my first column's display format will be lost because of custom template. How to overcome this issue?
JSFiddle example: http://jsfiddle.net/cXDcm/7/
Because you are using a custom row template you are responsible to format your column values.
However you can you use the built in kendo.format method also in your template to manually apply your formatting:
<td data-bind="text: kendo.format('{0:d}',Timestamp())"></td>
Demo JSFiddle.
I have an ExtJs combobox. Its store loaded using JSON (using MyStore class below). I want to load all the values to the store, and then filter them with the text entered in the combo's textfield (preferably using the typeAhead feature).
The problem is that I want to do the filtering on the client side (combo's mode property is 'remote', by default). I don't want my combo to reload its store every time I type something.
How can I do that?
Thanks.
Here's my store class :
MyStore = Ext.extend(Ext.data.JsonStore, {
constructor: function(jsonUrl, storeId, id, description, isAutoLoad, cfg) {
cfg = cfg || {};
GenericStore.superclass.constructor.call(this, Ext.apply({
storeId: storeId,
root: 'result',
url: jsonUrl,
autoLoad: isAutoLoad,
fields: [
{
name: id
},
{
name: description
}
]
}, cfg));
}
});
And the combo :
xtype: 'combo',
fieldLabel: 'The Combo',
width: 150,
store: myStoreData,
valueField: 'id',
displayField: 'name',
minChars : 0,
editable : false,
itemId : 'my-combo'
To achieve this you must:
Construct MyStore class with "isAutoLoad" config option as "true"
In your combobox config set the "mode" config option to "local" (see Built the combo config code bellow for another config)
Here is my short example:
Construct myStoreData variable
var myStoreData = new MyStore({
autoLoad: true, //so the store will load automatically
...any_other_config_option...
});
Built the combo config
{
xtype: 'combo',
fieldLabel: 'The Combo',
width: 150,
store: myStoreData,
// myStoreData is already loaded before as it have 'autoLoad' config set to true
// and act as localstore to populate the combo box item
// when the combo "mode" config set to 'local'
valueField: 'id',
displayField: 'name',
minChars : 0,
editable : true, //before was editable : false,
itemId : 'my-combo',
mode: 'local', // by default this was mode: 'remote'
typeAhead: true // by default this was typeAhead: false
}
You will want to use the store.filter() method. You can use this to use user-entered information to filter your store that the combo box uses. This is taken from the ExtJS API documentation for data.store.
store.filter([
{
property : 'name',
value : 'Ed',
anyMatch : true, //optional, defaults to true
caseSensitive: true //optional, defaults to true
},
//filter functions can also be passed
{
fn : function(record) {
return record.get('age') == 24
},
scope: this
}
]);
In my case I had to add the config option lastQuery:'' to the combo.
explanation : http://progex.wordpress.com/2010/03/26/extjs-combo-dropdown-does-not-filter-on-first-trigger/
Add listener to your store on 'load' event, do filtering, by removing or flagging records, if removing it is clear load to combo component, if flagging you need to recognize those flaggs in combo and display or not...
It hard to go with more details if I do not see your code for store and combo, so I can give you only general idea
I am using addRowData method to populate my grid. But my current JSON data have another object inside of each object in the JSON data. To make it view in the grid, i followed the notations in the documentation of jQgrid. But that column remain empty.
My Grid definition:
$("#ExpenseTable").jqGrid({
datatype : "local",
mtype : 'GET',
colNames : [ 'Entry ID','User Name', 'Category Name','Date','Amount','Status'],
colModel : [
{name:'expnsId',label:'ID', width:150 ,editable: false},
{name:'userName',label:'NAME', width:150 ,editable: false},
{name:'category.catName',label:'CATEGORY', width:150 ,editable: false},
{name:'date',label:'DATE', width:150 ,editable: false},
{name:'amount',label:'AMOUNT', width:150 ,editable: false},
{name:'status',label:'STATUS', width:150 ,editable: false},
],
pager : '#ExpPager',
rowNum : 10,
rowList : [ 10, 20, 30 ],
sortname : 'invid',
sortorder : 'desc',
viewrecords : true,
autowidth : false,
caption : 'Expenses Details',
onSelectRow : function(expnsId) { dispExpensData(expnsId); }
});
Code used to populate the Grid:
ExpenseDetailsManagement.getexpenseList(function(expRecords){
//for(count = 0; count<expRecords.length; count++){
// expRecords[count].catId = expRecords[count].category.catId;
// expRecords[count].catName = expRecords[count].category.catName;
//}//I am using this for loop to convert the category object
$("#ExpenseTable").clearGridData(true);
$("#ExpenseTable").jqGrid('addRowData', "expnsId", expRecords);
});
The data returned from the server looks like:
Any idea or suggestions about where i am going wrong!!!
If the values from the 'expnsId' column are unique, I'll recommend you to use key:true parameter as a option of 'expnsId' coulmn. Then the value of the column will be used as the row id.
To be able to help you with the dotted column names you should post the JSON data and not the screenshort with "Object" text on the place of the most important information. Probably your main problem can be easy solved with respect of localReader instead of dotted name.
One more small remark. Beause you use label option for all columns you can remove colNames array which will be not used. The option editable: false is default, so you can remove it also. The parameter mtype you can also remove because it will not used for local data.
UPDATED: Sorry the value of the first parameter of addRowData should be do the name of the column with the data like you as do. So I deleted the first paragraph from the first version of my answer.
i have the problem that i can't send any identifier for the edited content to the edit.php file. it sends automaticaly an id=1 parameter for the first row in the grid for example...but this is not the same value as in mysql table column "id". the correct id is shown in the grid..it says id 3 in the first row, but when i edit data and save it, the grid id is shown as 1. how can i send and correct identifier to the edit.php?
Thanks in advance for your help.
this is the js code for the grid, the php part is working, only wrong parameter get's passed to it from the grid.
jQuery("#statsgrid").jqGrid(
{
url:'modules/json.php?stats=true',
datatype: 'json',
mtype: 'POST',
colNames:['ID', 'Nickname','Country', 'IP', 'Notes'],
colModel:
[
{name:'id',index:'id', width:90},
{name:'nick',index:'nick', width:90},
{name:'country',index:'country', width:80},
{name:'ip',index:'ip', width:100},
{name:'note',index:'note', width:150, sortable:false, editable:true, editoptions:{size:10}}
],
pager: '#statspager',
rowNum:10,
rowList:[10,20,30,50,100],
sortname: 'nick',
sortorder: 'desc',
height: '100%',
viewrecords: true,
editurl: 'modules/edit.php',
caption: 'Statistics'
}).navGrid("#statspager",
{}, //options
{height:280,reloadAfterSubmit:false,url:'modules/edit.php'}, // edit options
{height:280,reloadAfterSubmit:false}, // add options
{reloadAfterSubmit:false}, // del options
{} // search options
);
add an extra class name with the db id prefixed by some string:
<td class="something table_column_123">value</td>
And parse out table_column_123 when sending it back
Configure the JSONReader to use the DB id instead of a generated ID by adding:
jsonReader: {
id: "id"
}
...to the call to jqGrid.
Note, however, that this is the default. If the grid isn't already picking up your IDs, then there's something going on which you haven't shown us, or the example above isn't actually what you're doing.
You could also try adding the "key" property to your ID row in the colmodel. See the documentation about it here