How to use Slickgrid to render XML data? - jqgrid

We are using JQuery and JQuery UI and looking to rewrite a xml to dom table into a datastore based grid. In ExtJs, I can use Ext.data.reader.Xml along with a data Modal to map the returned data to the grid. I am trying to do the same, but using a JQuery based grid library. Performance and theming also need to be considered.
I have used JqGrid in the past, it has the xmlmap option. But, I am looking at SlickGrid, specially for its performance capabilities. I could not see any XML driven examples. I suspect if I go with Slickgrid I will have to load the xml and loop through it to build the the data object.
Do anyone have suggestions for using Slickgrid to show XML data. Specifically, does it have xmlmap or xml reader features? Would SlickGrid give significant performance improvement over JqGrid for say 1000 rows?
Example of XML:
<D:prop>
<FileExtension>.s4d</FileExtension>
<ComponentType>DynamicTrove</ComponentType>
<getcontenttype>application/xml</getcontenttype>
<ComponentCreatedOn>2011-03-17 12:57:57 </ComponentCreatedOn>
</D:prop>
<D:prop>
<FileExtension>.s4d2</FileExtension>
<ComponentType>DynamicTrove2</ComponentType>
<getcontenttype>application/xml2</getcontenttype>
<ComponentCreatedOn>2011-03-17 12:57:57 2</ComponentCreatedOn>
</D:prop>
Thank you.
Example of

You can display such XML data in a grid. I recommend you to include local searching and filtering which could be very practical for the user if the user have to analyse 1000 rows of data. If you would use paging with filtering you will get very good performance for 1000 rows. I don't recommend you to display all 1000 rows at once. Paging is much better.
The main problem could be XML namespaces because it could be parsed in different ways with respect of jQuery. See the answer for short description of the problem.
The demo is an example which can be your starting point. Another demo uses XML namespaces and work correct in IE, but it works incorrect in Google Chrome.

Related

Create Index page for ASCII doc

I have a lot of ASCII docs at different locations and I want to create an index page which should render these documents. But the condition here is that I want to list all the document link on the index page and if the user clicks on any link then only the document should be displayed. I don't want to display the documents below the table of content. I just want to display the table of content on the index page.
Is there any way to do this?
If I understand you correctly, you wish to generate a multi-document website, but you want an index page that displays just the TOC, with the other documents served elsewhere. I believe the best way to get this effect would be to generate chunked XHTML output using the DocBook toolchain. I believe this should be possible with Asciidoctor tools, but I have only implemented this particular post-rendering toolchain with the original (Python-based) AsciiDoc rendering tool, as documented here. This setup is configurable to generate a TOC index page that links to chunked output (you can configure the level of chunking).
As you have already figured out, AsciiDoc's automated TOC generation only works on the present document, which requires including the subordinate document to get their headings for the TOC. I can think of ways to sort of game this, such as to include just the heading of the included document (include::path/to/document.adoc[lines=1]) and then hiding even those headings with CSS or something. The problem is, the links in the TOC will be pointing internally, so you'd need to handle that somehow.
Another way is to use any of the static-site generators that support or can be readily extended to support AsciiDoc. What you're talking about is not an out-of-the-box feature that I'm aware of, but they all at least make it possible to generate an organized TOC-type navigation.

capture data of a slickgrid using UiPath

I am trying to scrap data from a slickgrid, but it isn't working out. It has problems with selector or meta data. I have tried using wildcards, and other alternatives too, but all fail to scrap the data. Can anyone help me out in this?
I think you are going to have to get to know Slickgrid a bit to work out what to do. Slickgrid only displays the currently visible data, so scraping the data from the UI will only get partial results.
The best thing to do would be to find the underlying data object and print it as JSON. However this would be impossible to do in a general sense (ie. for any website).
It's relatively easy for a single target website, and may be able to be automated with a few tricks for multiple renderings of the same page of a specific website.
(edit: whoops, just noticed the UIPath bit. I had a look, but I don't know how it works. Assume it looks in the HTML. Basically, that will only work if you are able to get UiPath to scroll through the entire dataset one page at a time. You'll have to use logic to eliminate the metadata rows. But if you can drop into javascript, it will be so much easier)

