How to loaded ExtJS TreePanel from database table column2 as a ChildNode - oracle

`My oracle database and getting Tree-panel :
Now I would like to display database table from column2 asa each
Parent Node as Child Node please let me know how could I make it also
my Json Data I am getting result like that please let me know how could I get child node ?
My Expected result like :
This is the JSON data :
[{
"id":1,"reportTreeType":0,"text":"Root","reportType":null,"reportUrl":"", "hidden":false,
"children":[{
"id":5,"reportTreeType":0,"text":"Hardware","reportT‌​ype":"HardReport","reportUrl":"","hidden":false,"children":[], "leaf":false,"dirName":"","href":"","reportId":0,"qtip":""}]
I have tried ExtJS Tree-Panel below like but I am getting from table-1 column1 parent node not getting column2 child nodes ?
Ext
.onReady(function() {
var tree = new Ext.tree.TreePanel(
{id : 'treePanel',
el : 'tree-div',
useArrows : true,
title : 'Export',
autoScroll : true,
width : 250,
region : 'west',
animate : true,
enableDD : true,
containerScroll : true,
enableKeyEvents : true,
collapsible : true,
split : true,
rootVisible : false,
border : false,
// auto create TreeLoader
dataUrl :'<c:url value="/customize/ExportReport.do?method=getExport"/>',
root : {
nodeType : 'async',
text : 'Root',
draggable : false,
id : '-1',
expanded:true,
//here Children node I cannot able to rendered where I have made mistake ?
children:[{
text: reportT‌​ype, //TreeNode Java class variable
leaf: true }]
}
} }); });

If I understand well, you would like that Hardware is a child of Root and HardReport a child of Hardware.
I think there is no direct solution in ExtJs.
you change your backend to send the correct data
you have to manually parse the JSON
you load the data in a first tree store, and then you build a second tree store by looping through the first.

Related

Angular 9 material show the mat card as parent and child as graph

I am new to angular 9. I want show the mat-cards as parent and child with graph. Below is the data
[
{ "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
{ "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
{ "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
{ "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
]
Based on the below picture i have to show the mat-card with graphical view
Is there any npm package available? Or is it possible show like this? i tried with swimlane but i can't.
To render flat data as a hierarchy you can use component recursion. Each node will render all its children, which will render the next level of children, etc.
Because there are multiple root nodes, start by having the container component render each top-level item:
get rootNodes(): TreeNode[] {
return this.nodes.filter(node => node.parent === '#');
}
<app-tree *ngFor="let node of rootNodes"
[nodes]="nodes"
[nodeId]="node.id">
</app-tree>
Then each of those components will render any child nodes using the same component. Because the data is flat, we pass all the list items to each tree component and let that component sort out which items to render.
#Component({
selector: 'app-tree',
...
})
export class TreeComponent {
#Input() nodes: TreeNode[];
#Input() nodeId: string;
get childNodes(): TreeNode[] {
return this.nodes.filter(node => node.parent === this.nodeId);
}
}
<!-- Render the item itself, e.g. using a mat-card -->
<h1>{{nodeId}}</h1>
<!-- Render each child -->
<app-tree *ngFor="let childNode of childNodes"
[nodes]="nodes"
[nodeId]="childNode.id">
</app-tree>
Representing the hierarchy is then a matter of styling, such as using padding to indent each level.
Also, if your data changes after the initial render you may want to use the *ngFor trackBy to reduce the required DOM changes.
Demo StackBlitz

Paging does not work in JqGrid

I am using jQGrid Latest version in my project.following is complete configuration that i configured.
jQuery("#list").jqGrid( {
url : 'Link.do?method=findAllBrand',
mtype : 'GET',
height : 350,
datatype : "xml",
colNames : [ 'Name' ],
colModel : [ {
name : 'name',
index : 'name',
width : 620
} ],
rowNum : 10,
rowList : [ 10, 20, 30 ],
sortname : 'id',
sortorder : "desc",
viewrecords : true,
multiselect : true,
imgpath : 'themes/base/images',
caption : "Brand (s) Summary Grid",
pager : #pager,
cache : false,
onSelectRow : function(id) {
}
});
I am getting following data in form of xml from server :
<?xml version="1.0" encoding="UTF-8" standalone="yes"?><rows><page>1</page><total>4</total><records>75</records><row id="BRD00005"><cell>AEG</cell></row><row id="BRD00010"><cell>ARC</cell></row><row id="BRD00006"><cell>Aga</cell></row><row id="BRD00007"><cell>Allenzi </cell></row><row id="BRD00008"><cell>Amana</cell></row><row id="BRD00009"><cell>Andi</cell></row><row id="BRD00011"><cell>Arda</cell></row><row id="BRD00012"><cell>Ariston</cell></row><row id="BRD00013"><cell>Asko</cell></row><row id="BRD00014"><cell>Baumatic</cell></row><row id="BRD00015"><cell>Bendix</cell></row><row id="BRD00003"><cell>Blanco</cell></row><row id="BRD00001"><cell>Bosch</cell></row><row id="BRD00004"><cell>Chef</cell></row><row id="BRD00016"><cell>Damani</cell></row><row id="BRD00017"><cell>Davell</cell></row><row id="BRD00018"><cell>Delonghi</cell></row><row id="BRD00019"><cell>Dishlex</cell></row><row id="BRD00020"><cell>Electrolux</cell></row><row id="BRD00021"><cell>Emilia</cell></row><row id="BRD00022"><cell>Euro</cell></row><row id="BRD00023"><cell>Eurolec</cell></row><row id="BRD00024"><cell>Euromaid</cell></row><row id="BRD00002"><cell>F&P</cell></row><row id="BRD00027"><cell>FP</cell></row><row id="BRD00025"><cell>Fagor</cell></row><row id="BRD00026"><cell>Fisher And Paykel</cell></row><row id="BRD00028"><cell>Franke</cell></row><row id="BRD00030"><cell>GE</cell></row><row id="BRD00034"><cell>GVA</cell></row><row id="BRD00029"><cell>Gaggenau</cell></row><row id="BRD00031"><cell>Glem </cell></row><row id="BRD00032"><cell>Glem Gas</cell></row><row id="BRD00033"><cell>Glemgas</cell></row><row id="BRD00035"><cell>Haier</cell></row><row id="BRD00036"><cell>Hisense </cell></row><row id="BRD00037"><cell>Hitachi</cell></row><row id="BRD00038"><cell>Hoover</cell></row><row id="BRD00039"><cell>Hotpoint</cell></row><row id="BRD00040"><cell>IAG</cell></row><row id="BRD00041"><cell>Ilve</cell></row><row id="BRD00042"><cell>Indesit</cell></row><row id="BRD00043"><cell>Jenn Air</cell></row><row id="BRD00044"><cell>Kelvinator </cell></row><row id="BRD00045"><cell>Kleenmaid</cell></row><row id="BRD00047"><cell>LG</cell></row><row id="BRD00046"><cell>La Germania</cell></row><row id="BRD00048"><cell>Liebherr</cell></row><row id="BRD00049"><cell>Linea</cell></row><row id="BRD00050"><cell>Lofra</cell></row><row id="BRD00051"><cell>Maytag</cell></row><row id="BRD00052"><cell>Midea</cell></row><row id="BRD00053"><cell>Miele</cell></row><row id="BRD00054"><cell>NEC</cell></row><row id="BRD00055"><cell>Neff</cell></row><row id="BRD00056"><cell>Nobel</cell></row><row id="BRD00057"><cell>Omega</cell></row><row id="BRD00058"><cell>Onix</cell></row><row id="BRD00059"><cell>Panasonic </cell></row><row id="BRD00060"><cell>Robinhood</cell></row><row id="BRD00061"><cell>Sagi</cell></row><row id="BRD00062"><cell>Samsung</cell></row><row id="BRD00063"><cell>Seimen </cell></row><row id="BRD00064"><cell>Sharp</cell></row><row id="BRD00065"><cell>Simpson</cell></row><row id="BRD00066"><cell>Smeg</cell></row><row id="BRD00067"><cell>St George</cell></row><row id="BRD00068"><cell>Technika</cell></row><row id="BRD00069"><cell>Techno</cell></row><row id="BRD00070"><cell>Technogas</cell></row><row id="BRD00071"><cell>Teka</cell></row><row id="BRD00072"><cell>Thor</cell></row><row id="BRD00073"><cell>Vintec</cell></row><row id="BRD00074"><cell>Westinghouse</cell></row><row id="BRD00075"><cell>Whirlpool</cell></row></rows>
I have modified the pager parameter as suggested by user Oleg in the other post.but still the pager is not working as expected. initially it shows only the 10 data of the record , when i click on next it does nothing.
what did i do wrong
Thank You
Mihir Parekh
The value of pager option must be quoted: pager : "#pager". You use datatype: "xml" without loadonce: true. In the case your server (url : 'Link.do?method=findAllBrand') is responsible for paging and sorting. If the user click on the next page new request to the server with the corresponding parameters page=2.
Typically the server should return the number of items which corresponds page and rows parameters. The XML response contains much more items. I suppose that the server returns all items independent from the requested page. In the case you should include loadonce: true. In the case the client code (JavaScript code of jqGrid) will do paging and sorting for you. If you use loadonce: true option you can remove the part
<page>1</page><total>4</total><records>75</records>
from the XML data returned from the server.
Additionally I would recommend you to consider to change to use JSON instead of XML whenever it's possible. In the case you could reduce the representation of items like
<rows>
<row id="BRD00022"><cell>Euro</cell></row>
<row id="BRD00002"><cell>F&P</cell></row>
<row id="BRD00026"><cell>Fisher And Paykel</cell></row>
</rows>
to
[["Euro","BRD00022"],["F&P","BRD00002"],["Fisher And Paykel","BRD00026"]]
So you can reduce the size of transferred data.
Additionally, like I wrote you in the comment to your previous question, you should replace sortname : 'id' to sortname : 'name' bacsue your grid don't have the column with the name "id". The option sortorder : "desc" should be probably removed.
You should remove deprecated option imgpath and remove option cache which not exist in jqGrid too. Instead of that I strictly recommend you to add gridview: true option and autoencode: true. If you use autoencode: true you will don't need to use HTML encoding (converting F&P to F&P on the server side).
UPDATED: The demo demonstrate how the grid could looks like:
I included toolbar filter and advanced searching in the grid to show how easy one can implement the features if one uses loadonce: true.

XML Not well formed in Firefox getting xml response from server

I am using jQGrid Latest version in my project.following is complete configuration that i configured.
jQuery("#list").jqGrid( {
url : 'Link.do?method=findAllBrand',
mtype : 'GET',
height : 350,
datatype : "xml",
colNames : [ 'Name' ],
colModel : [ {
name : 'name',
index : 'name',
width : 620
} ],
rowNum : 10,
rowList : [ 10, 20, 30 ],
sortname : 'id',
sortorder : "desc",
viewrecords : true,
multiselect : true,
imgpath : 'themes/base/images',
caption : "Brand (s) Summary Grid",
pager : $('#pager'),
cache : false,
onSelectRow : function(id) {
}
});
I am getting following data in form of xml from server :
<?xml version="1.0" encoding="UTF-8" standalone="yes"?><rows><page>1</page><total>1</total><records>4</records><row id="BRD00003"><cell>Blanco</cell></row><row id="BRD00001"><cell>Bosch</cell></row><row id="BRD00004"><cell>Chef</cell></row><row id="BRD00002"><cell>F&P</cell></row></rows>
i know that in the last cell of last row is creating problem , because it contains & char which has special meaning in the xml. however i have escaped sequence the whole xml using Apache commons lang library using below function.
toXml = StringEscapeUtils.escapeXml(toXml);
and the resulting string is
<?xml version="1.0" encoding="UTF-8" standalone="yes"?><rows><page>1</page><total>1</total><records>4</records><row id="BRD00003"><cell>Blanco</cell></row><row id="BRD00001"><cell>Bosch</cell></row><row id="BRD00004"><cell>Chef</cell></row><row id="BRD00002"><cell>F&P</cell></row></rows>
still i got the same error in Mozilla firefox latest version and in chrome , ie 7,8 also.
I have to show you this special characters in the gird so how can i solve this problem ?
Thank You
Mihir Parekh
i am generating the xml from server side.
Then escape each text node and each attribute value separately, it's all simple as that.
I recommend you to use JSON format instead of XML whenever it's possible.
If you do need to use XML and you need to place some general values in XML you need use CDATA construct (<![CDATA["some common text"]]>).
Additionally I would recommend you to use autoencode: true as your standard jqGrid options. In the case you will be able to place any text in jqGrid cells. jqGrid will do the encoding of all characters which have special meaning for HTML.

YUI3 datatable not rendering data when using Plugin.DataTableDataSource with JSON

I've been trying, unsuccessfully, to get a yui3 datatable to correctly populate via a json call. I am flummoxed and hope someone can show me the error of my ways. No matter what I have tried I just get "No data to display".
When I run wireshark during the page load I am seeing the json data returned from the ajax call. So I think I have the data source bound to the data table correctly. Note that the data records I am interested in are nested with metadata and it appears my DataSourceJSONSchema definition is correct.
Here is the http response from the ajax call.
YUI.Env.DataSource.callbacks.yui_3_6_0_1_1346868215546_114({
"recordsReturned":4,"startIndex":0,"dir":"asc","pageSize":10,
"records":[
{"id":"48ee0540-ebd7-11e1-33e-c33ce39c9e", "email":"jim#example.com","name":"James"},
{"id":"1447ea60-eca2-11e1-33e-f6c33ce39c9e", "email":"john#example.com","name":"John"},
{"id":"48ff6a60-ebd7-11e1-a33e-f6c33ce39c9e", "email":"ryan#example.com","name":"Ryan"},
{"id":"1a298060-f774-11e1-ad38-f6c33ce39c9e", "email":"vincent#example.com","name":"Vince"}]})
Here is the html page.
<script type="text/javascript">
YUI({
lang : "en-US"
})
.use("datatable","datatype","datasource",function(Y) {
var ajaxData;
function ajaxSuccess(e) {
ajaxData = e.data;
}
}
function ajaxFailure(e) {
Y.log("failure");
}
var myDataSource = new Y.DataSource.Get({
source : "/actions/User.action?getAjaxUserList=&"
});
myDataSource.plug(Y.Plugin.DataSourceJSONSchema,{
schema : {
metaFields : {
recordsReturned : "recordsReturned",
startIndex : "startIndex",
dir : "dir",
pageSize : "pageSize"
},
resultsListLocator : "records",
resultFields : [ {
key : 'id'}, {
key : 'email'},{
key : 'name' }}});
var table = new Y.DataTable({
columns : [ {
key : "id",
label : "ID"
}, {
key : "name",
label : "Name"}, {
key : "email",
label : "Email"} ],
caption : "My first DataTable!",
summary : "Example DataTable showing basic instantiation configuration"
});
table.plug(Y.Plugin.DataTableDataSource, {datasource : myDataSource});
table.render('#dynamicdata');
table.datasource.load({request : encodeURIComponent('fred=steve')});
});
</script>
<div id="dynamicdata"></div>
I noticed several syntax error on the code you give here :
The function(Y) callback is closed too soon for example.
I think your error is due to the fact that you set in the schema of your Datasource the property "resultsListLocator" instead of "resultListLocator".

Upsert Multiple Records with MongoDb

I'm trying to get MongoDB to upsert multiple records with the following query, ultimately using MongoMapper and the Mongo ruby driver.
db.foo.update({event_id: { $in: [1,2]}}, {$inc: {visit:1}}, true, true)
This works fine if all the records exist, but does not create new records for records that do not exist. The following command has the desired effect from the shell, but is probably not ideal from the ruby driver.
[1,2].forEach(function(id) {db.foo.update({event_id: id}, {$inc: {visit:1}}, true, true) });
I could loop through each id I want to insert from within ruby, but that would necessitate a trip to the database for each item. Is there a way to upsert multiple items from the ruby driver with only a single trip to the database? What's the best practice here? Using mongomapper and the ruby driver, is there a way to send multiple updates in a single batch, generating something like the following?
db.foo.update({event_id: 1}, {$inc: {visit:1}}, true); db.foo.update({event_id: 2}, {$inc: {visit:1}}, true);
Sample Data:
Desired data after command if two records exist.
{ "_id" : ObjectId("4d6babbac0d8bb8238d02099"), "event_id" : 1, "visit" : 11 }
{ "_id" : ObjectId("4d6baf56c0d8bb8238d0209a"), "event_id" : 2, "visit" : 2 }
Actual data after command if two records exist.
{ "_id" : ObjectId("4d6babbac0d8bb8238d02099"), "event_id" : 1, "visit" : 11 }
{ "_id" : ObjectId("4d6baf56c0d8bb8238d0209a"), "event_id" : 2, "visit" : 2 }
Desired data after command if only the record with event_id 1 exists.
{ "_id" : ObjectId("4d6babbac0d8bb8238d02099"), "event_id" : 1, "visit" : 2 }
{ "_id" : ObjectId("4d6baf56c0d8bb8238d0209a"), "event_id" : 2, "visit" : 1 }
Actual data after command if only the record with event_id 1 exists.
{ "_id" : ObjectId("4d6babbac0d8bb8238d02099"), "event_id" : 1, "visit" : 2 }
This - correctly - will not insert any records with event_id 1 or 2 if they do not already exist
db.foo.update({event_id: { $in: [1,2]}}, {$inc: {visit:1}}, true, true)
This is because the objNew part of the query (see http://www.mongodb.org/display/DOCS/Updating#Updating-UpsertswithModifiers) does not have a value for field event_id. As a result, you will need at least X+1 trips to the database, where X is the number of event_ids, to ensure that you insert a record if one does not exist for a particular event_id (the +1 comes from the query above, which increases the visits counter for existing records). To say it in a different way, how does MongoDB know you want to use value 2 for the event_id and not 1? And why not 6?
W.r.t. batch insertion with ruby, I think it is possible as the following link suggests - although I've only used the Java driver: Batch insert/update using Mongoid?
What you are after is the Find and Modify command with the upsert option set to true. See the example from the Mongo test suite (same one linked to in the Find and Modify docs) for an example that looks very much like what you describe in your question.
I found a way to do this using the eval operator for server-side code execution. Here is the code snippit:
def batchpush(body, item_opts = {})
#batch << {
:body => body,
:duplicate_key => item_opts[:duplicate_key] || Mongo::Dequeue.generate_duplicate_key(body),
:priority => item_opts[:priority] || #config[:default_priority]
}
end
def batchprocess()
js = %Q|
function(batch) {
var nowutc = new Date();
var ret = [];
for(i in batch){
e = batch[i];
//ret.push(e);
var query = {
'duplicate_key': e.duplicate_key,
'complete': false,
'locked_at': null
};
var object = {
'$set': {
'body': e.body,
'inserted_at': nowutc,
'complete': false,
'locked_till': null,
'completed_at': null,
'priority': e.priority,
'duplicate_key': e.duplicate_key,
'completecount': 0
},
'$inc': {'count': 1}
};
db.#{collection.name}.update(query, object, true);
}
return ret;
}
|
cmd = BSON::OrderedHash.new
cmd['$eval'] = js
cmd['args'] = [#batch]
cmd['nolock'] = true
result = collection.db.command(cmd)
#batch.clear
#pp result
end
Multiple items are added with batchpush(), and then batchprocess() is called. The data is sent as an array, and the commands are all executed. This code is used in the MongoDequeue GEM, in this file.
Only one request is made, and all the upserts happen server-side.

Resources