jQWidgets Forums

This topic contains 7 replies, has 3 voices, and was last updated by UJanke 12 years ago.

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

Author

Insert row at particular position Posts

March 15, 2013 at 10:57 am Insert row at particular position #17135

Syai

Participant

Hi,

Anyone please help me regarding addrow in grid. Here I want to insert the row/record in the addrow method at a particular position I wanted. I’m passing position as parameter to the addrow method but couldn’t be able to insert at that particular position, the new row added has shown in the first row.

addrow: function (rowid, rowdata, position, commit) {

// synchronize with the server – send insert command

$.ajax({

cache: false,

dataType: ‘json’,

url: ‘@Url.Action(“CreateNewRecord“, “Controller”)’,

data: rowdata,

type: “POST”,

success: function (data, status, xhr) {

// insert command is executed.

commit(true);

//Select the position of created record.

$(“#jqxgrid”).jqxGrid(‘selectrow’, position);

error: function (jqXHR, textStatus, errorThrown) {

alert(errorThrown);

commit(false);

}

});

}

March 15, 2013 at 11:03 am Insert row at particular position #17142

Dimitar

Participant

Hello Syai,

Unfortunately, it is not possible to insert a row at a particular position, except for the beginning or end of the grid.

Best Regards,
Dimitar

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

March 15, 2013 at 11:11 am Insert row at particular position #17143

Syai

Participant

Hi Dimitar,
Thanks for the quick reply. Can you please let me know onemore thing. Suppose I’m in 3rd page of the grid and I’ve created new record. Does is possible to move to first page, first row so that I can see the created record.

Regards,
Syai

March 15, 2013 at 11:15 am Insert row at particular position #17144

Dimitar

Participant

Hi Syai,

You should pass a third paremeter to the addrow method, indicating the position, i.e.:

$('#grid').jqxGrid('addrow', rowid, newdata, 'top');

Best Regards,
Dimitar

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

March 15, 2013 at 11:42 am Insert row at particular position #17152

Syai

Participant

Hi Dimitar,
I’ve tried the code by passing the position as ‘top’ but it isn’t happening. I tried to add row from 2nd page of the grid. A blank row got shown at the first row of the 2nd page. Could you please elaborate the process to get to particular position of the grid i.e. 1st row of 1st page.

Regards,
Syai

March 15, 2013 at 11:49 am Insert row at particular position #17155

Dimitar

Participant

Hi Syai,

The method is working fine at our side. Here is an example:

<!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.8.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.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            // 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;
            }
            for (var i = 0; i < 10; i++) {
                var row = generaterow(i);
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                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.
                    commit(true);
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 500,
                height: 350,
                pageable: true,
                source: dataAdapter,
                autoheight: true,
                theme: theme,
                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 });
            $("#addmultiplerowsbutton").jqxButton({ theme: theme });
            $("#deleterowbutton").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 datarow = generaterow();
                var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow, 'top');
            });
            // create new rows.
            $("#addmultiplerowsbutton").on('click', function () {
                $("#jqxgrid").jqxGrid('beginupdate');
                for (var i = 0; i < 10; i++) {
                    var datarow = generaterow();
                    var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow);
                }
                $("#jqxgrid").jqxGrid('endupdate');
            });
            // delete row.
            $("#deleterowbutton").on('click', function () {
                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('deleterow', id);
                }
            });
        });
    </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="addmultiplerowsbutton" type="button" value="Add Multiple New Rows" />
            </div>
            <div style="margin-top: 10px;">
                <input id="deleterowbutton" type="button" value="Delete Selected Row" />
            </div>
            <div style="margin-top: 10px;">
                <input id="updaterowbutton" type="button" value="Update Selected Row" />
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

March 15, 2013 at 1:57 pm Insert row at particular position #17180

Syai

Participant

Hi Dimitar,
Thanks for the reply and the solution provided. Is there any possibility of adding the feature of “AddRow” at particular position in the next versions?

Regards,
Syai

March 15, 2013 at 2:52 pm Insert row at particular position #17182

UJanke

Member

After adding, updating (updatebounddata) or sortig you may have no clue where the new row is. But this may help:

function _findInGrid(KeyD) {

var rows = $(“#grid”).jqxGrid(‘getrows’);
for (var i = 0; i < rows.length; i++) {
if (KeyD= rows[i][DatafieldKeyD]) {
$("#grid").jqxGrid('ensurerowvisible', i);
$("#grid").jqxGrid('selectrow', i);
return;
}

}
}

KeyD = a keyNr usual a Primarykey from your Database. Also the DataID you want to find.
DatafieldKeyD is the same but in your grid.
Be also aware of grid filters which are set. ( use clearfilters in this case, befor you di the rowselect)

Best Regards,
Uwe

Author

Posts

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

You must be logged in to reply to this topic.