Introducing dhtmlxDataView: Flexible, Easy, Multipurpose

| Comments (19)

Have you ever been faced with a need to display objects with the same set of properties and behavior? I’m sure you have. Lists of contacts, sets of documents or files, product catalogs for online stores, image collections, etc.

When we first tried to create a solution to simplify this task, we ended up with dhtmlxFolders. Now we’ve moved further in our efforts to make the component more flexible and easier to use, and we developed dhtmlxDataView.

What is dhtmlxDataView?

dhtmlxDataView is a JavaScript component that shows a collection of objects according to a certain template. Each object is rendered as a container with fixed sizes. The layout of properties in a container depends on the template that you’ve defined. For now, it is the most flexible component from the DHTMLX product line. You can control any visual aspect of rendering.

Supported Operations

The component supports all necessary operations with objects:

  • Adding and deleting objects (simple, complex, with any set of custom properties)
  • Selection (single, multi, group)
  • In-line editing
  • Drag-and-drop of objects:
    • inside dataView
    • between DataView and dhtmlxGrid or dhtmlxTree
    • between DataView and any HTML container

 
Performance with a Large Number of Objects

There is no limitation on the number of objects which can be put into the DataView. Smart rendering, paging, and dynamic loading allow you to display hundreds or thousands of objects and still have an interface with fast performance. You even don’t need to know what smart-rendering is – this mode is fully transparent and will be enabled automatically when lots of items are loaded.

dhtmlxDataView supports a connector class (now only for PHP, but upon final release, it will be extended to Java and .NET), so as with other DHTMLX components, you will be able to use automatic data-rendering / data-saving from a defined SQL source.

How to Use

DataView is rather easy to use. You can set common or individual designs for objects, their editors and tooltips through HTML templates. Just write an HTML snippet that defines how you want to see the object. You can also choose any appropriate way of loading data: JSON, XML, JavaScript array, HTML, or CSV.

Check out the following brief example.

Let’s assume that we need to display information about software packages: package name, version, maintainer, and description. First of all, we need to include two files: dhtmlxdataview.js and dhtmlxdataview.css

<script src=”./codebase/dhtmlxdataview.js” ></script>
<link rel="stylesheet" href="./codebase/dhtmlxdataview.css” type="text/css" charset="utf-8">

After that, place a container where you want to show the data:

<div id="data_container" style="border:1px solid #A4BED4; background-color:white;width:460px;height:200px;"></div>

And the final accord is JavaScript initialization:

var view = new dhtmlXDataView({
    container:"data_container", //where data will be rendered
    edit:true,   //allows data edit
    type:{
        //how data will look
        template:"{obj.Package} : {obj.Version}<br/>;{obj.Maintainer}",
        //how editor will look
        template_edit:"<textarea class='dhx_item_editor' bind='obj.Version'>",
        width: 200,  //width of single item
        height:40  //height of single item
    },
    tooltip:{
        //how tooltip for the item will look
        template:"<b>{obj.Package}<b><br>{obj.Description}"
    }
});
view.load("data.json","json");   //load data from json

Here is what we’ve got:

dhtmlxDataView Example - Package List

dhtmlxDataView Example - Package List

It’s a DataView with 2 items in a row (if the item width were smaller, there would be more items per row). Version numbers of packages are set as editable. Users can double click on a corresponding item and type in a new package version. These changes can be easily saved in the database by DataProcessor. Besides, items can be added or deleted dynamically with the ability to reflect changes on the server.

In our example, only package version is editable (bind=’obj.Version’), but it’s possible to define more than one editor using an HTML template. For example, if you want to edit a package name too, just place an additional input in template_edit.

What’s More

Items in DataView can contain not only plain text, but any custom HTML that you define in your templates, including links, images, etc. Therefore the component can be useful if you need to display multiple items within a single container, like an image viewer or a files browser:

dhtmlxDataView Example - File Browser

dhtmlxDataView Example - File Browser

…or a product catalog:

dhtmlxDataView Example - Product Catalog

dhtmlxDataView Example - Product Catalog

dhtmlxDataView provides a handy tool to build an item viewer with less effort and time. It makes you believe that there are easy solutions for even troublesome programming tasks. To see the component in action, download the beta version of DataView here, and check out the 50 or so examples inside the package.

Which kind of configuration API do you prefer?

  • having both in the same time will be the best (56%, 50 Votes)
  • object init like in dhtlmxDataView (26%, 23 Votes)
  • function init like in dhtmlxGrid (18%, 15 Votes)

Total Voters: 89

Loading ... Loading ...

Posted by Alexandra Klenova

