I have got a set of data that goes by hierarchy. For argument sake, let's say this is the top level:
The user should be able to drill down on one of the boxes to explore the data. When clicked, the user sees the second level of data:
Alternatively, the second level of data can totally cover the first level (but have a breadcrumb that shows the drill down journey):
I am hoping to be able to implement such visualisation tool on ASP.net (i.e. web). Does anyone have a suggestion on a suitable JS / extension plugin?
Thank you kindly.
You can use jsTree jquery plugin. It gives very nice interactive UI in hierarchical level. It provides support like drag & drop support, inline edit, create and delete etc.
You can get it from https://www.jstree.com/. It is easy to use.
Related
I am trying to break a huge select box list into three columns and I was wondering if this is possible via display suite or any other module. The next solution is to create a web form but taking in account that I am not so experienced theming it it would be nice if I could have some reference.
What I have
What I'm trying to achieve
Thank you in advance
Solved it using Display Suite for the whole layout of the form as well as GentleSelect for the Category Selection. This is possible by just using Display Suite. I usedGentleSelect that gives a bit of better taste regarding the UI.
Hope this helps.
I am starting to build an app, using Meteor, that includes user-populated company profiles (including both financial data and text). I will be looking into a datafeed for public company information but much of the information for private companies will be user-populated.
I know I will need to create a form for the user to fill in so that the company information will be captured by the database. However, can I make this same form available to the user to both display the data and to allow them to edit the data in the future? Or do I need to build a separate view using tables for this purpose? My preference is the former, just one screen to create and edit as needed.
Any examples of similar instances would be very appreciated.
Thank you.
This is less of a meteor specific question, rather a general web technology question. Meteor can provide the data in the template of course, and it can offer events to process data and insert/update this to a database. This is the same as any underlying architecture. The question is really how to approach the problem with HTML & JavaScript.
A couple of potential methods:
Write your HTML to display the content in its non-editable form. Then provide an edit button to switch mode. When clicking this button switch on 'contenteditable' for the elements you wish to be edited: http://html5doctor.com/the-contenteditable-attribute/
Also reveal a save button, then process the event through meteor. Use selectors to extract the fields by referencing either designated class names, data attributes or name attributes. It would also be a good idea to alter the appearance of editable elements with a background or outline. The disadvantage here is that it's slightly non-standard and you may have the need for more complex data-types like dropdowns or checkboxes etc.
Create view with a standard form HTML. Style it in a way that shapes the information primarily for display rather than editing, eg. hide form field borders. Provide an edit button that when clicked alters the CSS and reveals form field borders, also reveal/replace elements which need more complex controls like dropdowns, perhaps turn on field labels too and of course a save button. The disadvantage is slightly more complex CSS and JavaScript.
I'm wanting to use Panels to drive a whole bunch of pages for data interaction, but I'm not sure how to get Panels to "interact" with each other. I think the best way to put it is with an example. Say I have one Panel which has a list of nodes (in a view?), and another Panel that I want to display an editor for any node I click. And I have a page that has the first Panel in a block on the left, and the second in a block on the right. So I suppose on click, there'd be some AJAX grab that puts some page in the other Panel. Now, this is a simple example, and I'm going to end up with many different sets of interactions among multiple panels doing all sorts of stuff. But this works as a starting point. The goal is to be able to reuse these Panels in multiple pages that may interact with similar data, but with different operations (maybe there's the above edit page example and also a similarly designed view page also utilizing the left block node selector?).
How much of this can be accomplished with Panels (and maybe supplementary modules?)? Where would I need to code to put it all together? I assume it would need code perhaps in the Panel page that contains things like the data selector panel, data view panel, etc. to "link them together". Are there any good examples floating around on how to do this, since it seems like a fairly bread-and-butter exercise for any sort of web-based data interaction...
The best and probably the simplest way probably would be to do it with some coding but if you prefer using modules there a module families like Context or Rules that should give you some functionality which you are after. I also suggest looking into AJAXification methods and modules.
I have some nodes I am displaying in a view. They are displayed as nodes, unformatted. I would like the user to be able to choose from some predefined sort criteria ( via drop down list or similar).
So they could pick recently active, most commented, newest, etc., and re-query for new results.
Its easy with tables because you can make the labels clickable, but I do not know how to have similar functionality with a raw node preview display.
Just a thought, from me to me, and for anyone else who may be trying to do this.
An easy, sleezy option would be to just add another page view for each of the required sorts, and provide a link to these other views in the header of each of the pages.
This could also allow for (easier) linking to the individual sorts, so say if you have a sidebar block displaying recently commented nodes, you could adjust the .tpl.php of the block to have the title link to the view displaying the full set of recently commented nodes.
also im pretty sure there should be a way to do this with arguments, but i dont know how
Views 3 supports exposing sort order (just like you can expose filters)
Select the sort order (e.g. add sort by node creation date, then click on the settings for that), you should be able to expose the sort order to the end user. This is just like clicking on the settings for a filter and then choosing to expose it.
Standard views isn't going to support this, so IMO you're best off implementing a custom solution using just a plain old view and this jQuery plugin. You can either do this at the theme layer (the same way as any other JS in a theme) or a custom module (via drupal_add_js() to add the plugin and your bit of custom code). Either way will work, although the custom module has the obvious benefit of being theme independent (and thus more portable).
If you go the custom module route, please consider releasing it as a contrib module on http://drupal.org.
I am working on the prototype for a scheduling application on an intranet system. The application is for scheduling and tracking promotional workers at various locations on various dates.
Currently, only for prototyping, I am generating a data table of location/date, and from this I iteratively build an HTML table (asp:Table control). On visiting each cell, I query for people working that location-date and populate the cell accordingly. This is very inefficient, and will at worst be improved by querying cached data for the whole location/date grid.
I'm looking around for established patterns and techniques for dealing with scenarios like this in HTML in general, maybe a visualization library for jQuery or something, and for ASP.NET in particular, maybe a library for implementation on a GridView etc.
Am I going in the right direction with this, and if so, what recommendations are there regarding the previous paragraph?
As regards the user interface, I would take a look at the Telerik scheduler control and see how that one is done. You don't want table cells stretching the layout, and even filtering may not help you unless you truncate the displayed text as a link to a modal pop-up, or some kind of master-details set up.
http://demos.telerik.com/aspnet-ajax/scheduler/examples/overview/defaultcs.aspx
Why don't you try placing the calender control on the left side and then select the current date by default. Thereafter user can select a date and you can list the data using a gridview based on the selected date-location. That should ease up the interface as well.
These controls are complex, and there are many third party vendors out there with components like these. Take a look around at some of the components available to you, as it is A LOT of work to develop a component like this yourself (we were going to attempt to do it, but realized to make it efficient and usable we needed to buy one, so we purchased Telerik).
HTH.