Grid With separate settings - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: column, configuration, css, cut, database, dynamic, empty row, grid, jqxgrid, load, number, Print, property, settings, styles, thousands separator

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

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →

Author

Grid With separate settings Posts

October 30, 2014 at 10:43 am Grid With separate settings #61869

Sibeesh Venu

Participant

Dear Team,

Is there any way I can set the theme , configuration properties and ,styles dynamically ? May be I will save the details in DB. So when I load the grid , the data’s along with the settings should get bind to the grid. In this situation , I can have separate settings for separate grids. I have populate the grid with dynamic data already. Now I need to do a requirement as mentioned above. Can you please help me with that? Thanks In Advance 

Kindest Regards
Sibeesh

October 31, 2014 at 8:10 am Grid With separate settings #61926

Dimitar

Participant

Hello Sibeesh,

If you load the grid settings object as a JSON string from the database, you can convert it to a JavaScript object through jQuery.parseJSON() and then pass it to the grid for initialization.

Best Regards,
Dimitar

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

October 31, 2014 at 8:57 am Grid With separate settings #61929

Sibeesh Venu

Participant

Hi Dimitar,

Thanks a lot for the reply. Do you have any working demo for the mentioned requirement . If yes please share it here .

Thanks And Regards
Sibeesh

November 3, 2014 at 8:32 am Grid With separate settings #62037

Dimitar

Participant

Hello Sibeesh,

Here is an example. We hope it is 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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            for (var i = 0; i < 100; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array"
            };

            var gridSettingJSON = '{ "source": "new $.jqx.dataAdapter(source)", "columns": [{ "text": "First Name", "datafield": "firstname", "width": 100 }, { "text": "Last Name", "datafield": "lastname", "width": 100 }, { "text": "Product", "datafield": "productname", "width": 180 }, { "text": "Quantity", "datafield": "quantity", "width": 80, "cellsalign": "right", "cellsformat": "c2" }, { "text": "Total", "datafield": "total", "width": 100, "cellsalign": "right", "cellsformat": "c2" }]}';

            var gridSettingsObject = JSON.parse(gridSettingJSON, function (key, value) {
                if (value && (typeof value === 'string') && value.indexOf("new") === 0) {
                    // we can only pass a function as string in JSON ==> doing a real function
                    eval("var jsFunc = " + value);
                    return jsFunc;
                }

                return value;
            });

            $("#jqxgrid").jqxGrid(gridSettingsObject);
        });
    </script>
</head>
<body class="default">
    <div id="jqxWidget" style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

November 3, 2014 at 12:48 pm Grid With separate settings #62056

Sibeesh Venu

Participant

Dear Dimitar,

Thanks a lot for the reply. Yeah i helped me a lot. But now i am facing an another issue, that JQX grid is taking only the first number from a number as data. Eg: it is taking 3 only from 3,407,413. I think comma is the problem. Is there anything i need to do separately for this. Please reply.

Thanks And Regards
Sibeesh

November 4, 2014 at 7:05 am Grid With separate settings #62077

Dimitar

Participant

Hi Sibeesh,

In your data source, numbers should be without thousands separators (e.g. 3407413). When you load the data in the grid, they will be automatically formatted (e.g. 3,407,413).

Best Regards,
Dimitar

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

November 5, 2014 at 4:28 am Grid With separate settings #62139

Sibeesh Venu

Participant

Dear Dimitar,

Thanks a lot for the reply. Is it possible to disable that option, since my data source already have a numbers with thousands separators, i don’t want that to happen again in client side. So i would like to disable that property. In which js i need to comment those lines.

Thanks And Regards
Sibeesh

November 5, 2014 at 7:47 am Grid With separate settings #62161

Dimitar

Participant

Hello Sibeesh,

Here is our suggestion (note that the “quantity” datafield is loaded as a string):

