Introducing the Grid

[antun]

One new feature in 2.0 is the Grid component, which is used for presenting tabular data. Here's a simple example:


<canvas debug="true" maxtextwidth="1000">

<simplelayout axis="y" spacing="10" />


<dataset name="weatherdata" request="true"
src="http://www.laszlosystems.com/cgi-pub/weather.cgi?zip=10022"/>

<grid id="foo" datapath="weatherdata:/weather"
contentdatapath="forecast/day"/>


<button>Get selection
<method event="onclick">
<![CDATA[
var sel = foo.getSelection();

// getSelection returns an array of datapointers,
// so loop through it
for ( var i=0; i<sel.length; i++ ) {
Debug.write( "Selection number " + i );
var dp = sel[i];
Debug.write( "Label: " + dp.p.attributes.label );
Debug.write( "Desc: " + dp.p.attributes.desc );
}
]]>
</method>
</button>

</canvas>


Note that once a row (or multiple rows) is selected you can call getSelection, which returns an array of datapointers that point to the nodes of the dataset that the grid is based on. One way of getting to an attribute when you have a datapointer is to use the datapointer's "p" attribute, as shown above. If XPath syntax is more familiar to you, you can also reference XML node attributes as follows:


dp.xpathQuery( "@label" );


Enjoy!

[thehotrod]

Is it possible to create a new row or delete an existing row with a corresponding visual effect?

The question stems from my understanding that the number of rows and columns is defined at code-time...please throw some light on this.

Intended use (example):
- for entering to-do task items in a form (dialog)
- summary of tasks displayed one row per item in a datagrid
- a sort of master-detail visual effect; clicking on the row brings up the detail in the form/dialog
- edits possible in form/dialog; "Add/New" creates new row in summary; "Delete/Remove" removes row from summary
- alternatively, this could be provided for "fast" entry of data in row(s) like in a spreadsheet, with "New Row" / "Delete Row" buttons for new task/delete task

Wouldn't it be nice to have a TaskList as a sample app for blogbox!

[antun]

I don't think you can have custom transition effects per grid row with the datagrid as it stands, but you could customize it to suit your needs. It's all written in LZX, so you could copy and edit the code or extend the existing gridtext and/or gridcolumn classes as appropriate.

As for adding and removing data elements, remember that since its bound to XML data, it will reflect any changes to that XML:


<canvas debug="true" maxtextwidth="1000">

<simplelayout axis="y" spacing="10" />


<dataset name="weatherdata" request="true"
src="http://www.laszlosystems.com/cgi-pub/weather.cgi?zip=10022"/>

<grid id="foo" datapath="weatherdata:/weather"
contentdatapath="forecast/day"
onclick="Debug.write( 'foo' )"/>


<button>Add a row
<method event="onclick">
<![CDATA[
// Create a new <day> node in the dataset

var n = new LzDataElement( "day", {label: "FUNDAY",
imageurl: "foo.gif",
desc: "Amazing weather",
temp: "4000" } );
var dp = canvas.datasets.weatherdata.getPointer();
dp.setXPath( "weather/forecast" );
dp.p.appendChild( n );
]]>
</method>
</button>

</canvas>


-Antun

[oleane]

Antun,

Is it possible to show the weather icon .gif into grid column ?

bye

[javaceylan]

Hello i have the following snippet for a grid and a command. i have a problem with the ondata event . When i execute the command for the first time , the ondata event does not work as i expect, it does not show the data properly. when execute the command for the second time or when i sort any column of the grid the data is shown, everything is ok. the following is seen on the debugger console for two executions. I have only 9 records in the dataset. In the first execution ondata is fired 11 times.

!! icerikid=
!! icerikid=1
icerikid=
icerikid=
icerikid=
icerikid=
icerikid=
icerikid=
icerikid=
icerikid=
icerikid=
---------------
icerikid=2
icerikid=1
icerikid=2
icerikid=1
icerikid=1
icerikid=2
icerikid=2
icerikid=1
icerikid=1


I think smth is wrong with the way grid handles the data ..can anyone see the problem?

Thanks

<command id="olusan_evraklar" key="['Control', 'Shift', 'E']">
<method event="onselect">
dataset_evraklar.doRequest();
Debug.write("evraklar dataset is up");
</method>

-------------------------------------------------
<grid x="10" width="950" id="olusanevraklar" datapath="dataset_evraklar:/SUNUCUYANIT/Evraklar" contentdatapath="Evrak" >
<gridcolumn name="iceriksutun"> Icerik
<combobox name="gridicerikcombo" width="100"
shownitems="3" defaulttext= "Seciniz" editable="false">
<textlistitem
datapath="dataset_icerikler:/SUNUCUYANIT/Icerikler/Icerik"
text="$path{'adi/text()'}"
value="$path{'ID/text()'}">
</textlistitem>
</combobox>
<text datapath="icerik_ID/text()" visible="false">
<method event="ondata">
Debug.write("icerikid=" + this.text);
parent.gridicerikcombo.selectItem(this.text);
</method>
</text>
</gridcolumn>
<gridcolumn > Ek <text datapath="ek/text()"/> </gridcolumn>
</grid>
------------------------------------------

[javaceylan]

i have also observed that the previous case works proberly when i implement applyData method instead of ondata ..again i ask what is wrong in the previous posting case..

<text datapath="icerik_ID/text()" visible="false">
<method name="applyData" args="v">
parent.gridicerikcombo.selectItem(v);
</method>
</text>

[antun]

ondata is sent when the data that the view is pointing to changes. In your previous example, you were reading the text in the ondata method, but the text may not have been updated at that point in time.

In your applyData method below, you're reading the variable that is passed to applyData, which obviously resolves.

-Antun

Originally posted by javaceylan
i have also observed that the previous case works proberly when i implement applyData method instead of ondata ..again i ask what is wrong in the previous posting case..

<text datapath="icerik_ID/text()" visible="false">
<method name="applyData" args="v">
parent.gridicerikcombo.selectItem(v);
</method>
</text>

[antun]

Yes - look into the gridcolumn class; that will let you customize a column's contents, so you can display an image inside of it.

-Antun

Originally posted by oleane
Antun,

Is it possible to show the weather icon .gif into grid column ?

bye

[ashish.mishra16]

<grid name="grdMailConfig" contentdatapath="module" fontsize="10" bgcolor1="white" bgcolor="white" sizetoheader='false' rowheight="23" width="${parent.parent.width}" height="${(parent.parent.height*9/10)+35}">
<datapath name="griddp" pooling="true" replication="lazy"/>

<gridcolumn height="23" width="120" fontstyle="bold" resizable="false">Module
<text datapath="@name" />
</gridcolumn>

<gridcolumn height="23" width="0" visible="false" fontstyle="bold" resizable="true">To
<text datapath="to/text()" visible="false" />
</gridcolumn>
</grid>

and my data set is :
<dataset name="mailconfigset" request="false" timeout="600000" http="true" />

But when i update my XML on Server my grid become invisible. Can You plz tell me what is the Problem?

Thanks in advance..