jQWidgets Forums

jQuery UI Widgets › Forums › Grid › grid dynamic columns + cellrender

Tagged: 

This topic contains 2 replies, has 2 voices, and was last updated by  Peter Stoev 10 years, 4 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    grid dynamic columns + cellrender Posts
  • January 15, 2015 at 1:11 pm grid dynamic columns + cellrender #65428

    pcesar12
    Participant

    Hello

    I have some in use dynamic columns + cell render.

    i gerate dynamic columns in php

    
for($i=1; $i<=7; $i++){

        $date= new DateTime('today');
        date_sub($date,date_interval_create_from_date_string("$i days"));
        $date =  date_format($date,"Y-m-d");

        //echo $date . "<br>";

        $query_col[] = array(
            'text' => $date,
            'datafield' => 'D'.$i,
            'width' => 'auto',
            'align' => 'center',
            'cellsAlign' => 'center',
            'cellsrenderer'  => 'cellclassPMQ'

        );

    }

    i set cellrenderer is cellclassPMQ…

    in js i have

    

var cellclassPMQ = function (row, column, value) {

            if (value >= 97 && value !=='') {
                return '<table bgcolor="#006400" width=100% height=100%><td align=center><tr align=center><TH><font color="white">' + value + '</font></TH></tr></td></table>';
            };

            if (value >= 95 && value < 97 && value !=='') {
                return '<table bgcolor="#2E8B57" width=100% height=100%><td align=center><tr align=center><TH><font color="white">' + value + '</font></TH></tr></td></table>';
            };

            if (value >= 90 && value < 95 && value !=='') {
                return '<table bgcolor="#FFFF00" width=100% height=100%><td align=center><tr align=center><TH><font color="black">' + value + '</font></TH></tr></td></table>';
            };

            if (value >= 85 && value < 90 && value !=='') {
                return '<table bgcolor="#FF9900" width=100% height=100%><td align=center><tr align=center><TH><font color="white">' + value + '</font></TH></tr></td></table>';
            };

            if (value >= 75 && value < 85 && value !=='') {
                return '<table bgcolor="#CC6600" width=100% height=100%><td align=center><tr align=center><TH><font color="white">' + value + '</font></TH></tr></td></table>';
            };

            if (value < 75 && value !=='') {
                return '<table bgcolor="#FF0000" width=100% height=100%><td align=center><tr align=center><TH><font color="white">' + value + '</font></TH></tr></td></table>';
            };

        };

    my grid generate

    

var source =  {
            datatype: "json",
            url: $url

        };

        var cellclassPMQ = function (row, column, value) {

            if (value >= 97 && value !=='') {
                return '<table bgcolor="#006400" width=100% height=100%><td align=center><tr align=center><TH><font color="white">' + value + '</font></TH></tr></td></table>';
            };

            if (value >= 95 && value < 97 && value !=='') {
                return '<table bgcolor="#2E8B57" width=100% height=100%><td align=center><tr align=center><TH><font color="white">' + value + '</font></TH></tr></td></table>';
            };

            if (value >= 90 && value < 95 && value !=='') {
                return '<table bgcolor="#FFFF00" width=100% height=100%><td align=center><tr align=center><TH><font color="black">' + value + '</font></TH></tr></td></table>';
            };

            if (value >= 85 && value < 90 && value !=='') {
                return '<table bgcolor="#FF9900" width=100% height=100%><td align=center><tr align=center><TH><font color="white">' + value + '</font></TH></tr></td></table>';
            };

            if (value >= 75 && value < 85 && value !=='') {
                return '<table bgcolor="#CC6600" width=100% height=100%><td align=center><tr align=center><TH><font color="white">' + value + '</font></TH></tr></td></table>';
            };

            if (value < 75 && value !=='') {
                return '<table bgcolor="#FF0000" width=100% height=100%><td align=center><tr align=center><TH><font color="white">' + value + '</font></TH></tr></td></table>';
            };

        };

        var dataAdapter = new $.jqx.dataAdapter(source, {
                autoBind: true,
                downloadComplete: function (data) {
                    var columns = data[0].columns;
                    var rows = data[1].rows;
                    var gridAdapter = new $.jqx.dataAdapter({
                        datafields: [
                            {name: 'rnc'},
                            {name: 'cell'},
                            {name: 'peso'},
                            {name: 'D1'},
                            {name: 'D2'},
                            {name: 'D3'},
                            {name: 'D4'},
                            {name: 'D5'},
                            {name: 'D6'},
                            {name: 'D7'}
                        ],
                        localdata: rows
                    });

                    $("#jqxgrid").jqxGrid('hideloadelement');
                    $("#jqxgrid").jqxGrid('beginupdate', true);
                    $("#jqxgrid").jqxGrid(
                        {
                            source: gridAdapter,
                            columns: columns
                        });

                    console.log(columns);

                    $("#jqxgrid").jqxGrid('endupdate');
                }
            }
        );

        $("#jqxgrid").jqxGrid(
            {
                width: '100%',
                height: '100%',
                pageable: true,
                pageSize: 50,
                theme: 'metro',
                pagesizeoptions: ['50', '100', '200'],
                pagerButtonsCount: 50,
                sortable: true,
                filterable: true,
                showfilterrow: true,
                columnsResize: false
            });
        $("#jqxgrid").jqxGrid('showloadelement');

    i send cellrender in dynamic colum but on page load i dont see nothing…

    but if i dont use dynamic colum its work..

    see not dynamc code

    

