Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Tim Sanders on Feb 13, 2009 07:55
open dhtmlx forum
Folder LoadXML

I want to use the Folder control in a shopping cart. I was trying to do a simple example to prove the concept, but I keep getting the error:

Error type: LoadXML
Description: Incorrect XML

I don't see what's wrong with the XML. Can you please look at the following and tell me what I need to do?

Thanks for your help.

XML Data:
<data>
    <item id="100">
        <description>Stock Number 100</description>
        <image>menshirt.bmp</image>
        <note><![CDATA[some text about the item]]></note>
        <listprice>26.00</listprice>
        <custprice>15.60</custprice>
    </item>
    <item id="200">
        <description>Stock Number 200</description>
        <image>womenshirt.bmp</image>
        <note><![CDATA[some text about the item]]></note>
        <listprice>26.00</listprice>
        <custprice>15.60</custprice>
    </item>
</data>

XSL:
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="item">
<table border="0">
    <tr>
        <td><img src='images/<xsl:value-of select="image"/>'></td>
        <td><h3><xsl:value-of select="description"/></h3>
        Item ID:<xsl:value-of select="itemid"/><br>
        List Price: $<xsl:value-of select="listprice"/>
        <xsl:if test="listprice > custprice">
<br><b>Your Price: </b><div style=”color:red”><xsl:value-of select=”custprice”/><div>
</td>
</tr>
</xsl:if>

        </td>
    </tr>
</table>

    </xsl:template>
</xsl:stylesheet>

HTML File:
<html>

<head>
<script src="codebase/dhtmlxcommon.js"></script>
<script src="codebase/dhtmlxtabbar.js"></script>
<script src="codebase/dhtmlxtabbar_start.js"></script>
<script src="codebase/dhtmlxlayout.js"></script>
<script src="codebase/dhtmlxwindows.js"></script>
<script src="codebase/dhtmlxfolders.js"></script>
<script src="codebase/dhtmlxmenu.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/widefault.css">
<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlxlayout.css">
<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlxlayout_dhx_blue.css">
<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlxtabbar.css">
<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlxfolders.css">
<link rel="stylesheet" type="text/css" href="codebase/dhtmlxmenu_dhx_blue.css">
<script>

var myFolders;
function doOnLoad() {
myFolders = new dhtmlxFolders("folders_container");
//alert("Running script");
myFolders.setItemType("xml_generic");
myFolders.loadXML("testfolder.xml","folderitem1.xsl");

}
</script>


</script>
<title>Shop Folder</title>
</head>

<body onload="doOnLoad();">

<div id="folders_container" style="width:400px;height:300px;overflow:hidden;float:left"></div>



</body>

</html>
Answer posted by Alex (support) on Feb 13, 2009 09:42

There are some issues in your xsl. 

This xsl should generate the correct xml: all tags must closed. 

Attributes should be set as follows:

<img border='0' class="dhx_folders_item_img">
  <xsl:attribute name="src">images/<xsl:value-of select="image"/></xsl:attribute>
</img>

Answer posted by Tim Sanders on Feb 13, 2009 10:14
Thanks.  I'm new to XSL so I didn't know about the attributes.

I inserted the change you suggested and still get the same error.  I don't see any tags that are not closed.  Attached are the three files so you can see the error. 

I'm really looking forward to seeing this work.  Thanks in advance for your help.
Attachments (3)
wishopfolder.htm1.36 Kb
folderitem1.xsl720.00 B
testfolder.xml511.00 B
Answer posted by Alex (support) on Feb 16, 2009 02:07

For example, there are the following unnecessary tags </td></tr>. <br> is also not closed. 

Please, see the examples of xsl in the documentation :  dhtmlxFolders/codebase/types/



Answer posted by Tim Sanders on Feb 16, 2009 09:43

OK.  I was able to get an XSL file that worked.  Thanks.

But I don't know how to have multiple columns per page such as your eshop example that shows two columns of books.  The folder items are put in a single column.  If I expand the number of items per page they simply continue down below my paging area instead of wrapping to a new column. 

How do I get the items to wrap to a second column on a page?  For example, 4 items will fit vertically on a page - I could fit 12 items on a page if they would display in 3 columns.  How do I get the twelve items to display in 3 columns?

Thanks.

Answer posted by Alex (support) on Feb 17, 2009 02:47

The component defines layout of  items automatically. The folder container doesn't have horizontal scroll.

If a width of a next item doesn't allow to place it in the same row with previous one. The item will be moved to the next row.

Answer posted by Tim Sanders on Feb 17, 2009 06:35
I'm not getting the result I think you're describing.  You seem to be saying that the component automatically puts items in horizontal rows, and that I will get rows as long as there is room.  I have attached my example.  It seems to have plenty of room to put multiple items on a row, but it shows only a single item per row.  I have tried changing sizes within my XSL and for the folder container but cannot get more than one item in a row.  I don't see where the size limits my items to one per row, but I might be missing it.  Can you please tell me why my example will not put multiple items on a row?

Thank you.
Attachments (3)
wishopfolder.htm4.13 Kb
foldershop.xsl1.83 Kb
testfolder.xml4.09 Kb
Answer posted by Support on Feb 18, 2009 08:34
Try to add next style to the page where folders used
<style>
        .dhx_folders_XML_GENERIC_item{
            width:200px; 
            height:200px;
            float:left;
        }
</style>
Answer posted by Tim Sanders on Feb 20, 2009 12:55
Thanks for your help so far.  I've made a lot of progress.

By adding the style you suggested I was able to get the items to go across as rows.  Now I have two additional issues:
  1. When I click on an item in the folder the folder items rearrange themselves and no longer display as even rows.  This doesn't fix itself unless I reload the folder xml.  I'm using an "onclick" event within the XSL - it works OK but the display is messed up.
  2. How can I have two user styles?  I used the xml_generic type for my first type, but I want to have both a brief and a detailed view of the same data.  The size of the display for each item needs to be different (for the brief I will use the style you suggested - for the detailed version I want one item per row).  If I use xml_generic as the type I can't get different styles for my two XSL files.  I am using the following functions to switch, but the style you suggested gets applied to both.  I tried doing a style for xml_generic1_item and xmlgeneric2_item but this didn't work at all.  How can I use XML_GENERIC for two different XSL files?

    function viewBrief()  {
        myFolders.setItemType("xml_generic", "foldershop.xsl");

     
     }
     
      function viewDetails()  {
        myFolders.setItemType("xml_generic", "folderdetail.xsl");

     
     }
Answer posted by Support on Feb 23, 2009 08:19
1) There is a pair css style , which describes selected element

.dhx_folders_GENERIC_item_selected, .dhx_folders_XML_GENERIC_item{
  width:200px; 
  height:200px;
  float:left;
  }

Answer posted by Tim Sanders on Feb 23, 2009 13:00

Thank you for answering issue 1 - by adding the selected pair my screen now longer jumps around.

What about the second issue?  I specifically want to have two xml_generic types, the first one with the attributes above and a second one with a wider width.  Is there a way to have two generic types that use different styles?

Thanks.