Data not shown in slickgrid - javascript

I'm working with slickgrid in my webpage, the problem I'm getting while using it that I'm unable to see the data in the grid. While when I try to get the data through grid object (i.e. grid.getData();) , I can get the whole data which I have previously set in the grid but don't know why its not showing up. May be I'm missing some thing.
following is my code for drawing the grid.
HTML code:
<div id="myGrid" width="100%"; height="500px"></div>
JS code:
drawBlotterForOrders : function(data){
try{
var columns = this.getBlotterColumns();
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
var dataArray = [];
dataArray = self.setDataInGrid(data);
gridObj = new Slick.Grid("#myGrid" , dataArray , columns , options);
console.log(gridObj.getData());//here I'm able to get the data
}catch(exp){
}
},
setDataInGrid : function(data){
try{
var dataArray = [];
i++;
dataArray[0] = {
id : i,
clOrdId : data.clOrdId,
cumQty : data.cumQty,
execId : data.execId,
execType : data.execType,
leavesQty : data.leavesQty,
ordStatus : data.ordStatus,
orderId : data.orderId,
orderQty : data.orderQty,
side : data.side,
symbol : data.symbol
};
return dataArray;
}catch(exp){
}
},
getBlotterColumns : function(){
var col = [
{ id: 'id',
name : 'id',
field : 'id'
},{
id: 'clOrdId',
name : 'clOrdId',
field : 'clOrdId'
},{
id: 'cumQty',
name : 'cumQty',
field : 'cumQty'
},{
id: 'execId',
name : 'execId',
field : 'execId'
},{
id: 'execType',
name : 'execType',
field : 'execType'
},{
id: 'leavesQty',
name : 'leavesQty',
field : 'leavesQty'
},{
id: 'ordStatus',
name : 'ordStatus',
field : 'ordStatus'
},{
id: 'orderId',
name : 'orderId',
field : 'orderId'
},{
id: 'orderQty',
name : 'orderQty',
field : 'orderQty'
},{
id: 'side',
name : 'side' ,
field : 'side'
},{
id: 'symbol',
name : 'symbol',
field : 'symbol'
}
];
return col;
}
I'm unable to detect the mistake I'm making. I'll be really thankful for any help.

You forgot to render the grid I think, did you put a grid.render() ?

Related

Mongoose query returning more than one result

My database structure is looking like this :
{
'name' : 'entry one'
'project' :
[
{companyName : 'a name', contactPerson : [{ work_email: 'test#test.com'}] } ,
{companyName : 'a name1', contactPerson : [{ work_email: 'test1#test.com'}] } ,
{companyName : 'a name2', contactPerson : [{ work_email: 'test2#test.com'}] }
]
}
{
'name' : 'entry 2'
'project' :
[
{companyName : 'another name', contactPerson : [{ work_email: 'testing#test.com'}] } ,
{companyName : 'another name1', contactPerson : [{ work_email: 'testing1#test.com'}] } ,
{companyName : 'another name 2', contactPerson : [{ work_email: 'testing2#test.com'}] }
]
}
What i want is to find the companyName that belongs to a given work_email. So if the work_email is test#test.com the company name that should be returned should be 'a name'
So the query i built with mongoose is this :
const projects = await ClientManagers.findOne({'project.contactPerson.work_email' : 'test#test.nl'} , 'project.companyName');
But this is returning all company names (from entry one) not the single one i am looking for.
Filtering will always return whole document. You need to use projection to "reshape" it. You can consider the $ (projection) operator:
const projects = await ClientManagers.findOne({'project.contactPerson.work_email' : 'test#test.nl'} , { 'project.$': 1 });
Mongo Playground

How to get the selected value from Kendo UI grid

