I am using Ext.ux.tree.TreeGrid for tree grid panel. All is working fine except sort.
I have 3 level of hierarchy in it like - parent - child - grand child. I want to make sorting based on text of parent only. But I am getting random result every time. :(
This is my code -
var tree_grid = new Ext.ux.tree.TreeGrid({
title : 'Requirements',
height : 415,
enableDD : true,
enableHdMenu : true,
id : 'req_tree',
columns : [ {
header : 'Entity',
dataIndex : 'text',
width : 200,
sortable: true,
sortType : 'asText'
}, {
header : 'Text',
width : 50,
dataIndex : 'temp',
align : 'center',
// sortType : 'asFloat',
sortable: false
}],
dataUrl : 'my_page.php'
});
For sorting I have tried this -
1) var myTreeSorter = new Ext.tree.TreeSorter(tree_grid, {});
myTreeSorter.doSort(tree_grid.getRootNode());
2) new Ext.ux.tree.TreeGridSorter(tree_grid, {
folderSort: true,
dir: "desc",
sortType: function(node) {
// sort by a custom, typed attribute:
return parseInt(node.id, 10);
}
});
3) Used Attributes like - sortType, sortable, sortInfo.
None of the above helped me however. Please help.
var mySortStore = Ext.create("Ext.data.Store", {
model: "MyTreeStore",
data: []
});
Then when you go to add the node to the tree, use this function instead:
function addNodeSorted(node, childToBeAdded){
//clear the store from previous additions
mySortStore.removeAll();
//remove old sorters if they are dynamically changing
mySortStore.sort();
//add the node into the tree
node.appendChild(childToBeAdded);
var cn = node.childNodes,
n;
//remove all nodes from their parent and add them to the store
while ((n = cn[0])) {
mySortStore.add(node.removeChild(n));
}
//then sort the store like you would normally do in extjs, what kind of sorting you want is up to you
mySortStore.sort('height', 'ASC');//this is just an example
//now add them back into the tree in correct order
mySortStore.each(function(record){
node.appendChild(record);
});
}
Did you tried to use the config folderSort on the store:
TreeGrid Example: sencha TreeGrid
var store = Ext.create('Ext.data.TreeStore', {
model: 'Task',
proxy: {
type: 'ajax',
//the store will get the content from the .json file
url: 'treegrid.json'
},
**folderSort: true**
});
--
Other solution, can be used a sort filter on the store:
Store Sort: sencha sort
//sort by a single field
myStore.sort('myField', 'DESC');
//sorting by multiple fields
myStore.sort([
{
property : 'age',
direction: 'ASC'
},
{
property : 'name',
direction: 'DESC'
}
]);
I've seen tons of examples about setting the colmodel in the view but I haven't been able to see the controller code!
I am trying to do it but the setup keep being wrong.
I am trying to reach this column formation:
colModel:
[
{ name: 'ID', index: 'ID', hidden: true },
{ name: 'Votes', index: 'Votes', width: 100, align: 'left' },
{ name: 'Question', index: 'Question', width: 300, align: 'left' },
{ name: 'my_clickable_checkbox', index: 'my_clickable_checkbox',
sortable: true,
formatter: chkFmatter, formatoptions: { disabled: false }, editable: true,
edittype: "checkbox"
}
],
This is my trial in the controller:
return Json(
new { colNames = new[] { "ID2", "Votes2", "Question2", "checkbox" },
colModel = new[] {
new { name = "ID", index = "ID", width = 0, formatter="",
edittype="", hidden = true },
new { name = "Votes", index = "Votes", width = 100, formatter="",
edittype="", hidden = false },
new { name = "Question", index = "Question", width = 300, formatter="",
edittype="", hidden = false },
new { name = "checkbox", index = "my_clickable_checkbox", width = 100,
formatter="chkFmatter", edittype="checkbox", hidden = false }
}
}, JsonRequestBehavior.AllowGet);
The creation of this array in the controller is forcing me to have the same number of properties in all rows. For example, I only need the ID to be hidden, but it forces me to supply a hidden property to all other columns.
Second problem, I need to call js function chkFmatter for the fourth column.
how can I reach that colModel formation in controller??
thanks much.
You might be interested in looking at jqGrid Importing and exporting functionality. It allows you to import or export the entire jqGrid configuration to or from another file format.
You can read this blog post:
jqGrid and ASP.NET MVC - Configuration Import/Export
to get the general idea on how to use those functionalities with ASP.NET MVC, but it`s a little bit out of date if it comes to ASP.NET MVC stuff (it is based on ASP.NET MVC 1).
You can also take a look at this jqGrid sample project:
jqGrid in ASP.NET MVC 3 and Razor
which (among other things) contains sample for configuration import/export.
Most imported thing to remember here is that you still need to set any jqGrid events/callbacks or call any additional methods like 'setFrozenColumns' after configuration import.
$("#tableVisualization").jqGrid('GridUnload');
$("#tableVisualization").jqGrid({
datatype: "local",
mtype: 'GET',
colNames: this.GetGridColumnNames(),
colModel: this.GetGridColumnModel(),
height: "100%",
autowidth: true,
shrinkToFit: true,
sortname: 'monthID',
sortorder: "desc",
rowList: [6, 12],
rowNum: 12,
pager: $('#pager3'),
viewrecords: true,
recordpos: "left",
caption: "Table"
});
//local data array used for example
var data = this.GetGridData();
//FUNCTION CALL
//populate grid with data
$("#tableVisualization").jqGrid("addRowData", "month", data);
$("#tableVisualization").trigger("reloadGrid");
$("#tableVisualization").setGridWidth(1040, true);
Above code works fine.
However if I assign $("#tableVisualization") to a variable and use the variable in the above code it does not work.
//var grid = $("#tableVisualization");
It works every alternate call.
For example if the whole code was inside a javascript method called LoadGrid(), then the first call to the method works, second call does not, third works, fourth does not and so on.
I have seen during debugging, when it reached "grid.jqGrid('GridUnload')" on the even calls, the grid is completely removed(im not sure if the html table is removed or not) and it is not created during "$("#tableVisualization").jqGrid({.....});".
Can anyone please explain me the reason for this behaviour.
I can make the scenario work because now I am not using a local variable but I would like to know why it does not work?
We can see exactly what is going on within the grid's GridUnload method in grid.custom.js:
GridUnload : function(){
return this.each(function(){
if ( !this.grid ) {return;}
var defgrid = {id: $(this).attr('id'),cl: $(this).attr('class')};
if (this.p.pager) {
$(this.p.pager).empty().removeClass("ui-state-default ui-jqgrid-pager corner-bottom");
}
var newtable = document.createElement('table');
$(newtable).attr({id:defgrid.id});
newtable.className = defgrid.cl;
var gid = $.jgrid.jqID(this.id);
$(newtable).removeClass("ui-jqgrid-btable");
if( $(this.p.pager).parents("#gbox_"+gid).length === 1 ) {
$(newtable).insertBefore("#gbox_"+gid).show();
$(this.p.pager).insertBefore("#gbox_"+gid);
} else {
$(newtable).insertBefore("#gbox_"+gid).show();
}
$("#gbox_"+gid).remove();
});
},
The key points to understand are:
A new table element is inserted with the same DOM id as the old table. We can see it created in the call to document.createElement('table') and inserted in one of the calls to insertBefore.
The existing jqGrid DOM is removed in the call to $("#gbox_"+gid).remove(). Since the old table element is contained within the gbox, it is removed as well.
After the call to GridUnload, the DOM element that it refers to no longer exists on the page, so any code that references the element is ineffective.
Does that help?
I had a bean object with me in the colmodel of jqgrid. the object hold two attributes name and id. I used a showLink formatter to form the hyperlink in one of the column. Now i have names the colum with object.name and on click i want to send the id in URL. Any inputs on how to work on this.
Any inputs could help me
code :
colModel :[
{name:'xxx', label:'xxx', width:200,align:'left'},
{name:'yyy', label:'yyy', width:110,align:'left'},
{
name:'zzz',
label:'zzz',
width:100,
sorttype:'int',
formatter:'currency',
formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 0, prefix: "$ "},
align:'center'
},
{name:'aaa', label:'aaa', width:80,align:'left'},
{name:'bbb', label:'bbb', width:100,align:'left'},
{
name:'strategies.name',
label:'strategies',
width:160,
align:'left',
formatter:'showlink',
formatoptions:{baseLinkUrl:'MyLink.html',addParam: '',showAction:'',idName:'id'}
}]
jQuery("#gridtableid").jqGrid('filterToolbar',{defaultSearch : "cn",stringResult: true,searchOnEnter : false});
Thanks in advance....
In JQgrid, you can call a javascript function and do any required formatting . You have the entire row data to play with it.
What needs to be done is call a function showlink in your case and remove formatoptions from that row. HAve a separate js function showlink as below and return the prepared link back to the grid.
function showLink(cellvalue, options, rowObject) {
var link = "'+ rowObject.columnName + "";
}
When I display a small amount per page, it's quick and very good. When I increase it to 100 or more it starts getting slow. At 1000 it's unbearable! This is the code used for drawing the grid:
$("#stSearchTermsGrid").jqGrid({
mtype: "POST",
postData:{},
datatype: function(postdata) {
$.ajax({
url: 'ajax/ajax_termsSearchGridSimple.php',
data: postdata,
async: false,
dataType: "xml",
error: function(){
alert('Error loading XML document');
},
success: function(data,stat,xmldata){
//check error
var $error=$(data).find('error').text();
if($error!="0")
{
messageBox("Error",$error);
return;
}
//content
var $content=$(data).find('content').text();
if($content!="0")
{
var thegrid = $("#stSearchTermsGrid")[0];
thegrid.addXmlData(xmldata.responseXML);
}
}
});
},
colNames:["tId","term", "revTerm", "uType","freq","description","fId","facet","modifiedTime"],
colModel:[
//tId
{name:'tId',index:'tId',align:"center",searchoptions:{sopt:['eq','ne','lt','le','gt','ge','in','ni']}},
//term (editable)
{name:'term',index:'term',searchoptions:{sopt:['eq','ne','in','ni','bw','bn','ew','en','cn','nc']},editable:true,edittype:'text',editoptions:{size:20},editrules:{required:true},formoptions:{elmsuffix:'(*)'}},
//revTerm (editable)
{name:'revTerm',index:'revTerm',searchoptions:{sopt:['eq','ne','in','ni','bw','bn','ew','en','cn','nc']},editable:true,edittype:'text',editoptions:{size:20},editrules:{required:true},formoptions:{elmsuffix:'(*)'}},
//uType (editable)
{name:'uType',index:'uType',align:"center",searchoptions:{sopt:['eq','ne','in','ni']},editable:true,edittype:'select',editoptions:{value:{'':'any','NPU':'proper noun','NU':'noun','VU':'verb'}}},
//freq
{name:'freq',index:'freq',align:"center",searchoptions:{sopt:['eq','ne','lt','le','gt','ge','in','ni']}},
//description (editable)
{name:'description',index:'description',searchoptions:{sopt:['bw','bn','ew','en','cn','nc']},editable:true,edittype:'textarea',editoptions:{rows:"3"}},
//fId
{name:'fId',index:'fId',align:"center",searchoptions:{sopt:['eq','ne','lt','le','gt','ge','in','ni']}},
//facet
{name:'facet',index:'facet',searchoptions:{sopt:['eq','ne','in','ni','bw','bn','ew','en','cn','nc']}},
//modifiedTime
{name:'modifiedTime',index:'modifiedTime',align:"center",searchoptions:{sopt:['eq','ne','lt','le','gt','ge','bw','bn','ew','en','cn','nc']}}
],
gridComplete: function(){
var $ids=$("#stSearchTermsGrid").jqGrid('getDataIDs');
for($i=0;$i<$ids.length;$i++){
var $reference="G";
//update columns
$("#stSearchTermsGrid").jqGrid('setRowData',$ids[$i],{"reference":$reference});
//coloring the recently classified row
var $colorRecentlyModified = '#DFFC91';
var modifiedTime = $("#stSearchTermsGrid").jqGrid('getCell',$ids[$i],'modifiedTime');
var timeDiff = Math.abs(new Date() - new Date(modifiedTime.replace(/-/g,'/')));
// 86400000 is the number of milliseconds in one day. Multiplying by days to mark the ones which are modified a few days ago
timeLimit = 86400000 * 1.5;
if(timeDiff < timeLimit)
{
for(colN=2; colN<9; colN++)
$("#stSearchTermsGrid").jqGrid('setCell', $ids[$i], colN, '', {'backgroundColor':$colorRecentlyModified});
}
//coloring the unclassified row
var $colorUnclassified = '#FFCECE';
var $fId = $("#stSearchTermsGrid").jqGrid('getCell',$ids[$i],'fId');
if($fId == "0")
{
for(colN=2; colN<9; colN++)
$("#stSearchTermsGrid").jqGrid('setCell', $ids[$i], colN, '', {'backgroundColor':$colorUnclassified});
}
}
},
sortable: true,
//autowidth:true,
width: 900, //width for grid
height: 250, //height for grid
sortname: 'term', //default sort column
caption: "Terms", //caption for grid (empty will hide)
hidegrid: false,
gridview: true, //load the grid more fast
multiselect: true, //support mulitselect
//multiboxonly: true,
pager: '#stSearchTermsGridPager',
rowNum:10,
rowList:[10,25,50,100,500,1000],
viewrecords: true, //show view record information
viewsortcols: [true,'vertical',true], //show sortable column with icons
editurl: 'ajax/ajax_termsEdit.php'
});
$("#stSearchTermsGrid").jqGrid('navGrid','#stSearchTermsGridPager',
{edit:true,add:false,del:true,search:true,view:true,refresh:true},
// edit options
{
onclickSubmit : function(params, posdata) {
var $tId=$("#stSearchTermsGrid").jqGrid('getGridParam','selrow');
if($tId && $tId.length>0)
{
var $rowAry=$("#stSearchTermsGrid").jqGrid('getRowData',$tId);
var $fId=$rowAry["fId"];
return {"fId":$fId}
}
},
afterSubmit : gridAfterSubmit,
reloadAfterSubmit: true,
closeOnEscape:true,
bottominfo:"Fields marked with (*) are required."
},
// add options
{},
//del options
{
msg: "Selected records(s) will be permanently deleted and cannot be recovered.<br/> Are you sure?",
afterSubmit : gridAfterSubmit,
reloadAfterSubmit: true,
closeOnEscape:true
},
// search options
{multipleSearch:true,closeOnEscape:true},
//view options
{
closeOnEscape:true
}
);
$("#stSearchTermsGrid").jqGrid('gridResize',{minWidth:900,maxWidth:2000,minHeight:250, maxHeight:1000});
I see many places where the grid can be improved.
1) You should use paging. If you show the user 1000 rows of data, the data will be not displayed on the monitor at once. The user have to scroll the windows of web browser to see the most parts of data. Which sense has to spend time to paint the parts of window which will not be seen? The scrolling of data with respect of jqGrid is much more effective as scrolling of browser window. Moreover no person are able to analyse the 1000 rows of data. He have to change sorting and set different filters to understand which from the data are interesting for him. It is one more argument for the data paging and implemented some searching. It you already use advanced searching you can consider to use additionally toolbar searching with the parameter stringResult:true which is compatible with the advanced searching.
2) you should rewrite the code of gridComplete totally. I suppose, that for relatively large number of rows the function is the bottleneck of your code. To verify this just temporary comment the function and compare the time of the grid painting. You should understand that every time you get data by id or set data by id jQuery will have to search the DOM element by id. Especially modification of data on the page can be very slow. By the way it seems to me that you set the same 'background-color' (what is 'backgroundColor' ???) CSS style for almost the whole cells of the rows. Why not set the 'background-color' for the row (<tr> element) instead?
3) I strictly recommend you not use datatype as function. Your server part should return some error HTTP code. In the case the loadError event will work and you can decode and display the custom error message. All other in your data seems be standard and you need not use datatype as function. If you will use datatype:"xml" you can for example try to use loadonce:true and implement client-side data paging and sorting if you will have problem with implementation of this features on the server.
I don't want to write too long text so I stop on the 3 most important points. By the way if you will switch from XML to JSON as the datatype used for the communication with the server, it will also improve a little the performance.
UPDATED: To see the performance of jqGrid with 1000 rows of data without paging and with data paging look at the links. Is by the way the performance of my example with 1000 rows without paging also so slow as in your case?