Slickgrid tree view - slickgrid

I am new to UI development. I am working on a project which already uses slickgrid for displaying reports. My project uses SlickGrid v1.4. I want modify the current reports and implement tree view in the reports. I am passing the parent for each element from backend to UI.
Questions:
Do I need to upgrade slickgrid to its latest version. If yes then is it backward compatible?
How can I implement this parent child relationship in slickgrid, like what properties that I will be using?
Let me know if you need more details on this.
Thanks

If you are referring to the javascript slickgrid, then you need to specifically look at this example of slickgrid
https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example5-collapsing.html
This is an implementation rather than a feature so any version should be fine. So yes better go with latest if possible.
Its just an implementation of tree view using indents. Its different from other libraries where they have specific views for tree structure.
What you should do on the backend is, send an array with list of items to the frontend. the data item should have 2 attributes parent and level.
The parent will be null for root and level 0. if an item is child of some parent. The level of child will be 1 and parent 0 (index of array). (as implemented in slickgrid)
Please note parent value can be anything based on your data. For example a hierarchy of categories.
var item1 = {id: "id_1", category:"cat1" parent: null, }
var item2 = {id: "id_2", parent: "cat1"};
So the level attribute shows the depth of current item in the hierarchy.
The slick grid in the example uses the level value to put indents or spaces.
You can either use the same logic or may be apply specific css3 classes based on the level and customize according to your needs.
.class[level=0] {}
So slick grid is flexible that way. You just need the data in a particular format.
One important thing is the array of items should already be sorted by the field and level for this to work.
Some databases like Oracle already provide you options like connect by prior to get data in this format. there is a reserved keyword level which can be added as a column name.
Also this is assuming that you table is already designed in a way to represent hierarchal structure.
SELECT category_id, cat_name, cat_parent_id, LEVEL
FROM categories
CONNECT BY PRIOR category_id = cat_parent_id;
You can also fetch data from a specified root
START WITH category_id = 5

Related

ADF filter table based on tree selection

How to filter Oracle ADF table contents based on tree selection?
Bindings:
So the table always renders as if the first item would be selected in the tree, but when I click on some other VariablePoint, the table does not change:
UPDATE
Based on the answers, I was able to configure the following, and it solved the problem:
I made an iterator for every tree level rule and used them as Target Data Source for each tree/tree level rule.
ADF trees may look somewhat misleading, but they don't actually reflect the data controls (iterators) that your've created in your application module. Trees work on view links accessors. That's why when you select a tree node, iterators don't get any changes.
If you want to see your accessors in your Model project open a view link between any two adjacent view objects used in your hierarchy. In Relationship - Accessors - Destination you will see Accessor Name parameter. Its value would be the name of lower tree level. The same name you will see in your pageDef tree binding in Tree Level Rules section for appropriate level.
So even if you delete all iterators but OrgView1Iterator from your application module data control, your tree would still function (not speaking about table to the right at the moment).
Now to make your case work.
In your application module data control you will only need this hierarchy:
OrgView1
VariablePointViewOrgZoneVariable
VariablePointViewOrgZoneVariableVariablePoint
OrgView1 and VariablePointViewOrgZoneVariable are at root level. VariablePointViewOrgZoneVariableVariablePoint is a child of VariablePointViewOrgZoneVariable.
All current children of OrgView1 should be removed from data control.
In your page binding in Executables section click green plus and add VariablePointViewOrgZoneVariable iterator (say, VariablePointViewOrgZoneVariable1Iterator).
In your Executables there should be 3 iterators: OrgView1Iterator, VariableDataView1Iterator and VariablePointViewOrgZoneVariable1Iterator.
The key part of filtration is Target Data Source attribute. You can find it in your tree binding.
In your page binding in Bindings section double click on OrgView1. In tree level rules select VariablePointViewOrgZoneVariable tree and disclose Target Data Source at the bottom.
Click EL Picker, select VariablePointViewOrgZoneVariable1Iterator and OK.
The result should be ${bindings.VariablePointViewOrgZoneVariable1Iterator}.
On your page set table's partialTrigger attribute to point to the tree.
After you restart your page filtration should work.
I've made a small example showing your case.
Follow instructions and you can run it on your computer or just read through readme. It also applies selection to the last tree level, which you may not need.
https://github.com/ILyaCyclone/adf-tree-to-table-filterandselect

Oracle APEX Navigation List Child Objects

