Slickgrid sorting a hierarchy - sorting

I have created a slickgrid hierarchy that has only 2 levels. The implementation of the hierarchy follow example 5 (https://6pac.github.io/SlickGrid/examples/example5-collapsing.html). I am using the following fork - http://6pac.github.io/SlickGrid. I want to sort only by the first level and have the children be in the same order. I tried adding the sortable property to the column, but that did not do anything. Any pointers on how to do this, I have no idea where to begin. As always many thanks in advance.

There's couple thing to note about that example you are referencing.
You're on your own in regards to sorting the data in that Example, in short it means you'll have to add your own sorting functions and you'll end up with have to create a lot recursive functions (because hierarchical data is only sortable through recursion)
It would be better to have pre-built to do that kind of work and since I needed that as well, I started a feature change that will eventually be merged into the 6pac/SlickGrid fork, I briefly talk about it in this issue post where you can see an animated gif. But never got time to finish it and I'm also waiting for someone's help to finish it. Unless we merge it has is
The feature I started is this Example from my fork which will eventually be merged. You could use that code and it should work, but you would also require a new SlickGrid Plugin that we created plugins/slick.treeData.js with some helpers for the recursion stuff (remember that sorting tree data with hierarchy requires you to use recursion, fun time that is... if you like pulling your hair)
Or the final option would be to use my other lib Slickgrid-Universal which is a wrapper on top of SlickGrid (so it uses the 6pac/SlickGrid fork and is a dependency). This new lib that I created is framework agnostic (it could be used in any framework) and the sample is written in plain TypeScript (or JavaScript is you wish), there's 2 sample for hierarchical dataset Tree Data with parentId references and Tree Data with hierarchical dataset
what I wanted to add eventually in my lib is to support the SlickGrid built-in Aggregators but never got time to finish it (that is actually the same thing blocking option 2 that I wrote on top).
If you're using other frameworks, I also created 2 other libs Angular-Slickgrid and Aurelia-Slickgrid which have the same feature set as option 3.
So pick your choice from the list, it's not an easy one to work with but these are the current options, obviously the option 1 is the hardest since option 2-3 basically means that I did the work of option 1 already.
The option 2 can be seen in this animated gif

Related

d3/cola: Layout configuration for UML-like diagram

I am trying to build a graphql schema visualizer using something other than viz.js (the library is too large and adds 1MB to the bundle). I was recommended webcola and it seems to be a very powerful library.
I have gotten to a point where the necessary elements are being rendered and linked correctly. My next step is to get the layout right. I would like to do something similar to graphql-voyager (uses viz.js).
Here is a codesandbox of what I have so far:
graphql-diagram
EDIT: My question is, how could I lay out what I have similarly to graphql-voyager? I would like help setting the right constraints and applying whichever algorithm necessary to position the nodes and routing the edges accordingly.
GraphQL Voyager author here :)
Before switching to viz.js we tried lots of other possible solutions for almost a month. Here is the article about our journey: https://medium.freecodecamp.org/how-we-got-1-500-github-stars-by-mixing-time-tested-technology-with-a-fresh-ui-b310551cba22
TL;DR; Graph drawing is rocket-science
Moreover, since Voyager release (2 years ago), we evaluated even more libraries with the exact same result.
As a side project, we are working on the Graphviz fork aggressively shrunk to just meet Voyager requirements. Our end goal is to rewrite the required parts in pure JS and embed it directly into Voyager.
ATM it's in early PoC stage and we are not ready to release it yet.

How can I query kendo trees and MVVM models?

According to the docs I should be able to do this ...
$("#tree").data("kendoTreeView").expand(".k-item");
Great if i want to expand everything, but what if i only want to expand nodes where the property "expanded" in my model items is set to true?
Is there a way i can query the tree based on something in the model then perform an action on all results?
The real answer here is quite long, the short version being as with everything kendo, spend hours with support to be given half the solution and told to write the rest yourself.
I got round this problem by using another library (jslinq) to query the model data.
This is yet another frustrating issue with kendo that really should at the very least be offered as a core part of the heirarchy data source at some basic level (essentially an incomplete implementation).

