jQuery UI Widgets Forums Grid Grid With separate settings

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

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
  • 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

    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/

    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

    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/

    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

    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/

    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

    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/

    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

    • This reply was modified 9 years, 8 months ago by  Sibeesh Venu.
    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/

    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

    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/

    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

    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/

    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

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

You must be logged in to reply to this topic.