jQWidgets Forums

Tagged: datagrid, javascript datagrid, jQuery, jquery datagrid, jqxgrid

This topic contains 7 replies, has 5 voices, and was last updated by taskmate 9 years ago.

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

Author

add new black row that is editable Posts

September 9, 2012 at 11:40 am add new black row that is editable #7551

delebash

Participant

Trying to add a new blank row that the user sees and is already in editmode.

Tried

// create new row.
$(“#addrowbutton”).bind(‘click’, function () {
var id = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
$(“#jqxgrid”).jqxGrid(‘addrow’, id, [])

});

also editable is set to true

$(“#jqxgrid”).jqxGrid({
width: 670,
source: dataAdapter,
pageable: true,
editable: true,

Editing and deleting a row work fine, I just can’t add a new blank row. I have seen the crudexamples but no example of adding a new blank row.

Thanks.

September 9, 2012 at 4:02 pm add new black row that is editable #7557

Peter Stoev

Keymaster

Hi delebash,

To add a new blank row, use this:

$("#jqxgrid").jqxGrid('addrow', null, {});

To make it editable, set the Grid’s editable property to true.
Below is a full sample which demonstrates how to add a blank row when the “Add Row” button is clicked. All rows in the Grid are editable, even the newly added row.

<!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.8.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.edit.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 = getTheme();
            // 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",
                addrow: function (rowid, rowdata) {
                    // synchronize with the server - send insert command
                },
                deleterow: function (rowid) {
                    // synchronize with the server - send delete command
                },
                updaterow: function (rowid, newdata) {
                    // synchronize with the server - send update command
                }
            };
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 500,
                height: 350,
                source: source,
				editable: true,
				selectionmode: 'singlecell',
				editmode: 'selectedcell',
                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").bind('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);
                    $("#jqxgrid").jqxGrid('updaterow', id, datarow);
                    $("#jqxgrid").jqxGrid('ensurerowvisible', selectedrowindex);
                }
            });
            // create new row.
            $("#addrowbutton").bind('click', function () {
                var datarow = generaterow();
                $("#jqxgrid").jqxGrid('addrow', null, {});
            });
            // create new rows.
            $("#addmultiplerowsbutton").bind('click', function () {
                $("#jqxgrid").jqxGrid('beginupdate');
                for (var i = 0; i < 10; i++) {
                    var datarow = generaterow();
                    $("#jqxgrid").jqxGrid('addrow', null, datarow);
                }
                $("#jqxgrid").jqxGrid('endupdate');
            });
            // delete row.
            $("#deleterowbutton").bind('click', function () {
                var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                    var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                    $("#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,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

September 9, 2012 at 9:09 pm add new black row that is editable #7562

delebash

Participant

Thanks for the quick reply aadding selectionmode: ‘singlecell’, did the trick
So in your example even if you have editable = true and you click the add button you
will not be able to edit the new row unless you also have the selectmode set.

Thank you,

Dan

September 10, 2012 at 3:30 am add new black row that is editable #7567

Peter Stoev

Keymaster

Hi Dan,

It works with other selection mode, too.

With the default selectionmode:

$("#jqxgrid").jqxGrid(
{
	width: 500,
	height: 350,
	source: source,
	editable: true,
	editmode: 'selectedcell',
	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' }
	]
});

when I add a new row and then click on a cell in the new row, I am able to edit its value.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 7, 2013 at 3:57 pm add new black row that is editable #14863

ryan paul

Participant

is it possible to make the last or the new added to be the only one editable, wherein as you add a new row at the bottom it will be the only one in the edit mode

March 31, 2016 at 12:59 am add new black row that is editable #83021

soojung

Participant

hello Peter,
Is that your example working?
I remove ‘theme’ and change jquery version then nothing happened, when I click buttons.

March 31, 2016 at 12:04 pm add new black row that is editable #83029

Peter Stoev

Keymaster

Hi soojung,

To add a blank row, pass {} in the Grid’s addrow method call. Example: http://jsfiddle.net/4tqxwajf/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 31, 2016 at 1:15 pm add new black row that is editable #83036

taskmate

Participant

Hi Ryan

I understand that you wish to make the new row editable and rest of the grid not editable.

Suggestion

When you add a new row to the grid. Store the new row index in either a hidden field or say local storage of html5. On Begin cell edit check if this is the new row supposed to be editable. If yes continue to edit if no then cancel the edit call

Hope this helps

Regards

Author

Posts

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

You must be logged in to reply to this topic.