Comments

  1. vrushali April 5, 2010 at 8:29 pm

    Why hasn’t this product been released for use yet?

    • ivan April 6, 2010 at 12:05 am

      We’re still testing and improving this component. It should be released in May-June as a part of major update of dhtmlxSuite.

  2. Jonathan April 12, 2010 at 7:58 am

    Hi,
    I have been using the beta code for about a week, and notice some bugs, mainly dealing with paging.
    If I have paging and number of item is less than 1 page, I get 2 pages with 2nd page being empty.
    Also with paging, the dhtmlXDataView.prototype.types.fthumbs common.text() get called twice, looks like the rendering is happening twice, if I remove the paging the rendering is happening only once.

    Is there a latest beta code that will/has fixed these problems?

    Finally is context menu going be available in the final release?

    I will check you reply on this page.

    Thanks.

    • ivan April 14, 2010 at 1:53 am

      Hi Jonathan,

      The problem has been confirmed and will be fixed in the final version (if you need the fix ASAP, you can contact us directly at support (at) dhtmlx.com ).

      The final version will provide a separate onContextMenu event.

      As for now, you can use onItemClick event, and check the ev.button state (ev is the second parameter of custom event handler) to react only on right clicks.

  3. David S May 17, 2010 at 7:42 am

    Hi,

    Looks good.. just testing some basics at the moment, and I tried to attach a mouse move event which works ok, although I want to make the item “select” as I mouse move (not on a click). So I have the following code:

    data.attachEvent(“onMouseMove”, function (id, ev, html) {
    data.select(id);
    });

    where “data” is the actual dataview of course. Now it sort of works, as in it highlights the correct item, but using firebug, is fails with a null value within the dataview.js:

    d: null (i.e. c value contains “MouseMove”

    Not sure if this is something I am doing, or possibly a bug which may or may not be fixed..

    Still, looking very good though!

    • Inga May 17, 2010 at 12:43 pm

      We’ve confirmed the bug, it will be fixed in the final release. Thanks for the note.

  4. Jonathan Ekwempu June 16, 2010 at 3:43 am

    One suggestion.

    Please make it easy to change the look and feel of DataView. In particular, ability to render it with no rules and borders. If you look at your products catalog example above, it has rules and borders and even a scroll bar, it should have looked better without any of those.

    • Inga June 16, 2010 at 12:42 pm

      Rules and borders are defined in css and can be removed by adding custom style – it doesn’t require code changes, as for scrolls, there is an option “height:’auto’ ” which will force auto-size dataview to show all info without scroll.

  5. Jonathan Ekwempu June 22, 2010 at 1:10 am

    Setting the x_count and y_count to get a fixed number of rows and columns respectively does not work consistently. My anticipation is that when I set x_count: 6 and y_count: 3, I will always get 6 rows and 3 columns. That really is not the case.

    • ivan June 22, 2010 at 1:09 pm

      This settings resize the component to fix desired number of elements, and locally it works correctly. It doesn’t guarantee that all items will be fully visible on the screen (because of scroll step it can be that items will be visible only partially) – if it is a problem for your use case, you can use the same settings with paging mode.

      If you have some other problems with dataview, please post your question on forum.dhtmlx.com, it’s more suitable for such kind of discussion.

  6. Jonathan Ekwempu June 22, 2010 at 6:38 pm

    Let’s finish this discussion before I go to the forum to post any new questions. You are right “This settings resize the component to fix desired number of elements”. I am always getting the desired number of elements per page but different number of columns and rows.

    That being the case, how do I get dataview to consistently display with a given number of columns and and a given number of rows?

    • ivan June 22, 2010 at 7:29 pm

      This must not happen in normal case, if you are using x_count and y_count – number of rows and columns must be fixed. The situation may be caused by setting widht or height of container in percents (in that case there will be conflict between two different sizing behaviours).

  7. Jonathan Ekwempu June 22, 2010 at 9:09 pm

    I don’t have any width or height settings on the container. Try setting x_count to 4 and y_count to 3 and later set x_count to 6 and see the behavior. My item width is 200 and height is 40.

    Results: For x_count = 4 and y_count = 3, I get exactly 3 columns and 4 rows (as expected).
    For x_count = 6 and y_count = 3, I get 5 columns and 4 rows.

    If we are not getting similar results then we may be running different versions of dataview.

    • ivan June 23, 2010 at 8:39 pm

      The working sample with the same settings has been sent to your email.

  8. Jonathan Ekwempu June 24, 2010 at 1:23 am

    Thanks ivan. After comparing with your code, the only difference was that I have a css class with borders and margins. The borders I set was probably too large. Thanks anyway, your code helped in solving or identifying the problem.

  9. Basti July 2, 2010 at 9:42 am

    Any new Information about the Release Date ?

    You said about May-june now it is July :-)

    • ivan July 2, 2010 at 3:57 pm

      Unfortunately there is no a specific release date. We’re on the latest stage preparing the packages for the release. Hopefully the new version will come out within the next two weeks.

  10. Sammy February 14, 2014 at 1:53 pm

    Can we dynamically re size the photos in the data-view? I can see them stretched when I link photos to Data view.

    • Darya February 14, 2014 at 3:39 pm

      You need to use ‘template’ to set used image size. It will be fixed. Also you can set ‘width’ & ‘height’ in an attribute ‘type’

Leave a Reply