jQuery UI Widgets › Forums › Grid › How to dynamically remove cellsrenderer of JQXGrid column

Tagged: , , , , , ,

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 10 years, 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    How to dynamically remove cellsrenderer of JQXGrid column Posts
  • September 26, 2014 at 7:11 am How to dynamically remove cellsrenderer of JQXGrid column #60126

    sam2000
    Participant

    Hi,

    I am trying to remove cellsrenderer of a JQXGrid column by using this code:

    $("#jqxgrid1").jqxGrid('setcolumnproperty', 'column1', 'cellsrenderer', null);

    However, this is not working. Could you please show me how to remove cellsrenderer altogether for this column?

    Regards,
    Sam

    September 26, 2014 at 12:16 pm How to dynamically remove cellsrenderer of JQXGrid column #60157

    Dimitar
    Participant

    Hello Sam,

    Here is a different approach which might be helpful to you:

    <!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/products.xml";

            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ProductName', type: 'string' },
                    { name: 'QuantityPerUnit', type: 'int' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
                root: "Products",
                record: "Product",
                id: 'ProductID',
                url: url
            };

            var enabled = true;

            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                if (enabled) {
                    if (value < 20) {
                        return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                    }
                    else {
                        return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                    }
                }
            }

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

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ],
                columngroups: [
                    { text: 'Product Details', align: 'center', name: 'ProductDetails' }
                ]
            });

            $("#toggleCellsrenderer").jqxButton();
            $("#toggleCellsrenderer").click(function () {
                if (enabled) {
                    enabled = false;
                    $("#jqxgrid").jqxGrid("refresh");
                } else {
                    enabled = true;
                    $("#jqxgrid").jqxGrid("refresh");
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
    <br />
    <button id="toggleCellsrenderer">
        Toggle cellsrenderer</button>
</body>
</html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    September 26, 2014 at 12:22 pm How to dynamically remove cellsrenderer of JQXGrid column #60158

    sam2000
    Participant

    Thanks Dimitar, so I assume there is no direct way of removing cellsrendererusing setcolumnproperty method.

    Regards,
    Sam

    September 29, 2014 at 5:01 am How to dynamically remove cellsrenderer of JQXGrid column #60219

    Dimitar
    Participant

    Hi Sam,

    Unfortunately, setcolumnproperty cannot be used in this case.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

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

You must be logged in to reply to this topic.