var source =  {
            datatype: "json",
            datafields: [
                {name: 'rnc'},
                {name: 'cell'},
                {name: 'peso'},
                {name: 'D1'},
                {name: 'D2'},
                {name: 'D3'},
                {name: 'D4'},
                {name: 'D5'},
                {name: 'D6'},
                {name: 'D7'}
            ],
            url: $url

        };

        var dataAdapter = new $.jqx.dataAdapter(source,
            {
                downloadComplete: function (data, status, xhr) {
                },
                loadComplete: function (data) {

                },
                loadError: function (xhr, status, error) { }
            });

        var cellclassPMQ = function (row, columnfield, value, columnproperties) {

            if (value >= 97 && value !=='') {
                return '<table bgcolor="#006400" width=100% height=100%><td align=center><tr align=center><TH><font color="white">' + value + '</font></TH></tr></td></table>';
            };

            if (value >= 95 && value < 97 && value !=='') {
                return '<table bgcolor="#2E8B57" width=100% height=100%><td align=center><tr align=center><TH><font color="white">' + value + '</font></TH></tr></td></table>';
            };

            if (value >= 90 && value < 95 && value !=='') {
                return '<table bgcolor="#FFFF00" width=100% height=100%><td align=center><tr align=center><TH><font color="black">' + value + '</font></TH></tr></td></table>';
            };

            if (value >= 85 && value < 90 && value !=='') {
                return '<table bgcolor="#FF9900" width=100% height=100%><td align=center><tr align=center><TH><font color="white">' + value + '</font></TH></tr></td></table>';
            };

            if (value >= 75 && value < 85 && value !=='') {
                return '<table bgcolor="#CC6600" width=100% height=100%><td align=center><tr align=center><TH><font color="white">' + value + '</font></TH></tr></td></table>';
            };

            if (value < 75 && value !=='') {
                return '<table bgcolor="#FF0000" width=100% height=100%><td align=center><tr align=center><TH><font color="white">' + value + '</font></TH></tr></td></table>';
            };

        };

        $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                width: '100%',
                height: '100%',
                //autoheight: true,
                //autorowheight: true,
                //showpinnedcolumnbackground: true,
                pageable: true,
                pageSize: 50,
                theme: 'metro',
                pagesizeoptions: ['50', '100', '200'],
                pagerButtonsCount: 50,
                sortable: true,
                filterable: true,
                showfilterrow: true,
                columnsResize: false,
                //selectionmode: 'multipleRows',
                //selectionmode: 'multiplecellsextended',
                columns: [
                    { text: 'RNC', dataField: 'rnc', width: '85px', align:'center',cellsAlign:'center', pinned: true },
                    { text: 'Cell', dataField: 'cell', width: '85px', align:'center',cellsAlign:'center',pinned: true },
                    { text: 'Peso', dataField: 'peso', width: '85px', align:'center',cellsAlign:'center',pinned: true },
                    { text: 'D-1', dataField: 'D1', width: '85px', align:'center',cellsAlign:'center', cellsrenderer: cellclassPMQ, pinned: true },
                    { text: 'D-2', dataField: 'D2', width: '85px', align:'center',cellsAlign:'center', cellsrenderer: cellclassPMQ, pinned: true },
                    { text: 'D-3', dataField: 'D3', width: '85px', align:'center',cellsAlign:'center', cellsrenderer: cellclassPMQ,pinned: true },
                    { text: 'D-4', dataField: 'D4', width: '85px', align:'center',cellsAlign:'center', cellsrenderer: cellclassPMQ,pinned: true },
                    { text: 'D-5', dataField: 'D5', width: '85px', align:'center',cellsAlign:'center', cellsrenderer: cellclassPMQ,pinned: true },
                    { text: 'D-6', dataField: 'D6', width: '85px', align:'center',cellsAlign:'center', cellsrenderer: cellclassPMQ,pinned: true },
                    { text: 'D-7', dataField: 'D7', width: '85px', align:'center',cellsAlign:'center', cellsrenderer: cellclassPMQ,pinned: true }
                ]
            });

    why dont work??

    is possible to use dynamic colum + cellrender

    best regards

    January 15, 2015 at 1:18 pm grid dynamic columns + cellrender #65430

    pcesar12
    Participant

    i think problem is here:

    i send dynamic colum in php

     $query_col[] = array(
.....
            'cellsrenderer'  => 'cellclassPMQ'
....
        );

    arrive in js:

    cellsrenderer: ‘cellclassPMQ‘<<<< with QUOTE

    in js cellrenderer need without this quote that php send…

    any ideia how i send cellclassPMQ without quotes to js in my json_encode();??

    January 15, 2015 at 1:20 pm grid dynamic columns + cellrender #65432

    Peter Stoev
    Keymaster

    Hi pcesar12,

    cellsrenderer is expected to be set to a function as in our examples. cellsrenderer should return HTML String as a result of that function call.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.