I am using Kendo grid. I want to get the value(field-nlv_id) for the multiple row selected if select the rows. Also i want to get the number of selected rows and pass to the controller. Let me know the way to do it.
columns : [
{
'field' : 'nlv_id',
'title' : 'Asset ID'
},
{
'field' : 'due_date',
'title' : 'Partner Due Date'
},
{
'field' : 'link',
'title' : 'Partner'
},
{
'field' : 'playlist_type',
'title' : 'Playlist Style'
},
{
'field' : 'show_code',
'title' : 'Show Code'
},
{
'field' : 'status',
'title' : 'Status'
},
{
'field' : 'retry_count',
'title' : '# Retries'
}
],
scrollable : false,
pageable : {
pageSizes : [ 10, 25, 50 ],
buttonCount : 5,
refresh : true,
messages : {
display : "{0} - {1} of {2} assets",
itemsPerPage : "assets per page",
empty : "No assets to display"
}
},
dataSource : new kendo.data.DataSource({
serverPaging : true,
transport : {
read : getJobs
},
pageSize : 10,
schema : {
total : returnTotalCount
}
}),
selectable : 'multiple',
sortable : true
};
You will need to do an change() event on grid, then you will have selected items, for convinience i did an example using an list with all selected items, so you can easily get numbers of rows selected.
change: function (e, args) {
var currentSelected = this.select();
var dataSource = $grid.dataSource.data();
currentItems = [];
$.map(currentSelected, function (item) {
currentItems.push($grid.dataItem(item).nlv_id) ;
return $grid.dataItem(item).nlv_id;
});
alert(currentItems);
},
You can get count like that
currentItems.length;
EDIT: For convinience i create an example to do, is easier.
Important: you must set you 'nlv_id' in Schema!
http://jsfiddle.net/2ojwwpLf/
hope this help

creating extjs store data record is failing

I have the error Uncaught TypeError: Cannot read property 'items' of undefined
The following line where I create the NewEditInfo type.
The alert shows there are values in the arrays so I have no clue..
getNewEditInfo : function () {
var values = {};
var form = this.getForm();
var formValues = form.getValues();
for (var fieldName in formValues)
values[fieldName] = (formValues[fieldName] != "") ? formValues[fieldName] : null;
alert(JSON.stringify(values));
alert(JSON.stringify(formValues));
NewEditInfo = Ext.data.Record.create([{
name : "id",
type : "string"
}, {
name : "hardwareId",
type : "string"
}, {
name : "location",
type : "string"
}, {
name : "active",
type : "string"
}
]);
var newEditInfoInstance = new NewEditInfo({
id : values['idField'],
hardwareId : values['hardwareIdField'],
location : values['location '],
active : values['active']
});
return newEditInfoInstance;
}
Can anyone help please?
Ext.data.Record.create() does not return model class but new model instance.
Firstly you should define your own model:
Ext.define('editInfoModel', {
extend: 'Ext.data.Model',
fields: [
{
name : "id",
type : "string"
}, {
name : "hardwareId",
type : "string"
}, {
name : "location",
type : "string"
}, {
name : "active",
type : "string"
}
]
});
Then in your getNewEditInfo method you can create new instance of editInfoModel and set record data by Ext.create() method:
var newEditInfoInstance = Ext.create('editInfoModel', {
id : values['idField'],
hardwareId : values['hardwareIdField'],
location : values['location '],
active : values['active']
});

ExtJs 3.4 : Move selected items from one grid to another on a button click

