PDA

View Full Version : Grid with quicksearch



baldeep_bhatia
6 Jan 2011, 7:12 AM
Hi peeps,

hope all is going well.

I am in need of a bit of help and hope someone here can help me.

Basically I currently have two grids from which i drag and drop items from grid1 to grid2... the problem is, because there are over 700 items in grid1, its hard for the user to scroll through items to find what they want..

i wanted a search box, where a user would type something (it could be anything and searches all columns and rows) and if the item exists, the grid is then filtered.

My current code is below and it was done by someone external, therefore i am pretty confused with their code...

/*!
* Ext JS Library 3.2.1
*/
Ext.onReady(function () {
var myData = {
records: [
{ name: "Rec 0", column1: "0", column2: "0" },
]
};
?
// Generic fields array to use in both store defs.
var fields = [
{ name: 'StockId', mapping: 'StockId' },
{ name: 'Fidessa', mapping: 'Fidessa' },
{ name: 'BloombergCode', mapping: 'BloombergCode' },
{ name: 'ReutersRic', mapping: 'ReutersRic' },
{ name: 'StockName', mapping: 'StockName' }
];
// create the data store
var firstGridStore = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: '/User/'
}),
fields: fields,
data: _stock1,
root: 'rows'
});
firstGridStore.load();
// Column Model shortcut array
var cols = [
{ header: "Bloomberg Code", width: 110, sortable: true, dataIndex: 'BloombergCode' },
{ header: "Reuters Ric", width: 90, sortable: true, dataIndex: 'ReutersRic' },
{ header: "Fidessa", width: 90, sortable: true, dataIndex: 'Fidessa' },
{ id: 'name', header: "Stock Name", width: 130, sortable: true, dataIndex: 'StockName' }
];
// declare the source Grid
var firstGrid = new Ext.grid.GridPanel({
width: 480,
height: 295,
ddGroup: 'secondGridDDGroup',
store: firstGridStore,
columns: cols,
enableDragDrop: true,
trackMouseOver: false,
loadMask: true,
stripeRows: true,
autoExpandColumn: 'name',
title: 'Stock list'
});
var secondGridStore = new Ext.data.JsonStore({
fields: fields,
data: _stock2,
root: 'rows'
});
// create the destination Grid
var secondGrid = new Ext.grid.GridPanel({
width: 480,
height: 295,
ddGroup: 'firstGridDDGroup',
store: secondGridStore,
columns: cols,
enableDragDrop: true,
stripeRows: true,
autoExpandColumn: 'name',
title: 'Your portfolio',
sm: new Ext.grid.RowSelectionModel({ singleSelect: true })
});
?
//Simple 'border layout' panel to house both grids
var displayPanel = new Ext.Panel({
width: 960,
height: 295,
layout: 'hbox',
renderTo: 'panel',
defaults: { flex: 1 }, //auto stretch
layoutConfig: { align: 'stretch' },
items: [
firstGrid,
secondGrid
],
bbar: [
'->', // Fill
{
height: 50,
text: 'Save',
handler: function () {
secondGridStore.each(function (Records) {
var stockId = $("input[name=StockId]:first").clone();
stockId.val(Records.data.StockId);
stockId.appendTo("#portfolioform");
});
$("input[name=StockId]:first").remove();
$("#portfolioform").submit();
//refresh source grid
//firstGridStore.loadData(myData);
//purge destination grid
//secondGridStore.removeAll();
}
}
]
});
// used to add records to the destination stores
var blankRecord = Ext.data.Record.create(fields);
/****
* Setup Drop Targets
***/
// This will make sure we only drop to the view scroller element
var firstGridDropTargetEl = firstGrid.getView().scroller.dom;
var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
ddGroup: 'firstGridDDGroup',
notifyDrop: function (ddSource, e, data) {
var records = ddSource.dragData.selections;
Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
firstGrid.store.add(records);
//firstGrid.store.sort('name', 'ASC');
return true
}
});
?
// This will make sure we only drop to the view scroller element
var secondGridDropTargetEl = secondGrid.getView().scroller.dom;
var secondGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
ddGroup: 'secondGridDDGroup',
notifyDrop: function (ddSource, e, data) {
var records = ddSource.dragData.selections;
Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
secondGrid.store.add(records);
// secondGrid.store.sort('name', 'ASC');
return true
}
});
firstGridStore.load({ params: { start: 0, limit: 25} });
});


i understand most of it but i dont understand how the datastore is getting the data.. i have looked online for quicksearch but most have a proxy url.. but the datastore i have, does not have that.. so i am really confused on how i would do this..

on my aspx page i also have this code:

<script type="text/javascript">
$(function (e) {
});
var _stock1 = <%=((IPager<PortfolioSelectInfo>
)ViewData["Stocks1"]).ToJson().ToString() %>;
var _stock2 = <%=((IPager<PortfolioSelectInfo>)ViewData["Stocks2"]).ToJson().ToString() %>;
</script>

this is what gets the data (i assume).. i have no idea how:S.

if anyone can direct me or help me with the coding, i would really appreciate it.

Thanks

steffenk
6 Jan 2011, 10:18 AM
url: '/User/'
this is the request for getting data.

btw - please use code in code boxes, i can't read it well without indentations.

baldeep_bhatia
6 Jan 2011, 10:29 AM
Hey steffenk. Ignore those 3 lines of code, i added that myself and copied and pasted that code here. That bit of code does nothing. Thats y deres another thread with that code removed. I realised i had that code after i posted it.