jQWidgets Forums

Tagged: Angular, angular grid, angularjs, cellclassname, export, Exportdata, grid, jquery grid, jqxangular.js, jqxgrid

This topic contains 5 replies, has 2 voices, and was last updated by Dimitar 9 years, 8 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Export is not working with CellClassName Posts
August 27, 2015 at 11:01 am Export is not working with CellClassName #75206
shan_vs
Participant
Hi,

Export is not working with CellclassName Property.

Example:

sample.html

`<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>The sample illustrates how to add custom CSS styles to Grid cells under specific conditions.</title>
<link rel=”stylesheet” href=”../common/assets/css/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”../common/assets/css/style.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 src=”cellClassCtrl.js”></script>
</head>
<body class=’default’ ng-controller=’sample’ ng-app=”demoAPP”>
<style>
.green {
color: black\9;
background-color: #b6ff00\9;
}
.yellow {
color: black\9;
background-color: yellow\9;
}
.red {
color: black\9;
background-color: #e83636\9;
}

.green:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .green:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
color: black;
background-color: #b6ff00;
}
.yellow:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .yellow:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
color: black;
background-color: yellow;
}
.red:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .red:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
color: black;
background-color: #e83636;
}
</style>
<div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
<div id=”jqxgrid”></div>
<input type=”button” id=”exportBtn”>Export</input>
</div>
</body>
</html>
```
<strong>Controller.js</strong>
```
var demoAPP = angular.module(“demoAPP”, [‘jqwidgets’]);

demoAPP.controller(“sample”,function($scope){
var data = [{ “ProductName”: ‘XYZ’, “QuantityPerUnit”:12, “UnitPrice”: 123.2, “UnitsInStock”: 15, “Discontinued”: 1},
{ “ProductName”: ‘asd’, “QuantityPerUnit”:1, “UnitPrice”: 129.2, “UnitsInStock”: 49, “Discontinued”: 0},
{ “ProductName”: ‘qwe’, “QuantityPerUnit”:16, “UnitPrice”: 223.2, “UnitsInStock”: 15342.8, “Discontinued”: 1},
{ “ProductName”: ‘errt’, “QuantityPerUnit”:29, “UnitPrice”: 223.2, “UnitsInStock”: 15342.8, “Discontinued”: 0},
{ “ProductName”: ‘cvb’, “QuantityPerUnit”:5, “UnitPrice”: 193.2, “UnitsInStock”: 123452.8, “Discontinued”: 1}]

var source =
{
datatype: “JSON”,
datafields: [
{ name: ‘ProductName’, type: ‘string’ },
{ name: ‘QuantityPerUnit’, type: ‘int’ },
{ name: ‘UnitPrice’, type: ‘float’ },
{ name: ‘UnitsInStock’, type: ‘float’ },
{ name: ‘Discontinued’, type: ‘bool’ }
],
localData: data
};

var cellclass = function (row, columnfield, value) {
if (value < 20) {
return ‘red’;
}
else if (value >= 20 && value < 50) {
return ‘yellow’;
}
else return ‘green’;
}

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’, datafield: ‘ProductName’, width: 250 },
{ text: ‘Quantity per Unit’, datafield: ‘QuantityPerUnit’, cellsalign: ‘right’, align: ‘right’, width: 120 },
{ text: ‘Unit Price’, datafield: ‘UnitPrice’, align: ‘right’, cellsalign: ‘right’, cellsformat: ‘c2’, width: 100 },
{ text: ‘Units In Stock’, datafield: ‘UnitsInStock’, cellsalign: ‘right’, cellclassname: cellclass, width: 100 },
{ text: ‘Discontinued’, columntype: ‘checkbox’, datafield: ‘Discontinued’ },
]
});

$(“#exportBtn”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xls’, ‘jqxGrid’);
});

});`

If I try to export, I am getting “TypeError : ‘0’ is not function. Please help.
August 28, 2015 at 11:50 am Export is not working with CellClassName #75264

Dimitar
Participant

Hi shan_vs,

To be able to call the method exportdata, you need to include references to the scripts jqxdata.export.js and jqxgrid.export.js.

Best Regards,
Dimitar

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

August 31, 2015 at 4:50 am Export is not working with CellClassName #75290

shan_vs
Participant

Hi,

Even after the inclusion of the two references to the scripts jqxdata.export.js and jqxgrid.export.js the expor t is not working and showing the same error :

TypeError : ’0′ is not a function

August 31, 2015 at 6:05 am Export is not working with CellClassName #75295
Dimitar
Participant
Hi shan_vs,