I have a check box model grid which is loaded from JsonStore.
var drop_pick_grid = new Ext.grid.GridPanel({
store : dropPickGridStore,
cm : new Ext.grid.ColumnModel([ selectModel, {
sortable : true,
header : "Drop/Pick Loc",
dataIndex : 'locationName',
width : 170,
renderer : function(value, metaData, record, rowIndex,
colIndex, store) {
var refColor = record.data.tourTypeColor;
//console.log(record);
metaData.attr = 'style="background-color:' + refColor + ';"';
return record.get('locationName');
}
}, {
header : "Town/City",
sortable : true,
dataIndex : 'city',
width : 120
}, {
header : "Address",
sortable : true,
dataIndex : 'addr',
width : 170
}, {
header : "EST.Un/Load Time",
sortable : true,
dataIndex : 'estimatedTime',
width : 100
} ]),
sm : new Ext.grid.CheckboxSelectionModel(),
//width : 570,
//height : 390,
autoHeight : true,
autoWidth : true,
frame : true,
iconCls : 'icon-grid',
renderTo : document.body
});
This is my dropPickGridStore:
var dropPickGridStore = new Ext.data.JsonStore({
fields : [ {
name : 'locationCode'
}, {
name : 'locationName'
}, {
name : 'city'
}, {
name : 'addr'
}, {
name : 'estimatedTime'
}, {
name : 'tourTypeColor'
} ],
root : 'dropPickLoc',
idProperty : 'locationCode',
//autoDestroy : true,
autoLoad : true,
proxy : new Ext.data.HttpProxy({
url : "http://" + host + ":" + port + "/" + projectName + "/"
+ "PendingDropPicks"
}),
reader : {
type : 'json',
root : 'dropPickLoc'
//idProperty : 'locationName',
},
});
My Json data is like this.
{'dropPickLoc':[{ 'locationCode' : '10007', 'locationName' : 'Gayan Hardware', 'city' : 'Galle', 'addr' : '121, Wijaya Rd, Galle', 'estimatedTime' : '120', 'tourTypeColor' : 'blue' } , { 'locationCode' : '10004', 'locationName' : 'Kandy Hardware', 'city' : 'Kandy', 'addr' : '11, Kurunagala Road, Kandy', 'estimatedTime' : '40', 'tourTypeColor' : 'blue' } , { 'locationCode' : '10009', 'locationName' : 'Mala Stores', 'city' : 'Colombo', 'addr' : '11B, Thimbirigasyaya, Colombo', 'estimatedTime' : '45', 'tourTypeColor' : 'yellow' } , { 'locationCode' : '10003', 'locationName' : 'Namal Ceramic', 'city' : 'Kurunagala', 'addr' : '12B, Lumbini Udyanaya, Kurinagala', 'estimatedTime' : '45', 'tourTypeColor' : 'yellow' } , { 'locationCode' : '10000', 'locationName' : 'Priya Ceramic', 'city' : 'Nugegoda', 'addr' : '15, Nugegoda', 'estimatedTime' : '40', 'tourTypeColor' : 'yellow' } , { 'locationCode' : '10002', 'locationName' : 'Sam Stores', 'city' : 'Galle', 'addr' : '46A, Galle', 'estimatedTime' : '120', 'tourTypeColor' : 'green' } , { 'locationCode' : '10008', 'locationName' : 'Saman Stores', 'city' : 'Polgahawela', 'addr' : '111, Kurunagala Rd, Kurunagala', 'estimatedTime' : '120', 'tourTypeColor' : 'blue' } , { 'locationCode' : '10006', 'locationName' : 'Sell-X Computors', 'city' : 'Ratnapura', 'addr' : '12, Tiriwanakatiya, Ratnapura', 'estimatedTime' : '120', 'tourTypeColor' : 'green' } , { 'locationCode' : '10001', 'locationName' : 'Super Stores', 'city' : 'Kandy', 'addr' : '16, Kandy Road', 'estimatedTime' : '120', 'tourTypeColor' : 'blue' } , { 'locationCode' : '10005', 'locationName' : 'Wijesingha Hardware', 'city' : 'Galle', 'addr' : '113A, Wackewella Road, Galle', 'estimatedTime' : '120', 'tourTypeColor' : 'green' } ]}
User can select items from this grid and move them into another grid(on button click). Here is my second grid pane;.
var gps_grid = new Ext.grid.GridPanel({
store : estore,
cm : new Ext.grid.ColumnModel([ selectModel, {
sortable : true,
header : "Drop/Pick Loc",
dataIndex : 'locationName',
width : 170
}, {
header : "GPS",
sortable : true,
dataIndex : 'gps',
width : 100
}, {
header : "EST.Un/Load Time",
sortable : true,
dataIndex : 'estimatedTime',
width : 100
}, {
header : "",
sortable : true,
dataIndex : 'colorCode',
width : 30
} ]),
sm : selectModel,
//width : 435,
//height : 400,
autoHeight : true,
autoWidth : true,
frame : true,
iconCls : 'icon-grid',
renderTo : document.body
});
This is my attempt to move selected items to second grid panel.
This is a listener for my button.
listeners: {
click: function(){
if (drop_pick_grid.getSelectionModel().hasSelection()) {
selectedItems = drop_pick_grid.getSelectionModel().getSelections();
console.log(selectedItems);
var myReader = new Ext.data.ArrayReader({}, [{
name: 'locationName',
dataIndex: 'locationName'
}, {
name: 'estimatedTime',
dataIndex: 'estimatedTime'
} ]);
var gpsGridStore = new Ext.data.Store({
data : selectedItems,
reader : myReader,
autoLoad : true
});
console.log(gpsGridStore);
}
}
}
I tried to create a new store for my second grid (gpsGridStore) with selected items from the first grid panel. I lete it to print in my firebug console. But gpsGridStore items are empty. i.e. locationName and estimatedTime take empty values.
data
Object { locationName="", estimatedTime=""}
estimatedTime
""
locationName
""
And this the console output for selectedItems:
data
Object { locationCode="10000", locationName="Priya Ceramic", city="Nugegoda", more...}
addr
"15, Nugegoda"
city
"Nugegoda"
estimatedTime
"40"
locationCode
"10000"
locationName
"Priya Ceramic"
tourTypeColor
"yellow"
What's wrong with my codes ? I would be much appreciated if anyone please be so kind enough to explain whats the error in my codes and how can I fix it.
Thanx a lot
Don't create another store, just remove the selected records from the store of the first grid, and add them to the store of your second grid. The view will be updated automatically, following data changes.
Here's what the code of your button listener should look like:
var records = dropPickGrid.selModel.getSelections();
dropPickGrid.getStore().remove(records);
gpsGrid.getStore().add(records);
If your second grid uses a different model (i.e. different store fields), you can create new records from the selection instead of using the same ones. But still, you should not try to change the store of the grid. Work with records.
For complex examples like yours, putting everything in a running fiddle will help get fast and quality answers from here ;)

