I am working on developing an ASP.NET web page where data will be displayed in a jquery Datatable. I am able to display the data but, the issue I am facing is, the information "Showing of entries" is displaying an incorrect value.
Fiddler: https://jsfiddle.net/8f63kmeo/9/
HTML:
<table id="CustomFilterOnTop" class="display nowrap" width="100%"></table>
JS
var Report4Component = (function () {
function Report4Component() {
//contorls
this.customFilterOnTopControl = "CustomFilterOnTop"; //table id
//data table object
this.customFilterOnTopGrid = null;
//variables
this.result = null;
}
Report4Component.prototype.ShowGrid = function () {
var instance = this;
//add footer
$('#' + instance.customFilterOnTopControl)
.append('<tfoot><tr><th colspan="2" class="total-text">Total</th><th class="total-value"></th></tr></tfoot>');
//create the datatable object
instance.customFilterOnTopGrid = $('#' + instance.customFilterOnTopControl).DataTable({
columns: [
{ data: "Description", title: "Desc" },
{ data: "Status", title: "Status" },
{ data: "Count", title: "Count" }
],
"paging": true,
scrollCollapse: true,
"scrollX": true,
scrollY: "300px",
deferRender: true,
scroller: true,
dom: '<"top"Bf<"clear">>rt <"bottom"<"Notes">i<"clear">>',
buttons: [
{
text: 'Load All',
action: function (e, dt, node, config) {
instance.ShowData(10000);
}
}
],
initComplete: function (settings) {
var api = this.api(settings);
//now, add a second row in header which will hold controls for filtering.
$(api.table().header()).append('<tr role="row" id="FilterRow">' +
'<th>Desc</th>' +
'<th>Status</th>' +
'<th>Count</th>' +
'</tr>');
//add input controls for filtering
$('#FilterRow th', api.table().header()).each(function () {
var title = $('#' + instance.customFilterOnTopControl + ' thead th').eq($(this).index()).text();
$(this).html('<input type="text" onclick="return false" placeholder="Search ' + title + '" class="form-control" />');
});
//todo: refactor this code. this is for displaying the scrollbar below the tfoot instead of tbody
//when multiple tables are present, use tablename.find to get the specific class object
//this code is not tested with other options
$('.dataTables_scrollBody').css({
'overflow-x': 'hidden',
'border': '0'
});
$('.dataTables_scrollFoot').css('overflow', 'auto');
$('.dataTables_scrollFoot').on('scroll', function () {
$('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
});
},
footerCallback: function (tfoot, data, start, end, display) {
var api = this.api();
if (instance.result == null || instance.result.Total == undefined) {
return;
}
$(api.column(2).footer()).html(instance.result.Total);
}
});
$("div.Notes").html('<div class="alert alert-warning">This is a notes section part of the table dom.</div>');
};
Report4Component.prototype.BindEvents = function () {
var instance = this;
$("#FilterRow th input").on('keyup change', function () {
instance.customFilterOnTopGrid
.column($(this).parent().index() + ':visible')
.search("^" + $(this).val(), true, false, true) //uses regular expression and checks only for starts with
.draw();
});
};
Report4Component.prototype.ShowData = function (limit) {
if (limit === void 0) { limit = 100; }
var instance = this;
instance.customFilterOnTopGrid.clear(); //latest api function
instance.result = instance.GetData(limit);
instance.customFilterOnTopGrid.rows.add(instance.result.RecordList);
instance.customFilterOnTopGrid.draw();
};
Report4Component.prototype.GetData = function (limit) {
//structure of the response from controller method
var resultObj = {};
resultObj.Total = 0;
resultObj.RecordList = [];
for (var i = 1; i <= limit; i++) {
resultObj.Total += i;
var record = {};
record.Description = "This is a test description of record " + i;
record.Status = ["A", "B", "C", "D"][Math.floor(Math.random() * 4)] + 'name text ' + i;
record.Count = i;
resultObj.RecordList.push(record);
}
return resultObj;
};
return Report4Component;
}());
$(function () {
var report4Component = new Report4Component();
report4Component.ShowGrid();
report4Component.BindEvents();
report4Component.ShowData();
});
function StopPropagation(evt) {
if (evt.stopPropagation !== undefined) {
evt.stopPropagation();
}
else {
evt.cancelBubble = true;
}
}
Issue:
In the snapshot below, you can see that there are 8 records displayed in the grid but, the count is showing as 1 to 1 of 100. It should be 1 to 8 of 100.
Observation:
If you resize the page, the counts seems to appear correctly. I don't want to trigger window resize event after every draw. Is there any api available to handle this issue?
Expectation:
How should I fix this issue? Any suggestion is appreciated.
With some fiddling (heh) with the JSFiddle, I think I've detected the reason for this issue.
Summary of Issue:
There's some issue whereby the scroller is unaware that the addition of all your rows (using rows.add() instead of initializing the table with the rows) has increased the physical dimensions of the table, and so believes that the initial 0 row table is the current size. This causes it to calculate the number of visible rows incorrectly. draw() won't help because it doesn't recreate the table, just the data, which is correct. The internal dimensions of the table are being given to scroller incorrectly. This may not be fixable with the way you've decided to load data without completely destroying and re-creating the table.
Workaround Solution:
Since you create and load your table/events before loading the data, somehow the scroller isn't aware that the Y dimension of the table has changed (the table is created with 0 rows, so it thinks there isn't room for more than 1). I'm not really exactly sure what you should do to update the scroller, but I found a workaround solution. If you don't like this workaround, you'll have to examine the possibility of loading your data during the construction of the table.
See this fiddle where all I've done is change your HTML table by adding dummy rows:
<table id="CustomFilterOnTop" class="display nowrap" width="100%">
<tr><td>asdf</td><td>asdf</td><td>asdf</td></tr>
<tr><td>asdf</td><td>asdf</td><td>asdf</td></tr>
<tr><td>asdf</td><td>asdf</td><td>asdf</td></tr>
<tr><td>asdf</td><td>asdf</td><td>asdf</td></tr>
<tr><td>asdf</td><td>asdf</td><td>asdf</td></tr>
<tr><td>asdf</td><td>asdf</td><td>asdf</td></tr>
<tr><td>asdf</td><td>asdf</td><td>asdf</td></tr>
<tr><td>asdf</td><td>asdf</td><td>asdf</td></tr>
<tr><td>asdf</td><td>asdf</td><td>asdf</td></tr>
</table>
This tricks the scroller into believing that there is room for 9 rows, which is how many you'll initially have. You're basically padding the initial table out to your 300px definition.
And note that while the table appears to operate the exact same, it will now display the correct paging information. Note that these rows are destroyed when you initialize and load your table, so they're just a filler so that scroller knows to expect more rows.
This is very 'hack-y', but hopefully it at least provides some insight into where you should look next, or a temporary workaround.
A better solution would be to load the data into the table when it is initialized, which is the standard way of doing it anyways.
I'm updating a project from OL2 to OL3, but I'm stuck on how to redraw features after changing the feature style.
In OL2, this worked:
hidePoints: function(id) {
if (! this.getMap().center) {
return;
}
var i,
feature,
len = this.points.features.length;
if (id !== null) {
for( i = 0; i < len; i++ ) {
feature = this.points.features[i];
if (feature.attributes.aces_id == id) {
feature.style = null;
} else {
feature.style = { display: 'none' };
}
}
} else {
for( i = 0; i < len; i++ ) {
feature = this.points.features[i];
feature.style = { display: 'none' };
}
}
this.points.redraw();
},
In OL3, I tried updating the function to hide the points layer, but redraw() no longer exists and since the layer I am working with is an ol.layer.Vector, I can't find any updateParams options like other sources besides vectors have. Dispatch Event and changed also did not work. I was hoping changed would, but nothing happens.
hidePoints: function(id) {
if (! this.getMap().getView().getCenter()) {
return;
}
var i,
feature,
layerSourceFeatures = this.pointsLayer.getSource().getFeatures(),
len = layerSourceFeatures.length;
if (id !== null) {
for( i = 0; i < len; i++ ) {
feature = this.pointsLayer.getSource().getFeatures()[i];
if (feature.get('aces_id') == id) {
feature.style = null;
} else {
feature.style = { display: 'none' };
}
}
} else {
for( i = 0; i < len; i++ ) {
feature = this.pointsLayer.getSource().getFeatures()[i];
feature.style = { display: 'none' };
}
}
//this.pointsLayer.redraw();
//this.pointsLayer.dispatchEvent(goog.events.EventType.CHANGE);
this.pointsLayer.changed();
},
I'm also wondering if changing the style is done this way (fetching each feature to another var) or if that won't just change that feature and leave the original untouched. Plus always fetching getSource().getFeatures() seems abusive on the performance... but I can't seem to find another way.
Regardless, how is redraw performed in OL3 now to render features whose styles have been altered? A layer can be set as visible, but I don't want to hide/show all the features all the time. Sometimes I just want to hide/show a few according to their given id.
Another way to do it is using a style function and a hidden propertie on the feature:
var style = new ol.Style(...);
function Stylefunction (feature, resolution) {
var prop = feature.getProperties();
if (prop.HIDDEN)
return;
return style;
}
var layer = new ol.layer.Vector({
source: new ol.source.Vector(...),
style: Stylefunction
});
if you change the feature "HIDDEN" propertie, it instant refreshes
So while looking at the documentation over and over, I finally found what would fire the change event, much like seto suggested after.
This is the converted function from OL2 to OL3 that works for me. Redraw is no longer needed since setStyle does it all.
hidePoints: function(id) {
if (! this.getMap().getView().getCenter()) {
return;
}
var i,
feature,
layerSourceFeatures = this.pointsLayer.getSource().getFeatures(),
len = layerSourceFeatures.length;
var emptyImgStyle = new ol.style.Style({ image: '' });
// If an aces id was provided
if (id !== undefined) {
for( i = 0; i < len; i++ ) {
feature = layerSourceFeatures[i];
feature.setStyle(emptyImgStyle);
// Resetting feature style back to default function given in defaultPointStyleFunction()
if (feature.get('aces_id') == id) {
feature.setStyle(null);
}
// Hiding marker by removing its associated image
else {
feature.setStyle(emptyImgStyle);
}
}
}
// No id was provided - all points are hidden
else {
for( i = 0; i < len; i++ ) {
feature = layerSourceFeatures[i];
feature.setStyle(emptyImgStyle);
}
}
},
I can't add comments because I don't have enough reputation, but instead of feature.style = null you might want to call feature.setStyle(null), because this internally triggers the changed event and should instantaneously and automatically change the style. Also feature.style = { display: 'none' } will not work in openlayers 3 because the style needs to be an ol.style.Style object (http://openlayers.org/en/v3.14.2/apidoc/ol.Feature.html#setStyle)
If you have the ID of the features, you can use the source.getFeatureById() method instead of cycling through the features.(http://openlayers.org/en/v3.14.2/apidoc/ol.source.Vector.html#getFeatureById)
Regards rendering, I think using the map's map.render() (at openlayers.org/en/v3.14.2/apidoc/ol.Map.html#render) will re-render the map.
If you just to call a function whenever the map is re-rendered, you can listen on the postrender or postcompose events on the map.
If you create a JSFiddle, I can help you further.
Edit: This example might help you - openlayers.org/en/v3.14.2/examples/dynamic-data.html?q=style
I like this approach for layer toggling (applies to other features, as well):
JAVASCRIPT
<script>
var layerBing = new ol.layer.Tile({
source: new ol.source.BingMaps({
imagerySet: 'Aerial',
key: 'YourKeyBingAccess'
}),
name: 'Bing'
});
/*
* YOUR MAP CODE GOES HERE
*/
function toggleLayer(layerObject) {
var newVisibility = !(layerObject.get('visible'));
layerObject.set('visible', newVisibility);
}
</script>
HTML
<button onclick="toggleLayer(layerBing)">Bing Satellite</button>
<div id="map" class="map"></div>
I'm using arbor.js to create a graph.
How do I create an onclick event for a node, or make a node link somewhere upon being clicked?
The Arborjs.org homepage has nodes which link to external pages upon being clicked, how do I replicate this, or make the node call javascript function upon being clicked?
My current node and edges listing is in this format:
var data = {
nodes:{
threadstarter:{'color':'red','shape':'dot','label':'Animals'},
reply1:{'color':'green','shape':'dot','label':'dog'},
reply2:{'color':'blue','shape':'dot','label':'cat'}
},
edges:{
threadstarter:{ reply1:{}, reply2:{} }
}
};
sys.graft(data);
A bit of context:
I'm using arbor.js to create a graph of thread starters and replies on my forum.
I've got it working so that id's are displayed 'in orbit' around their respective thread starter.
The reference on the arbor site is really not very helpful.
Any help is much appreciated.
If you look at the atlas demo code (in github) you will see towards the bottom there are a selection of mouse event functions, if you look at:
$(canvas).mousedown(function(e){
var pos = $(this).offset();
var p = {x:e.pageX-pos.left, y:e.pageY-pos.top}
selected = nearest = dragged = particleSystem.nearest(p);
if (selected.node !== null){
// dragged.node.tempMass = 10000
dragged.node.fixed = true;
}
return false;
});
This is being used to control the default node "dragging" functionality. In here you can trigger the link you want.
I would add the link URL to the node json that you are passing back to define each node, so your original JSON posted becomes something like:
nodes:{
threadstarter:{'color':'red','shape':'dot','label':'Animals'},
reply1:{'color':'green','shape':'dot','label':'dog', link:'http://stackoverflow.com'},
reply2:{'color':'blue','shape':'dot','label':'cat', link:'http://stackoverflow.com'}
},
Then, you can update the mouseDown method to trigger the link (the current node in the mouse down method is "selected" so you can pull out the link like selected.node.data.link
If you look at the original source for the arbor site to see how they have done it, they have a clicked function that is called on mouseDown event and then essentially does:
$(that).trigger({type:"navigate", path:selected.node.data.link})
(edited for your purposes)
It is worth noting that whilst the Arbor framework and demos are open for use, their site isnt and is actually copyrighted, so only read that to see how they have done it, dont copy it ;)
With the above solutions (including the one implemented at www.arborjs.org) although nodes can open links when clicked, they also lose their ability to be dragged.
Based on a this question, that discusses how to distinguish between dragging and clicking events in JS, I wrote the following:
initMouseHandling:function(){
// no-nonsense drag and drop (thanks springy.js)
selected = null;
nearest = null;
var dragged = null;
var oldmass = 1
var mouse_is_down = false;
var mouse_is_moving = false
// set up a handler object that will initially listen for mousedowns then
// for moves and mouseups while dragging
var handler = {
mousemove:function(e){
if(!mouse_is_down){
var pos = $(canvas).offset();
_mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
nearest = particleSystem.nearest(_mouseP);
if (!nearest.node) return false
selected = (nearest.distance < 50) ? nearest : null
if(selected && selected.node.data.link){
dom.addClass('linkable')
} else {
dom.removeClass('linkable')
}
}
return false
},
clicked:function(e){
var pos = $(canvas).offset();
_mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
nearest = particleSystem.nearest(_mouseP);
if (!nearest.node) return false
selected = (nearest.distance < 50) ? nearest : null
if (nearest && selected && nearest.node===selected.node){
var link = selected.node.data.link
if (link.match(/^#/)){
$(that).trigger({type:"navigate", path:link.substr(1)})
}else{
window.open(link, "_blank")
}
return false
}
},
mousedown:function(e){
var pos = $(canvas).offset();
_mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
selected = nearest = dragged = particleSystem.nearest(_mouseP);
if (dragged.node !== null) dragged.node.fixed = true
mouse_is_down = true
mouse_is_moving = false
$(canvas).bind('mousemove', handler.dragged)
$(window).bind('mouseup', handler.dropped)
return false
},
dragged:function(e){
var old_nearest = nearest && nearest.node._id
var pos = $(canvas).offset();
var s = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
mouse_is_moving = true
if (!nearest) return
if (dragged !== null && dragged.node !== null){
var p = particleSystem.fromScreen(s)
dragged.node.p = p
}
return false
},
dropped:function(e){
if (dragged===null || dragged.node===undefined) return
if (dragged.node !== null) dragged.node.fixed = false
dragged.node.tempMass = 50
dragged = null
selected = null
$(canvas).unbind('mousemove', handler.dragged)
$(window).unbind('mouseup', handler.dropped)
_mouseP = null
if(mouse_is_moving){
// console.log("was_dragged")
} else {
handler.clicked(e)
}
mouse_is_down = false
return false
}
}
$(canvas).mousedown(handler.mousedown);
$(canvas).mousemove(handler.mousemove);
}
}
As you can see,
I made a difference between the clicked and mousedown handler functions.
I am opening links in new tabs. To simply redirect, change:
window.open(link, "_blank") for window.location = link.
The above must replace your previous initMouseHandling function in the renderer.js file.
Define "dom" as: var dom = $(canvas)
You have to add the following css code to give feedback to the user.
canvas.linkable{
cursor: pointer;
}
In the script renderer.js is the handler for the mouse events, so you can add your code to create your functions.
I modified the renderer.js to add the click and double-click functions.
var handler = {
clicked:function(e){
var pos = $(canvas).offset();
_mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
selected = nearest = dragged = particleSystem.nearest(_mouseP);
if (dragged.node !== null) dragged.node.fixed = true
$(canvas).bind('mousemove', handler.dragged)
$(window).bind('mouseup', handler.dropped)
$(canvas).bind('mouseup', handler.mypersonalfunction)
},
mypersonalfunction:function(e){
if (dragged===null || dragged.node===undefined) return
if (dragged.node !== null){
dragged.node.fixed = false
var id=dragged.node.name;
alert('Node selected: ' + id);
}
return false
},
You can check the clic and double-click functions in this page.
I add nodes and edges when a node has been clicked and I add edges to other nodes when the node has been double-clicked (the blue,yellow and green ones)
I´m looking for similar customization for selection over each node id value.
How would it be if instead of mouse-handler trigger, the selection was made via checkbox inside each node?
<input type=checkbox name=mycheckbox[]>
We've created a jqGrid TreeGrid that represents a filesystem, where branches are folders and leafs are files. We've implemented functionality within the TreeGrid to create new "files" by using addChildNode which works well enough. However, we also want to add functionality to create new folders. Our script works which creates new folders, but they are not immediately displayed on the TreeGrid unless it or the page is reloaded. However, reloading the TreeGrid will collapse all the folders, which is particularly annoying.
Is there a way to selectively refresh the nodes of the TreeGrid, or to add a new branch in that is functional? I've seen some partial documentation on addJSONData, but using this function completely purges the TreeGrid until refresh. I've also attempted to use addChildNode and change certain properties, and I've tried to add in the row manually using DOM manipulation; however, both of these methods break the node that was inserted.
Edit:
var grid = $("#grid");
grid.jqGrid({
treeGrid: true,
treeGridModel: "adjacency",
ExpandColumn: 'name',
ExpandColClick: true,
url:"",
datatype:"json",
colNames:['id','Name','Authorization','Views','Uri'],
colModel:[ {name:'id', index:'id', hidden:true, key:true},
{name:'name', index:'name', sorttype:"text", width:3, sortable:false},
{name:'auth',index:'auth', sorttype:"text", sortable:false, hidden:true},
{name:'views',index:'views', sorttype:"integer", width:1, sortable:false, align:"center"},
{name:'uri',index:'uri',sorttype:'text',sortable:false,hidden:true}],
jsonReader:{ root:"rows"
,page:"page"
,total:"total"
,records:"records"
,repeatitems:false
,cell:""
,id:"0"
,userdata:""
},
multiselect:false,
autowidth:true,
height:"auto",
sortable:false,
toppager:true,
hidegrid: false,
loadui: 'block',
pager:"#grid_pager",
caption: "Files",
});
A returned JSON request for the new folder looks something like this:
ret = {"error":"","total":1,"page":1,"records":1,"rows":[{"id":"1113","name":"test","uri":"accounting\/test\/","parent":1,"isLeaf":false,"expanded":true,"loaded":true}]}
Which I attempt to add in using:
grid[0].addJSONData(ret);
The initial data that is loaded is sent as JSON:
{"rows":[
{"id":"1","uri":"afolder\/","parent_id":"0","name":"afolder","level":0,"parent":"0","isLeaf":"false"},
{"id":"4","uri":"bfolder\/","parent_id":"0","name":"bfolder","level":0,"parent":"0","isLeaf":"false"},
{"id":"7","uri":"cfolder\/","parent_id":"0","name":"cfolder","level":0,"parent":"0","isLeaf":"false"},
{"id":"20","uri":"dfolder\/","parent_id":"0","name":"dfolder","level":0,"parent":"0","isLeaf":"false"},
{"id":"48","uri":"efolder\/","parent_id":"0","name":"efolder","level":0,"parent":"0","isLeaf":"false"},
{"id":"179","uri":"ffolder\/","parent_id":"0","name":"ffolder","level":0,"parent":"0","isLeaf":"false"},
{"id":"182","uri":"gfolder\/","parent_id":"0","name":"gfolder","level":0,"parent":"0","isLeaf":"false"},
{"id":"186","uri":"hfolder\/","parent_id":"0","name":"hfolder","level":0,"parent":"0","isLeaf":"false"},
{"id":"201","uri":"ifolder\/","parent_id":"0","name":"ifolder","level":0,"parent":"0","isLeaf":"false"},
{"id":"239","uri":"jfolder\/","parent_id":"0","name":"jfolder","level":0,"parent":"0","isLeaf":"false"},
{"id":"253","uri":"kfolder\/","parent_id":"0","name":"kfolder","level":0,"parent":"0","isLeaf":"false"},
{"id":"262","uri":"lfolder\/","parent_id":"0","name":"lfolder","level":0,"parent":"0","isLeaf":"false"},
{"id":"274","uri":"mfolder\/","parent_id":"0","name":"mfolder","level":0,"parent":"0","isLeaf":"false"}
]}
The demo shows how to use addChildNode method to add tree node. I added in the JSON data which you posted the "loaded":true part because I use in the test no server components and I want to load the treegrid at once.
To show that you should be very careful with ids of the new added row I added two buttons in the demo: "Insert tree node" and "Insert tree node with unique rowid". The first button use the id="1113" from the data which you posted. One click on the button work correct. the second click will insert rows having id duplicates which will be an error. The error you can see different in different web browsers. The second button use $.jgrid.randId() to generate unique rowid. It is probably not an option in your scenario, but it works perfect in case of local tree grid (like in my demo).
Another problem is that you use "parent":"0" in your demo for the root elements. Correct will be "parent":null or "parent":"null" (see the answer). Moreover the property with the name "parent_id" will be ignored. I removed from the demo some settings, so that local sorting can be used in the treegrid.
We solved this problem by extending the functionality of the jqGrid source. First we created a function that could delete all of the child nodes of a particular folder (both folders/branches and files/leaves), so that we could reload them and hence get the latest set of children. This function takes an integer rowid just like delTreeNode().
delChildren : function (rowid) {
return this.each(function () {
var $t = this, rid = $t.p.localReader.id,
left = $t.p.treeReader.left_field,
right = $t.p.treeReader.right_field, myright, width, res, key;
if(!$t.grid || !$t.p.treeGrid) {return;}
var rc = $t.p._index[rowid];
if (rc !== undefined) {
// nested
myright = parseInt($t.p.data[rc][right],10);
width = myright - parseInt($t.p.data[rc][left],10) + 1;
var dr = $($t).jqGrid("getFullTreeNode",$t.p.data[rc]);
if(dr.length>0){
for (var i=0;i<dr.length;i++){
if(dr[i][rid] != rowid)
$($t).jqGrid("delRowData",dr[i][rid]);
}
}
if( $t.p.treeGridModel === "nested") {
// ToDo - update grid data
res = $.jgrid.from($t.p.data)
.greater(left,myright,{stype:'integer'})
.select();
if(res.length) {
for( key in res) {
res[key][left] = parseInt(res[key][left],10) - width ;
}
}
res = $.jgrid.from($t.p.data)
.greater(right,myright,{stype:'integer'})
.select();
if(res.length) {
for( key in res) {
res[key][right] = parseInt(res[key][right],10) - width ;
}
}
}
}
});
},
Then, we created a function to force reloading of a certain node (folder).
reloadNode: function(rc) {
return this.each(function(){
if(!this.grid || !this.p.treeGrid) {return;}
var rid = this.p.localReader.id;
$(this).jqGrid("delChildren", rc[rid]);
var expanded = this.p.treeReader.expanded_field,
parent = this.p.treeReader.parent_id_field,
loaded = this.p.treeReader.loaded,
level = this.p.treeReader.level_field,
lft = this.p.treeReader.left_field,
rgt = this.p.treeReader.right_field;
var id = $.jgrid.getAccessor(rc,this.p.localReader.id);
var rc1 = $("#"+id,this.grid.bDiv)[0];
rc[expanded] = true;
$("div.treeclick",rc1).removeClass(this.p.treeIcons.plus+" tree-plus").addClass(this.p.treeIcons.minus+" tree-minus");
this.p.treeANode = rc1.rowIndex;
this.p.datatype = this.p.treedatatype;
if(this.p.treeGridModel == 'nested') {
$(this).jqGrid("setGridParam",{postData:{nodeid:id,n_left:rc[lft],n_right:rc[rgt],n_level:rc[level]}});
} else {
$(this).jqGrid("setGridParam",{postData:{nodeid:id,parentid:rc[parent],n_level:rc[level]}} );
}
$(this).trigger("reloadGrid");
rc[loaded] = true;
if(this.p.treeGridModel == 'nested') {
$(this).jqGrid("setGridParam",{postData:{nodeid:'',n_left:'',n_right:'',n_level:''}});
} else {
$(this).jqGrid("setGridParam",{postData:{nodeid:'',parentid:'',n_level:''}});
}
});
},
This is the same as expandNode() save for that it does not check if the node was expanded to begin with, and forces it to send an AJAX request for the child elements of that node. This way, we always have the latest children.
Finally, we fixed a small bug in getRowData(), which prevented us from using it to supply the record argument to either expandNode() or our newly created reloadNode(). The issue was that the _id_ field in the JSON return was never created or filled. Adding that in fixed both expandNode() and reloadNode() The following is the changed source. Not ideal, but it works.
getRowData : function( rowid ) {
var res = {}, resall, getall=false, len, j=0;
this.each(function(){
var $t = this,nm,ind;
if(typeof(rowid) == 'undefined') {
getall = true;
resall = [];
len = $t.rows.length;
} else {
ind = $t.rows.namedItem(rowid);
if(!ind) { return res; }
len = 2;
}
while(j<len){
if(getall) { ind = $t.rows[j]; }
if( $(ind).hasClass('jqgrow') ) {
$('td',ind).each( function(i) {
nm = $t.p.colModel[i].name;
if ( nm !== 'cb' && nm !== 'subgrid' && nm !== 'rn') {
if($t.p.treeGrid===true && nm == $t.p.ExpandColumn) {
res[nm] = $.jgrid.htmlDecode($("span:first",this).html());
} else {
if($t.p.colModel[i].key != undefined && $t.p.colModel[i].key == true)
{
try {
res["_" + nm + "_"] = $.unformat(this,{rowId:ind.id, colModel:$t.p.colModel[i]},i);
} catch (e){
res["_" + nm + "_"] = $.jgrid.htmlDecode($(this).html());
}
}
try {
res[nm] = $.unformat(this,{rowId:ind.id, colModel:$t.p.colModel[i]},i);
} catch (e){
res[nm] = $.jgrid.htmlDecode($(this).html());
}
}
}
});
if(getall) { resall.push(res); res={}; }
}
j++;
}
});
return resall ? resall: res;
},
Finally, we pull this all together as follows, with a JSON return object from creating a folder such as
{{"id":"1267", "name":"test15", "uri":"sample1\/test15\/", "parent_id":1, "parent":1, "isLeaf":false}
We call the function like
var parentid = ret.rows[0].parent;
var parent = grid.jqGrid('getRowData', parentid);
grid.jqGrid('reloadNode', parent);
The functions will delete all the child nodes of parent, then send an AJAX request for the new, updated list from the database. I'm going to push this onto the jqGrid Github if possible, since a reload function maybe useful for many people. I've posted it in here in case it isn't approved.