Shorter link urls in Wicket

I am creating an application with a lot of links. Because the links are contained in cells in a table, the urls that are generated by Wicket tend to get long, making the page slower to load.
For example:
2011-06-09 00:00:00.0
I try to figure out where to start exploring the encoding / decoding of URLs, but it is rather complex material. My first approach was to just use 'short' names for components (like "t", "f" etc). I can imagine there is a better approach.
I can image it would be possible just to 'number' the links; as the page still exists, so I would end up with something like this:
2011-06-09 00:00:00.0
Are there solutions for my problem already out there, or can anyone point me to the right direction?
If a Javascript solution is acceptable, you can use a single event listener on the whole table instead of many links in the table.
See this example for an inspiration:
https://github.com/svenmeier/apachecon-wicket/tree/master/src/main/java/eu/apachecon/base/ui/performance
Notice how the Ajax behavior transports dynamic extra parameters to the server. It looks for rows only though. if you need to distinguish between table cells being clicked, you'll have to expand on the idea.
The solution suggested by Sven is the better solution.
Here is a solution which you may call fundamental: register your own root IRequestMapper that will compress/uncompress the generated urls by the real mappers. See CryptoMapper and HttpsMapper for example of custom root mapper.

Codeigniter pagination

I need two paginations on one page, is it possible to do this with codeigniter?!? Of course they must operate independently of one another.
Yes and no. If you want two different pagination visuals (customized renderings of the library) then sure. The problem you'll run into is by default the pagination library will pull the current page out of your $ci->uri->segments() list automatically to determine which page to mark as "active".
I do not know of a way to explicitly override this. Perhaps if you made a MY_Pagination that took an additional $config value for current page you could get it to behave like that. I haven't looked at the library's code in a while so you'd have to do some digging.
Honestly though, I'd suggest you build your own, it's not incredibly hard to do some simple math to determine what numbers to link.
Also you'll run into issues with CI's Pagination Library if you want the "current page" part to be NOT the last segment in your url. This may have been fixed lately but last time I looked it was the stop-gap for me using the library all together.
Bottom Line Invest the time in making your own if you want more than it's basic functionality, it's simple enough, just make yours reusable if you can.

Verify sorting in Selenium

Has anyone tested sorting with Selenium? I'd like to verify that sorting a table in different ways work (a-z, z-a, state, date, etc.). Any help would be very much appreciated.
/Göran
Before checking it with selenium, You have to do small thing. Store the table values(which comes after sorting) in a string or array.
Now perform the sorting using selenium and capture the new list as
string new_list= selenium.gettable("xpath");
Now compare both the values and check whether they are same or not.
I have shared a strategy to test sorting feature of an application on my blog. You can use this to automate test cases that verify the sorting feature of an application. You could use it on place like the search result page, item listing and report module of the application. The strategy explained does not require creation of test data and is fully scalable.
You can get value of fields like this:
//div[#id='sortResult']/div[1]/div (this'd be row 1 of the search result)
//div[#id='sortResult']/div[2]/div ( row 2)
(I'm making some assumptions about the HTML structure here, but you get my drift...)
These can be quite fragile assertions, I'd recommend you anchor these xpath references to an outer container element (not the root of your document, as lots of "automatic" tools do).
When you click sort, the value changes. You'll have to find out what the values are supposed to be.
Also watch out for browser compatibility with such xpaths. They're not always ;)
The way I approached this was to define the expected sorted results as an array and then iterate over the results returned from the sorted page to make sure they met my expectations.
It's a little slow, but it does work. (We actually managed to find a few low-level sorting defects on multiple pages this way..)
You could use the WebDriver API from Selenium 2.0 (currently in alpha) to return an array of elements with the findElements command before and after the sort. This becomes a bit more difficult however if what you're sorting is paginated.

Resources