Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Zero on Oct 29, 2009 16:10
open dhtmlx forum
<span> tag in treegrid xml

I am trying to have a sparkline in the cell of a treegrid. There is a jquery component (http://omnipotent.net/jquery.sparkline/) I can use in normal html that works fine.

Inline Sparkline: <span class="inlinesparkline">1,4,4,7,5,9,10</span>.


However I can't seem to get this in a cell to render.
I tried several options. This being the most recent. This simply writes out 1,2,3,4,32
                <cell><![CDATA[
                <span class="inlinesparkline">1,2,3,4,32</span>
                ]]></cell>

Thanks
Answer posted by dhxSupport on Oct 30, 2009 02:49

Such issue may occur if by the time of executing sparkline script necessary row is not loaded yet. So sparkline script don't know which span it needs to merge. 

By the way, there is inbuilt rowspan and colspan functionality in Grid and TreeGrid. Please find more information here http://dhtmlx.com/dhxdocs/doku.php?id=dhtmlxgrid:cells_manipulation&s[]=merge&s[]=cells#merging_cells

Answer posted by Zero on Oct 30, 2009 06:24
Thanks for the response. I assumed it was something about the execution of the script, though I'm not sure how to address that.

Here is the HTML code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>Attach dhtmlxTreeGrid to Layout</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="title" content="Samples" />
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <link rel="icon" href="../common/favicon.ico" type="image/x-icon" />
        <link rel="shortcut icon" href="../common/favicon.ico" type="image/x-icon" />
        <link rel="stylesheet" href="../common/css/style.css" type="text/css" media="screen" />
    </head>
    <body onload="doOnLoad();">
      <div class="content">
      <link rel="stylesheet" type="text/css" href="../../codebase/dhtmlxlayout.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxlayout_dhx_skyblue.css">
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../codebase/dhtmlxlayout.js"></script>
   
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxGrid/codebase/dhtmlxgrid.css">
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css">
    <script src="../../../dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
    <script src="../../../dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
    <script src="../../../dhtmlxTreeGrid/codebase/dhtmlxtreegrid.js"></script>
   
    <script src="../../codebase/dhtmlxcontainer.js"></script>
   

      <script type="text/javascript" src="../../../../jquery-1.3.2.min.js"></script>
      <script type="text/javascript" src="../../../../jquery.sparkline.js"></script>
      <script type="text/javascript"> $(function() {
        /** This code runs when everything has been loaded on the page */
        /* Inline sparklines take their values from the contents of the tag */
        $('.inlinesparkline').sparkline();
        /* Sparklines can also take their values from the first argument passed to the sparkline() function */
        var myvalues = [10,8,5,7,4,4,1];
        $('.dynamicsparkline').sparkline(myvalues);
        /* The second argument gives options such as chart type */
        $('.dynamicbar').sparkline(myvalues, {type: 'bar', barColor: 'green'} );
        /* Use 'html' instead of an array of values to pass options to a sparkline with data in the tag */
        $('.inlinebar').sparkline('html', {type: 'bar', barColor: 'red'} ); }); </script>

    <div id="parentId" style="position: relative; top: 20px; left: 20px; width: 500px; height: 400px; aborder: #B5CDE4 1px solid;"></div>

      <script>
    var dhxLayout, dhxTreeGrid;
    function doOnLoad() {
        dhxLayout = new dhtmlXLayoutObject("parentId", "3L");
        dhxTreeGrid = dhxLayout.cells("a").attachGrid();
        dhxTreeGrid.setImagePath("../../../dhtmlxGrid/codebase/imgs/");
        dhxTreeGrid.loadXML("../common/treegrid.xml?etc="+new Date().getTime());
    }
</script>
           
           
         </div>


            Sample Inline Sparkline: <span class="inlinesparkline">1,4,4,7,5,9,10</span>.

    </body>
</html>


Here is the XML,
<?xml version="1.0" encoding="UTF-8"?>
<rows>
    <head>
        <column width="*" type="tree" align="left" sort="str">Metric</column>
        <column width="50" type="ed" align="left" sort="int">Current Week</column>
        <column width="50" type="price" align="right" sort="int">LY Same Week</column>
    </head>
    <row id="t1">
        <cell>Mobile Phones</cell>
        <cell type="ro"></cell>
        <cell type="ro"></cell>
        <row id="nokia">
            <cell>Nokia</cell>
            <cell type="ro"></cell>
            <cell type="ro"></cell>
            <row id="1">
                <cell><![CDATA[<span class="inlinesparkline">1,2,3,4,32</span>]]></cell>
                <cell>&lt;b&gt;1</cell>
                <cell>23</cell>
            </row>
            <row id="3">
                <cell>Test</cell>
                <cell>123</cell>
                <cell>249</cell>
            </row>
            <row id="5">
                <cell>Nokia 6500 classic</cell>
                <cell>1</cell>
                <cell>320</cell>
            </row>
        </row>
        <row id="se">
            <cell>Sony Ericsson</cell>
            <cell type="ro"></cell>
            <cell type="ro"></cell>
            <row id="2">
                <cell>Sony Ericsson K800i</cell>
                <cell>1</cell>
                <cell>228</cell>
            </row>
            <row id="9">
                <cell>Sony Ericsson W950i Walkman</cell>
                <cell>1</cell>
                <cell>289</cell>
            </row>
        </row>
    </row>
</rows>


Any thoughts on how to get the script loaded in time?


Thanks again.

Answer posted by dhxSupport on Oct 30, 2009 07:03
Try to call sparkline function after treeGrid was fully loaded:

dhxTreeGrid.loadXML("../common/treegrid.xml?etc="+new Date().getTime(),function(){
$(function() {
/** This code runs when everything has been loaded on the page */
/* Inline sparklines take their values from the contents of the tag */
$('.inlinesparkline').sparkline();
/* Sparklines can also take their values from the first argument passed to the sparkline() function */
var myvalues = [10,8,5,7,4,4,1];
$('.dynamicsparkline').sparkline(myvalues);
/* The second argument gives options such as chart type */
$('.dynamicbar').sparkline(myvalues, {type: 'bar', barColor: 'green'} );
/* Use 'html' instead of an array of values to pass options to a sparkline with data in the tag */
$('.inlinebar').sparkline('html', {type: 'bar', barColor: 'red'} ); })
});
Answer posted by Zero on Oct 30, 2009 07:50
Again thank you and please be patient with me as this is pretty new to me.
I just don't understand how to call the function after the tree grid was loaded. That function will place data in cells. Therefore it has to be in the XML correct? Right now the XML gets loaded last in the OnLoad function. Is there a trick to call
        dhxTreeGrid.loadXML("../common/treegrid.xml?etc="+new Date().getTime());
sometime after the onLoad?

Thank you again.
Answer posted by Support on Oct 30, 2009 08:03
>>I just don't understand how to call the function after the tree grid was loaded.
To detect if treeGrid rows were loaded you can use 2nd parameter of loadXML() method. 2nd parameter of laodXML() method is after loading callback function:
dhxTreeGrid.loadXML("../common/treegrid.xml?etc="+new Date().getTime(),doOnTreeGridLoad);
function doOnTreeGridLoad(){
//call sparkline function.
}
Please check sparkline documentation to find out how to call this script correctly after Ajax response is finished. 
>>Right now the XML gets loaded last in the OnLoad function. Is there a trick to call
dhxTreeGrid.loadXML("../common/treegrid.xml?etc="+new Date().getTime());
sometime after the onLoad?
In your code dhxTreeGrid.loadXML("../common/treegrid.xml?etc="+new Date().getTime()); is called right after onLoad() as it is the last line of the onLoad() function.