The following example works fine on our side and no error is thrown. Please make sure you are using the latest version of jQWidgets (3.8.2).
```
<!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/jqxdata.export.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="../../jqwidgets/jqxgrid.export.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 cellclass = function (row, columnfield, value) {
                if (value < 20) {
                    return 'red';
                }
                else if (value >= 20 && value < 50) {
                    return 'yellow';
                }
                else return 'green';
            }

            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', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellclassname: cellclass, width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' },
                ]
            });

            $('#export').click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid');
            });
        });
    </script>
</head>
<body class='default'>
    <style>
        .green
        {
            color: black\9;
            background-color: #b6ff00\9;
        }
        .yellow
        {
            color: black\9;
            background-color: yellow\9;
        }
        .red
        {
            color: black\9;
            background-color: #e83636\9;
        }
        
        .green:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .green:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected)
        {
            color: black;
            background-color: #b6ff00;
        }
        .yellow:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .yellow:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected)
        {
            color: black;
            background-color: yellow;
        }
        .red:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .red:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected)
        {
            color: black;
            background-color: #e83636;
        }
    </style>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
    </div>
    <br />
    <button id="export">
        Export grid</button>
</body>
</html>
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
August 31, 2015 at 6:54 am Export is not working with CellClassName #75300

shan_vs
Participant

It does work fine when you write it in a single file. But, when I try to write it separetely in cellClassCtrl.js and sample.html file….it is not working properly!!! I need to write the html and js part separetely only.

I have included again the files for your references.

sample.html

<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>The sample illustrates how to add custom CSS styles to Grid cells under specific conditions.</title>
<link rel=”stylesheet” href=”../common/assets/css/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”../common/assets/css/style.css” type=”text/css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.js”></script>
<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/jqxdata.export.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=”../../jqwidgets/jqxgrid.export.js”></script>
<script src=”cellClassCtrl.js”></script>
</head>
<body class=’default’ ng-controller=’sample’ ng-app=”demoAPP”>
<style>
.green {
color: black\9;
background-color: #b6ff00\9;
}
.yellow {
color: black\9;
background-color: yellow\9;
}
.red {
color: black\9;
background-color: #e83636\9;
}

.green:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .green:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
color: black;
background-color: #b6ff00;
}
.yellow:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .yellow:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
color: black;
background-color: yellow;
}
.red:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .red:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
color: black;
background-color: #e83636;
}
</style>
<div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
<div id=”jqxgrid”></div>
<input type=”button” id=”exportBtn”>Export</input>
</div>
</body>
</html>

cellClassCtrl.js

var demoAPP = angular.module(“demoAPP”, [‘jqwidgets’]);

demoAPP.controller(“sample”,function($scope){
var data = [{ “ProductName”: ‘XYZ’, “QuantityPerUnit”:12, “UnitPrice”: 123.2, “UnitsInStock”: 15, “Discontinued”: 1},
{ “ProductName”: ‘asd’, “QuantityPerUnit”:1, “UnitPrice”: 129.2, “UnitsInStock”: 49, “Discontinued”: 0},
{ “ProductName”: ‘qwe’, “QuantityPerUnit”:16, “UnitPrice”: 223.2, “UnitsInStock”: 15342.8, “Discontinued”: 1},
{ “ProductName”: ‘errt’, “QuantityPerUnit”:29, “UnitPrice”: 223.2, “UnitsInStock”: 15342.8, “Discontinued”: 0},
{ “ProductName”: ‘cvb’, “QuantityPerUnit”:5, “UnitPrice”: 193.2, “UnitsInStock”: 123452.8, “Discontinued”: 1}]

var source =
{
datatype: “JSON”,
datafields: [
{ name: ‘ProductName’, type: ‘string’ },
{ name: ‘QuantityPerUnit’, type: ‘int’ },
{ name: ‘UnitPrice’, type: ‘float’ },
{ name: ‘UnitsInStock’, type: ‘float’ },
{ name: ‘Discontinued’, type: ‘bool’ }
],
localData: data
};

var cellclass = function (row, columnfield, value) {
if (value < 20) {
return ‘red’;
}
else if (value >= 20 && value < 50) {
return ‘yellow’;
}
else return ‘green’;
}

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’, datafield: ‘ProductName’, width: 250 },
{ text: ‘Quantity per Unit’, datafield: ‘QuantityPerUnit’, cellsalign: ‘right’, align: ‘right’, width: 120 },
{ text: ‘Unit Price’, datafield: ‘UnitPrice’, align: ‘right’, cellsalign: ‘right’, cellsformat: ‘c2’, width: 100 },
{ text: ‘Units In Stock’, datafield: ‘UnitsInStock’, cellsalign: ‘right’, cellclassname: cellclass, width: 100 },
{ text: ‘Discontinued’, columntype: ‘checkbox’, datafield: ‘Discontinued’ },
]
});

$(“#exportBtn”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xls’, ‘jqxGrid’);
});

});

September 1, 2015 at 6:03 am Export is not working with CellClassName #75329
Dimitar
Participant
Hi shan_vs,

You also need to add references to AngularJS (e.g. to angular.min.js) and jqxangular.js. When I added these, your example worked as expected. Here is a list of all necessary references:
```
<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="../../scripts/angular.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/jqxdata.export.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxangular.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="../../jqwidgets/jqxgrid.export.js"></script>
<script src="cellClassCtrl.js"></script>
```
Best Regards,
Dimitar

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

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.