<!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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = '[{"productname": "Apples", "quantity": "36,000"}, {"productname": "Melons", "quantity": "11,300"}]';

            var source =
            {
                localdata: data,
                datafields: [
                    { name: 'productname', type: 'string' },
                    { name: 'quantity', type: 'string' }
                ],
                datatype: "json"
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                beforeLoadComplete: function (data) {
                    var newRecords = new Array();
                    for (var i = 0; i < data.length; i++) {
                        var quantity = parseFloat(data[i].quantity.replace(/,/g, ''));
                        newRecords.push({ productname: "Apples", quantity: quantity });
                    }
                    return newRecords;
                },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                columns: [
                { text: 'Product', datafield: 'productname', width: 180 },
                { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right', cellsformat: 'f' }
            ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

November 5, 2014 at 8:25 am Grid With separate settings #62166

Sibeesh Venu

Participant

Dear Dimitar,

Thanks a lot for the reply. Why i am getting an output like this even i gave the cell formatting as D while excel export. Can you please help me with that?

Backoffice Systems Database & BI
Availability $3,407,606.00 $3,407,606.00

NB: I have tried with d,d0,d1 also
Thanks And Regards
Sibeesh

November 5, 2014 at 10:42 am Grid With separate settings #62175

Dimitar

Participant

Hi Sibeesh,

Make sure you have correctly implemented our solution. We do not experience any issues when exporting the grid to Excel:

<!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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.export.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.export.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = '[{"productname": "Apples", "quantity": "36,000"}, {"productname": "Melons", "quantity": "11,300"}]';

            var source =
            {
                localdata: data,
                datafields: [
                    { name: 'productname', type: 'string' },
                    { name: 'quantity', type: 'string' }
                ],
                datatype: "json"
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                beforeLoadComplete: function (data) {
                    var newRecords = new Array();
                    for (var i = 0; i < data.length; i++) {
                        var quantity = parseFloat(data[i].quantity.replace(/,/g, ''));
                        newRecords.push({ productname: data[i].productname, quantity: quantity });
                    }
                    return newRecords;
                },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                ready: function () {
                    $("#jqxgrid").jqxGrid("exportdata", "xls", "myGrid");
                },
                columns: [
                { text: 'Product', datafield: 'productname', width: 180 },
                { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right', cellsformat: 'f' }
            ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

November 5, 2014 at 11:31 am Grid With separate settings #62178

Sibeesh Venu

Participant

Dear Dimitar,

Thanks a lot for the reply. The solution you have given was ok. But the thing is in that i need to set quantity as string. So the default filtering options are loaded for the string type. Anyway i have solved the issue. Thanks a lot.
And While printing some of the columns are getting cut. Any solution for that?
Thanks And Regards
Sibeesh

November 6, 2014 at 9:47 am Grid With separate settings #62279

Dimitar

Participant

Hi Sibeesh,

We experience no such issue with the demo Data Printing. Please share how we can reproduce it (you can post a JSFiddle example we can test).

Best Regards,
Dimitar

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

November 10, 2014 at 8:21 am Grid With separate settings #62449

Sibeesh Venu

Participant

Hi ,
I have populated a grid, actually the data source has only one data,but still grid loads with additional empty rows. Even though it is not visible, it created some empty space in my UI area. Please note the below image.

I am saying about these empty divs. Is there any way i can remove these?

Kindest Regards
Sibeesh

November 10, 2014 at 10:08 am Grid With separate settings #62460

Dimitar

Participant

Hi Sibeesh,

You may try setting the grid’s autoheight property to true.

Best Regards,
Dimitar

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

November 11, 2014 at 7:18 am Grid With separate settings #62508

Sibeesh Venu

Participant

Hi Dimitar,

I have already solved it. Thanks a lot for the reply. I am facing an another issue. Now i have given my cell format as “d”. And the grid is formulated. But there is no 1000 formatting for the column values which are all contains $ with it. And also when i export as excel , those columns which has $ values is showing blank. Any idea to solve this. Any help is appreciated.
Best Regards,
Sibeesh

Author

Posts

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →

You must be logged in to reply to this topic.