Login

08-18-2010, 09:57 AM

[eluser]T!Du$[/eluser]
Hi,

First of all, I apologize for my worst english...

So, I've found a JQuery Plug-in that allows me to create a dynamic table (Flexigrid).

I've been trying to use it with 4D (a programming language).

But I've only had problems trying to make it work...

I show you my code and explain you where is my problem, here we go :

Code:
$("#TestTableauJQuery").flexigrid({

        height: 200, //default height

        width: 'auto', //auto width

        resizable: true, //resizable table

        url: 'ReservationSpryRecherche/'+string, //ajax url

        method: 'POST', // data sending method

        dataType: 'xml', // type of data loaded

        errormsg: 'Connection Error',

        nowrap: true, //

        procmsg: 'Processing, please wait ...',

        nomsg: 'No items',

        colModel : [

                {display: '1', name : '1', width : 100, sortable : true, align: 'left'}

                ],

            buttons : [

                {name: 'Add', bclass: 'add', onpress : test},

                {name: 'Delete', bclass: 'delete', onpress : test},

                {separator: true}

                ],

        minColToggle: 1, //minimum allowed column to be hidden

        autoload: true,

        blockOpacity: 0.5

    });

    function test(){

        alert('hello world');

    }

The biggest problem is this part, for me :

Code:
url: 'ReservationSpryRecherche/'+string, //ajax url

I've put my 4D function. This function create the XML document and send it or in text format or like a xml document... Is it correct ?

Thank you

08-19-2010, 02:54 AM

[eluser]T!Du$[/eluser]
I've found the solution... I've to put a static way for my xml document.

For people who need some information about how make work with the XML document :

XML : here

and html code :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

&lt;html&gt;

&lt;head&gt;

    &lt;title&gt;Flexigrid Sample - XML&lt;/title&gt;

    &lt;style type="text/css"&gt;

        @import "css/flexigrid/flexigrid.css";

        @import "style.css";

    &lt;/style&gt;

    [removed][removed]

    [removed][removed]

    [removed]

        $(document).ready(function() {

            $('.gridList').flexigrid({

                url: 'sample2_xml.xml',

                dataType: 'xml',

                rp: 50,

                rpOptions: [50],

                debug: true,

                colModel: [

                    {display: 'Column 1', name: 'column1', sortable: true, width: 70 },

                    {display: 'Column 2', name: 'column2', sortable: true, width: 70 },

                    {display: 'Column 3', name: 'column3', sortable: true, width: 70 },

                    {display: 'Column 4', name: 'column4', sortable: true, width: 70 },

                    {display: 'Column 5', name: 'column5', sortable: true, width: 70 },

                    {display: 'Column 6', name: 'column6', sortable: true, width: 70 },

                    {display: 'Column 7', name: 'column7', sortable: true, width: 70 },

                    {display: 'Column 8', name: 'column8', sortable: true, width: 70 },

                    {display: 'Column 9', name: 'column9', sortable: true, width: 70 },

                    {display: 'Column 10', name: 'column10', sortable: true, width: 70 },

                    {display: 'Column 11', name: 'column11', sortable: true, width: 70 },

                    {display: 'Column 12', name: 'column12', sortable: true, width: 70 },

                    {display: 'Column 13', name: 'column13', sortable: true, width: 70 },

                    {display: 'Column 14', name: 'column14', sortable: true, width: 70 },

                    {display: 'Column 15', name: 'column15', sortable: true, width: 70 },

                    {display: 'Column 16', name: 'column16', sortable: true, width: 70 },

                    {display: 'Column 17', name: 'column17', sortable: true, width: 70 },

                    {display: 'Column 18', name: 'column18', sortable: true, width: 70 },

                    {display: 'Column 19', name: 'column19', sortable: true, width: 70 },

                    {display: 'Column 20', name: 'column20', sortable: true, width: 70 },

                    {display: 'Column 21', name: 'column21', sortable: true, width: 70 },

                    {display: 'Column 22', name: 'column22', sortable: true, width: 70 },

                    {display: 'Column 23', name: 'column23', sortable: true, width: 70 },

                    {display: 'Column 24', name: 'column24', sortable: true, width: 70 },

                    {display: 'Column 25', name: 'column25', sortable: true, width: 70 },

                    {display: 'Column 26', name: 'column26', sortable: true, width: 70 },

                    {display: 'Column 27', name: 'column27', sortable: true, width: 70 },

                    {display: 'Column 28', name: 'column28', sortable: true, width: 70 },

                    {display: 'Column 29', name: 'column29', sortable: true, width: 70 },

                    {display: 'Column 30', name: 'column30', sortable: true, width: 70 }

                ],

                usepager: true

            });

        });

    [removed]

&lt;/head&gt;

&lt;body&gt;

    <h1>Flexigrid Sample - XML</h1>

    <h2>Introduction</h2>

    <p>

        This demonstrates <a href="http://www.webplicity.net/flexigrid/">Flexigrid</a> for jQuery with a XML data source.

        The data source used can be found here: <a href="sample2_xml.xml">sample2_xml.xml</a>.

    </p>

    <p>

        This Version is modified to load heavy data faster and without lagging of the interface.

    </p>

    <h2>Example</h2>

    <div class="gridList">&lt;!-- Empty --&gt;</div>

    <h2>Contact</h2>

    <p>

        For more information contact me: <span class="securedEmail">gregor.noczinski 3t optivo.net</span>.

    </p>

&lt;/body&gt;

&lt;/html&gt;