How to create dynamic graphs in Mediawiki

Our company has an internal wiki powered by MediaWiki. We are planning to create a wiki page to post some operational data in the form of graphs. Im wondering is it possible to create the following in the wiki page?
Create combo boxes like frequency of data (last month/last quarter)
Create button to generate graph
If possible a calendar to select data range
A dynamically generated graph based on the above filters
Does wiki pages allow creation of these objects and generation of graphs based on the filters dynamically? Any references to do this is highly appreciated.
You can do this with a custom-built extension. See Extension: Wiretap as an example (the source code is on GitHub). Basically you query the database using PHP and add it into the HTML source. Then you can use JavaScript to plot with d3.
(Nearly) Interactive graphs are possible with MediaWiki, but only, if you install the Graph extension, which is a bit more difficult to work with. However, there are some good tutorials and demos on the linked extension page and subpages. I'm not quite sure, if all of your use cases can be implemented with the graphs extension, as I'm not that familiar with this extension.

How do you design a text-based view using Ember.js or some other MVC javascript framework?

I have an homemade javascript which, among other things, do some kind of text-formatting work in order to emulate a retro text-based game:
When developing it, i tried to stick close to an MVC model, and this is what i did:
The data model basically consists of a list of objects mapping strings to very specific locations in the display, like this
[{
"value":"Hello!",
"color":"blue",
"row":1,
"column":13
},
{
"value":"What is your quest ?",
"color":"red",
"row":5,
"column":10
},
/* ... some other data */]
Then my view consists of a simple <pre> tag. When my controller draws the model on the view, it iterates through each string-location pair and create a <span> for each one that is appended to the <pre> tag. To keep the formatting consistent, it also adds "blanck" span each time it is needed.
<pre>
<span> </span><span class="blue">Hello!</span><span> </span><br>
<!-- ... other lines of the scene-->
</pre>
It's pretty simple, but it worked great until i had to dynamically change a span text value, without redrawing the whole scene each time.
So i took a look on the internet and realized that Ember.js existed, it really seems to be exactly what i could use to improve my whole code.
Now, i tried to redesign it using Ember.js, but as i don't fully understand yet its features i ran into a problem:
How do you represent a 'text-based' view into an Ember.js handlebar template ?
What am i missing here?
My data model contains both the value and the position in the display, so i don't exactly see how handlebars template could fit my needs. Or perhaps dynamically generating the template is an option ?
What do you think ?
Am I choosing the wrong framework or misunderstanding its use? is it my original MVC design that is wrong ? Changing the data model for something completely different is not an option i can easily consider as it would impact everything.
Do you have any ideas on how this could be implemented using Ember or some other framework?
Any advice will be appreciated :)
I made a rudimentary example on jsfiddle on how you could use ember for this.
Each row is an object and we have an ArrayProxy holding such objects. Thus if we have 10 rows, we have 10 row objects.
The view is binding one output line per row object.
Enjoy the flying bird:
http://jsfiddle.net/algesten/YMrW3/2/
Edit: Better to {{#if}} away empty rows as pointed out by ud3323:
http://jsfiddle.net/ud3323/92b24/

Ajax driven timeline-style blog (in Drupal)

I have created a blog in drupal using CCK and taxonomy.
I wish to display my posts in a timeline, according to the posted date (using views).
So far I have created a listing of the post titles on a timeline.
I now want to display the posts using ajax, wherein clicking on a post title will load the content of that node on the same page. Going ahead I'll add each fetched node into a ul tag and thus create a carousel kind of display of all fetched posts so far.
Whats the best way of achieving this, considering that I have enough knowledge to create a custom module.
Here's where I got my idea from.
http://www.jvm-neckar.de
Try the aptly named http://drupal.org/project/timeline project. I used it long time ago... its a nifty module and you can visualize your various posts on a scrollable timeline. Posts that are frequent will be together and posts that are apart (in time) will be apart -- its all scaled accurately. It has integration with views, of course.
I'm not sure about whether it will meet your exact requirements. Check out an example here:
http://simile.mit.edu/timeline/examples/jfk/jfk.html

Resources