Change valueField config on Ext-JS combobox?

I have a combobox on a form where I need to reset its store along with the 'displayField' and 'valueField' configs.
Resetting the store via cmb.bindStore(newStore) works great.
Setting cmb.displayField = 'newfieldname'; also works great.
However, cmb.valueField = 'newValField'; does not work. The combo displays the right stuff, but when i select an item, the value is using the old valueField value, not the new one.
I've tried:
doing a cmb.reset() afterwards
Ext.apply(...)
Is it because valueField is somehow special because it is a required field? Is there some special way to set a config value on an Ext-JS component I don't know about or is it just not possible to change the value of 'valueField'?
FYI - Here is my code:
comp.bindStore(Ext.create('Ext.data.Store', {
fields : [ {
name : 'abbr',
type : 'string'
}, {
name : 'name',
type : 'string'
}, {
name : 'slogan',
type : 'string'
} ],
data : [ {
"abbr" : "AL",
"name" : "Alabama",
"slogan" : "The Heart of Dixie"
}, {
"abbr" : "AK",
"name" : "Alaska",
"slogan" : "The Land of the Midnight Sun"
}, {
"abbr" : "AZ",
"name" : "Arizona",
"slogan" : "The Grand Canyon State"
}, {
"abbr" : "AR",
"name" : "Arkansas",
"slogan" : "The Natural State"
}, ]
}));
comp.displayField = 'abbr'; // THIS WORKS
comp.valueField = 'abbr'; // THIS DOESNT WORK
You are nearly there but you where looking at the wrong property cause valueField is not your issue, it is displayField. Your exact problem are preconfigured and cached properties. The first is the display template the second is the picker instance. You need to override the template and remove the picker instance. Here's a working snipped (JSFiddle)
In the example I added a second trigger with a cross. Hit it and the ComboBox get the new values. I recommend you to create your own component for this by extending from ComboBox and wrap all into a reconfigure method that would expect tree parameters.
Ext.onReady(function() {
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL1", "name":"Alabama1"},
{"abbr":"AK1", "name":"Alaska1"},
{"abbr":"AZ1", "name":"Arizona1"}
//...
]
});
var comp = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Choose State',
id: 'combo-ident',
trigger2Cls: 'x-form-clear-trigger',
onTrigger2Click: function (args) {
var comp = Ext.getCmp('combo-ident');
comp.clearValue();
comp.bindStore(Ext.create('Ext.data.Store', {
fields : [ {
name : 'abbr',
type : 'string'
}, {
name : 'name',
type : 'string'
}, {
name : 'slogan',
type : 'string'
} ],
data : [ {
"abbr" : "AL",
"name" : "Alabama",
"slogan" : "The Heart of Dixie"
}, {
"abbr" : "AK",
"name" : "Alaska",
"slogan" : "The Land of the Midnight Sun"
}, {
"abbr" : "AZ",
"name" : "Arizona",
"slogan" : "The Grand Canyon State"
}, {
"abbr" : "AR",
"name" : "Arkansas",
"slogan" : "The Natural State"
}, ]
}));
comp.displayField = 'abbr';
comp.valueField = 'name';
comp.displayTpl = new Ext.XTemplate(
'<tpl for=".">' +
'{[typeof values === "string" ? values : values["' + comp.displayField + '"]]}' +
'<tpl if="xindex < xcount">' + comp.delimiter + '</tpl>' +
'</tpl>'
);
comp.picker = null;
},
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});
comp.on('select', function(){ console.log(arguments); console.log(arguments[0].getSubmitValue()); })
});
I am not sure it is possible to reconfigure the combo box this way, but perhaps you can create another combobox with a different store and valueField. Hide/destroy one or the other based on your logic.

Categories