{"id":279,"date":"2010-03-23T08:39:13","date_gmt":"2010-03-23T16:39:13","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=279"},"modified":"2026-10-23T12:16:53","modified_gmt":"2026-10-23T09:16:53","slug":"dhtmlxdataview","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlxdataview\/","title":{"rendered":"Introducing dhtmlxDataView: Flexible, Easy, Multipurpose"},"content":{"rendered":"

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.<\/p>\n

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<\/a>.<\/p>\n

What is dhtmlxDataView?<\/strong><\/p>\n

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.<\/p>\n

\"dhtmlxDataView

dhtmlxDataView - Example<\/p><\/div><\/a><\/p>\n

Supported Operations<\/strong><\/p>\n

The component supports all necessary operations with objects:<\/p>\n

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

       
      \nPerformance with a Large Number of Objects<\/strong><\/p>\n

      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\u2019t need to know what smart-rendering is \u2013 this mode is fully transparent and will be enabled automatically when lots of items are loaded.<\/p>\n

      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.<\/p>\n

      How to Use<\/strong><\/p>\n

      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.<\/p>\n

      Check out the following brief example.<\/p>\n

      Let\u2019s 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<\/p>\n

      <script<\/span> src<\/span>=<\/span>\u201d.\/<\/span>codebase<\/span>\/<\/span>dhtmlxdataview.js\u201d ><\/<\/span>script<\/span>><\/span>
      \n<link<\/span> rel<\/span>=<\/span>"stylesheet"<\/span> href<\/span>=<\/span>".\/codebase\/dhtmlxdataview.css\u201d type="<\/span>text<\/span>\/<\/span>css" charset="<\/span>utf-8<\/span>"><\/span><\/span><\/div><\/div>\n

      After that, place a container where you want to show the data:<\/p>\n

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

      And the final accord is JavaScript initialization:<\/p>\n

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

      Here is what we\u2019ve got:<\/p>\n

      \"dhtmlxDataView

      dhtmlxDataView Example - Package List<\/p><\/div>\n

      It\u2019s 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.<\/p>\n

      In our example, only package version is editable (bind=\u2019obj.Version\u2019), but it\u2019s 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.<\/p>\n

      What’s More<\/strong><\/p>\n

      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:<\/p>\n

      \"dhtmlxDataView

      dhtmlxDataView Example - File Browser<\/p><\/div>\n

      \u2026or a product catalog:<\/p>\n

      \"dhtmlxDataView

      dhtmlxDataView Example - Product Catalog<\/p><\/div>\n

      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. <\/p>\n

      Posted by Alexandra Klenova<\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

      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 …<\/p>\n","protected":false},"author":2,"featured_media":3374,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,70,1],"tags":[33,18,14],"class_list":["post-279","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posts-for-codeproject-com","category-releases","category-uncategorized","tag-all-posts","tag-labs","tag-tips"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/279","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=279"}],"version-history":[{"count":4,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/279\/revisions"}],"predecessor-version":[{"id":16055,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/279\/revisions\/16055"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3374"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=279"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=279"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}