I have a schema with two tables: a parent table and a child table. The parent table has an ID and a varchar column. The child table has an ID, parentID, and varchar column.
I want a page that displays all the varchar's in the parent table as a navigation list. When a link is clicked, it displays a page with a navigation list containing all the child items under that parent id. I'd like to be able to do this for 'n' levels of parent-child, hopefully by defining a total of 'n' pages.
I've successfully created the first list of links on a single page, but I am not sure how to proceed with giving them the appropriate URL to the child page, or how to create a child page that accepts a parameter and uses it in the definition of the subsequent list query.
In Oracle APEX, every page is defined at design time. This means that the developer chooses how many pages exist while he is developing. What it sounds like you are trying to do, is create pages dynamically, i.e. generate new page numbers on the fly. This is not possible.
However, I do not think that it is necessary to create new pages. It will probably suffice to have a limited number of pages, which simply pass the ID of the record your page is based on as a parameter. If you create a page item on a page, you can set the value of that item by specifying it in the URL you are directing to. You can find more information about APEX URLs here: Understanding URL Syntax.
After you've got that down, you can use the value of the page item on the page you landed on to generate the sub-list by fetching all the child records from the database and creating links for them. To generate the navigation list, I recommend using Lists in your shared components. Go to shared components > Lists > Create > From scratch and then choose to create a dynamic list. In the query you provide here, you can simply reference the page item id (e.g. :P1_RECORD_ID), to get the children of that ID and generate the list items accordingly.
I hope this gets you started. Of course this is just the beginning. If you have any more questions, please expand on your original question.

Need guidance or ideas on database design for Web Page Select drop down boxes

I'm working with the IBM BPM application, which is essentially building web pages that users interact with. I have (dojo) combo select boxes where they select options from a dropdown list. The choices are being populated from ajax calls to the server which basically return a list of name/value pairs or strings. I created a database to store the choices, but I could not find a good example of the best way to design a table to store values like this. It works good for drop down options that are not related. I have columns for "option group", "option name", "option value", which lets me store groups of options for each dropdown.
The issue we're running into with this design now is what happens when you have 3 dropdowns, each dependent on the previous selection. Option 1 is populated fine from this table, then when you choose a value, it's used to query the table for Option 2 choices. It starts to grow exponentially when a new Option 3 is added, because you have to add a row for each Option 2 choice also.
I'm also wondering if using a database is really the best solution for this or if we should be using external files somehow. I would say that the options are not actually going to change that often, but I also do not want to have to redeploy code or files just to add a new choice for users to choose.
This sounds like a job for recursion to iterate a parent child design. In the database, you could add a column for parentId which maps to the id for its parent. At the root node level the parentId will equal 0. Then you can run a recursive method to navigate your 'tree structure' from database. Below is a rudimentary recursive method that might provide insight.
private void myTest(int optionId, List<Option> optionList) {
OptionAction optionAction = new OptionAction(); // access DAO to retrieve options
Option option = optionAction.getOption(optionId);
if (option.getParentId() == 0) {
return;
} else {
optionList.add(option);
myTest(option.getParentId(), optionList);
}
}
Logan, the previous answer is a good one, but to answer your follow-up comment/question: You can set up the parentId column is nullable meaning "can be null". So you can have a single data-store to house the object definitions you need to service both kinds of uses. You can probably do all this in a single table, keeping it self-contained and simple. How you write the code that MANAGES the contents of the table is another thing, but shouldn't pose any big issues. Good luck :)

Sorting by column in an XPages view data source

I have a dynamic view control (my own) which is fed by a configurable view data source. I need to be able to sort the view by various columns. Is there a way to do it with the view data source or do I need to roll my own? Thanks for the help.
For efficiency reasons, sorting should be handled by the domino runtime. The view must have the right columns either tagged as sorted or sortable by user. This creates the indexes within the NSF.
Then, the data source has some properties to control with sort index in being used, based on the name of the column you want to sort. The extlib DataView controls shows how this can be done in Java, through a JSF DataModel.
Also, you might consider using the DynamicViewpanel from the extlib/up1, as it does all of this for you.

how to bind telerik tree view to multple level stored procedures

I currently have a 2 level tree view that displays departments and then assets within those departments. To do this I am using a sql stored procedure to prepare the data. See the attatched file to see the output of this stored procedure.
I am wondering how to go about adding in another level. IE I want to have a tree view that started with SITE's that have Departments which have Assets. IE I want to add a grand parent to the tree view.
What would the sql look like for this.
I think you will have to modify the parentId values for the current root records and leave the SITE record solely with NULL parentId while the present six roots should have parent id which points to the SITE grand parent.

Resources