jQWidgets Forums

Tagged: datagrid add row

This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 11 years, 5 months ago.

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

Author

SubGrid uid Posts

January 8, 2014 at 6:16 pm SubGrid uid #47577

hrc

Participant

Hi Peter,

I’m struggling in a difficult situation, maybe I want too much fom your plugin!

I created a masterGrid and a subGrid. When I press ADD button in the mainGrid a new line at the top of the mainGrid is created:


                                var rowid = 999999999; // tmp rowid for pending insert
                                var row = new Object;
                                row["Id"] = 999999999; // Setup Id for pending insert
                                $("#jqxgrid").jqxGrid('addrow', rowid, row, 'top');

As you can see I call the addrow with a fake Id (999999999) just as flag for my service, telling him: If I call you with Id=999999999, then is not a row update, BUT a rowinsert.
Then the user insert something an then on exit this is executed:


                // updaterow Variant
                updaterow: function(rowid, rowdata, commit) {
                    var data = $.param(rowdata);
                    //alert(data);
                    log("UUU data: " + data + " rowid: " + rowid + " rowdata: " + rowdata);
                    $.ajax({
                        cache: false,
                        dataType: 'json',
                        url: 'Variant3/EditVariant',
                        type: "POST",
                        data: data,
                        success: function(data, status, xhr) {
                            log("UUU Variant updaterow -> data: " + data.success + " status: " + status + " xhr: " + xhr);
                            // If the insert is ok set the Id field of the grid == the Id returned from the service
                            // NOTES: The service knows if he get Id=999999999 is not an update, but an insert, so
                            // go with insert and send but the new Id for this row.
                            if (data.success) {
                                log("UUU " + data.Id + " rowid: " + rowid);
                                $("#jqxgrid").jqxGrid('setcellvaluebyid', rowid, "Id", data.Id);
                                $("#jqxgrid").jqxGrid('setcellvaluebyid', rowid, "uid", data.Id);
                                inAdd = false;
                            }
                            commit(true);
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            alert("Status: " + jqXHR.statusText + " Error: " + errorThrown);
                            log("UUU Variant updaterow -> jqXHR: " + jqXHR + " textStatus: " + textStatus + " Error: " + errorThrown);
                            inAdd = true;
                            commit(false);
                        }
                    });
                }

Now THE PROBLEM is that your uid is NO MORE == my Id. So as you can see I tried to align yout uid with my Id calling:
$(“#jqxgrid”).jqxGrid(‘setcellvaluebyid’, rowid, “uid”, data.Id);
but doesn’t work.
THE BIGGEST problem is that since this is the MASTER ROW, if the uid and Id are not aligned, when the user click to open the deatails of the just created row, during the ‘initrowdetails’ are passed as record.uid=999999999 and not the right Id. So when the user insert something in the details, at my service as parentId will be passed 999999999 and not the right Id.

I hope I was able to explain you what is happening, I’m confident in your help.

Best regards,

January 8, 2014 at 7:13 pm SubGrid uid #47581

Peter Stoev

Keymaster

Hi hrc,

You can find below a working sample.

1. When you add a row and pass the ROW ID parameter, that would be the Row’s Unique ID.
2. After you select and Click the Update Row button, the “updaterow” method of jqxGrid would be called which will then call the source object’s “updaterow” function. The Alert displays the correct Row ID which you passed in the “addrow” method call.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example demostrates how we can manipulate data at client side. The Grid plugin provides you callback functions when you add, remove or update a row.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.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.selection.js"></script> 
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = {};

            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"
            ];

            var generaterow = function (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;
                return row;
            }

            var source =
            {
                localdata: [],
                datatype: "local",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'total', type: 'number' }
                ],
                addrow: function (rowid, rowdata, position, commit) {
                    // synchronize with the server - send insert command
                    // call commit with parameter true if the synchronization with the server is successful 
                    //and with parameter false if the synchronization failed.
                    // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
                    commit(true);
                },
                deleterow: function (rowid, commit) {
                    // synchronize with the server - send delete command
                    // call commit with parameter true if the synchronization with the server is successful 
                    //and with parameter false if the synchronization failed.
                    commit(true);
                },
                updaterow: function (rowid, newdata, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failed.
                    alert(rowid);
                    commit(true);
                }
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 500,
                height: 350,
                source: dataAdapter,
                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' },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
                ]
            });

            $("#addrowbutton").jqxButton({ theme: theme });
            $("#updaterowbutton").jqxButton({ theme: theme });

            // update row.
            $("#updaterowbutton").on('click', function () {
                var datarow = generaterow();
                var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                    var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                    var commit = $("#jqxgrid").jqxGrid('updaterow', id, datarow);
                    $("#jqxgrid").jqxGrid('ensurerowvisible', selectedrowindex);
                }
            });

            // create new row.
            $("#addrowbutton").on('click', function () {
                var rowid = 999999999; // tmp rowid for pending insert
                var row = new Object;
                row["Id"] = 999999999; // Setup Id for pending insert
                $("#jqxgrid").jqxGrid('addrow', rowid, row, 'top');
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div style="float: left;" id="jqxgrid">
        </div>
        <div style="margin-left: 10px; float: left;">
            <div>
                <input id="addrowbutton" type="button" value="Add New Row" />
            </div>
            <div style="margin-top: 10px;">
                <input id="updaterowbutton" type="button" value="Update Selected Row" />
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

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

Author

Posts

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

You must be logged in to reply to this topic.