Insert a dataview in a layout cell

Suite and Optimus Suite 5
#1

Hi everyone,

i hoped it was an easy thing but i’m having some problem.

i would put a dataview in a cell “b” of a layout.

in my html file i wrote the following code:

and in the script there is the following, (of course i have already defined the layout object (2U).

dataview = layout.cells(“b”).attachDataView(
{
container: “info”,
type: {
template: “html->info”,
height: 120,
width: 400
}
});

The pic should appear in the cell “b”, instead i can’t show it up.
Can you find the error?

thanks to all

#2

Hi,

if you initialize dataview using attachDataView, there should not be container property in the dataview configuration:

dataview = layout.cells(“b”).attachDataView(
{
//container: “info”,
type: {
template: “html->info”,
height: 120,
width: 400
}
});

#3

thanks for suggestion.

unfortunately i tried to cancel the container but nothing appens.

i still have my layout cell “b” complitely empty.

instead if i use attachObject i can see the pic in the cell “b”. where should be the error?
i wanted to use the dataview to receive information from database.

to avoid the problem is better to use attachObject but how can i connect its elements to a database?

or if you can find the error of attachDataView better!:slight_smile:

thanks again

#4

Make sure that dhtmlxdataview.js is included after other dhtmlx libraries.

#5

Unfortunately i didn’t resolved my problem.

i used dhtmlx.js file that collect all libraries and i insert also dhtmlxdataview.js as you suggested but nothing.

my cell “b” is still empty. Is sure that attachDataView command exist? what can i do to resolve it?

#6

dhtmlx.js is already contains dataview library. Please attach the sample that demonstrates the problem.

#7

Hi alexandra,

this is my code:

HTML:

Il Pianeta Dei Clown 
<div id="Tab"></div>  

<div id="clowninfo">
    <div class="foto" > 
       <div style="text-align:center">
            <font size="10" color="black" style=" font-family:Segoe Script">FOTO</font>
       </div>
       <div style="text-align:center">
            <img src="images/prova.jpg"  height=70%/>
       </div>
    </div>
    
     <div class="dati" >
        <div style="text-align:left">
            <font size="4" color="black" style=" font-family:Segoe Script">Codice Fiscale:</font> 
        </div>
        <div style="text-align:center">
            <font > ciao </font>  
        </div>
     </div>
</div>

and here my js file:

var tab, layout, grid, dataview;

function init() {
tab = new dhtmlXTabBar(“Tab”, “top”);

tab.setImagePath("codebase/imgs/");
tab.addTab("tab1", "Membri Clown", "130px");
tab.setCustomStyle("tab1", "black", "red", "font-style:arial; font-size:16");

tab.addTab(“tab2”, “Ricevute”, “100px”);
tab.setCustomStyle(“tab2”, “black”, “red”, “font-style:arial; font-size:16”);
tab.addTab(“tab3”, “Amministrazione”, “140px”);
tab.setCustomStyle(“tab3”, “black”, “red”, “font-style:arial; font-size:16”);
layout = tab.cells(“tab1”).attachLayout(“2U”);

tab.setTabActive("tab1"); //attiva il Tab1

// layout attaccato al TAB Membri CLown

layout.cells("a").setText("Lista Membri");
layout.cells("b").setText("Dettaglio Clown");

layout.setSkin("dhx_costum");

//griglia attaccata alla Lista Clown del layout

grid = layout.cells("a").attachGrid();
grid.setImagePath("codebase/imgs/");
grid.setHeader("Nome, Cognome, Nome Clown"); 
grid.attachHeader("#text_filter,#text_filter,#text_filter");
grid.setColWidth("*,*,*");

grid.setColTypes("ed,ed,ed");
grid.setSkin("dhx_costum");
grid.setColSorting("str,str,str");

grid.init(); //inizializza la griglia

grid.enableSmartRendering(true);
grid.enableAlterCss("dispari", "pari");

grid.loadXML("php/load_clown.php");

grid.attachEvent("onRowSelect", select_grid_row);


//informazioni clown attaccata alla cella "b" del layout

dataview = layout.cells("b").attachDataView(

{
    type: {
    template: "html->clowninfo",
    height: 120,
    width: 400
    }
});

}

as i told you the dataview is not attached at the cell “b” of the layout why?

#8

Hi,

are any data loaded in the dataview ? if the problem still occurs, please attach the complete demo (with all necessary files) that allows to recreate the problem locally. We have not reproduced the problem.

#9

Hi Alexandra

i tried to load some data but nothing…

i insert here my code and let’s see if you can find the error.

i have a database with just one record to try and the key is “codicefiscale”. I want show for example the name of “citta” column. here below is how i have done.

as i told you i wanna see the name of the “citta” column in a dataview. i created a template below a showed
--------------------INDEX HTML PROGRAM----------------------

Il Pianeta Dei Clown 
      <META content="text/html; charset=utf-8" http-equiv=Content-Type>
      <SCRIPT type=text/javascript src="codebase/dhtmlxcommon.js"></SCRIPT>
      <SCRIPT type=text/javascript src="codebase/dhtmlx.js"></SCRIPT>
      <SCRIPT type=text/javascript src="functions.js"></SCRIPT>
      <SCRIPT type=text/javascript src="conn_codebase/connector.js"></SCRIPT>
      <SCRIPT type=text/javascript src="codebase/dhtmlxdataprocessor.js"></SCRIPT>

      <LINK rel=STYLESHEET type=text/css href="stili.css">
      <LINK rel=STYLESHEET type=text/css href="codebase/dhtmlx.css">
 <LINK rel=STYLESHEET type=text/css href="codebase/gridskins/dhtmlxgrid_dhx_costum.css">

<div id="Tab"></div>  

<div id="clowninfo">

    <div class="dati" >
     
        <div style="text-align:left">
            <font size="4" color="black" style=" font-family:Segoe Script">Codice Fiscale:</font> 
        </div>

        <div style="text-align:center">
            <span class="b">#citta#</span>
        </div>

     </div>
</div>

'-----------------------------------------------------------------

here below instead there is my functions in js.

'------------------------FUNCIOTNS---------------------------

var tab, layout, grid, dataview;

function init() {

tab = new dhtmlXTabBar("Tab", "top");

tab.setImagePath("codebase/imgs/");
tab.addTab("tab1", "Membri Clown", "130px");
tab.setCustomStyle("tab1", "black", "red", "font-style:arial; font-size:16");     
tab.addTab("tab2", "Ricevute", "100px");
tab.setCustomStyle("tab2", "black", "red", "font-style:arial; font-size:16"); 
tab.addTab("tab3", "Amministrazione", "140px");
tab.setCustomStyle("tab3", "black", "red", "font-style:arial; font-size:16"); 
layout = tab.cells("tab1").attachLayout("2U");

tab.setTabActive("tab1"); 

layout.cells("a").setText("Lista Membri");
layout.cells("b").setText("Dettaglio Clown");

layout.setSkin("dhx_costum");

grid = layout.cells("a").attachGrid();
grid.setImagePath("codebase/imgs/");
grid.setHeader("Nome, Cognome, Nome Clown"); 
grid.attachHeader("#text_filter,#text_filter,#text_filter");
grid.setColWidth("*,*,*");

grid.setColTypes("ed,ed,ed");
grid.setSkin("dhx_costum");
grid.setColSorting("str,str,str");

grid.init();

grid.enableSmartRendering(true);
grid.enableAlterCss("dispari", "pari");

grid.loadXML("php/load_clown.php");

grid.attachEvent("onRowSelect", select_grid_row);

dataview = layout.cells("b").attachDataView({

    type: {
        template:"html->clowninfo",
        padding: 5,
        height: 40
    }
});

dataview.load("php/prova.php");

}

and here below there is

----------------------prova.php file--------------

<?php require("../conn_codebase/dataview_connector.php"); $conn=mysql_connect("localhost","root",""); $database = mysql_select_db("clown"); $data = new DataViewConnector($conn,"MySQL"); $data->render_table("membri","codicefiscale","citta"); mysql_close(); ?>

this is what i have done…but it doesn’t show the dataview in layout cell “b”
hope you can find the error…

thanks for all

Stefano

#10

Hi,

Please provide the example of data that you tried to load into the dataview, a static xml - the xml that is generated by prova.php

#11

hi alexandra,

here it’s the file created by prova.php

<?xml version="1.0" encoding="UTF-8"?>

-
-
-

the id infact is correct and also the city name.

#12

It seems that the problem doesn’t relate tabbar:

tabbar is initialized without the skin. It is default skin is “default”. attachLayout method initializes the layout with the skin of the parent component (“default”) and there is not such a skin for layout.

To solve the problem you need to set skin directly in the attachLayout method:

layout = tab.cells(“tab1”).attachLayout(“2U”,“dhx_skyblue”);

The sample is attached
dataview.zip (93.9 KB)