jQWidgets Forums

Tagged: addrow, empty row, grid, jqxgrid

This topic contains 4 replies, has 2 voices, and was last updated by darkelf 10 years, 8 months ago.

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

Author

Problem with addrow Posts

September 4, 2014 at 7:49 am Problem with addrow #59113

Participant

Hi;
I have a jqxgrid on my project (id=calismaGrid). Work fine while listing and editing. But i have a problem with add new blank row.

I have a button (id=addCalismaBtn). I want to add blank row. I use this code.

$(document).off(‘click’, ‘#addCalismaBtn’).on(‘click’, ‘#addCalismaBtn’,
function (event){
console.log(“work add row”);
var commit = $(“#calismaGrid”).jqxGrid(‘addrow’, null, {});
}
);

When this code running;
print on console “work add row”. But not add any row…

What is my problem?
Thanks.

September 4, 2014 at 12:21 pm Problem with addrow #59135

Nadezhda

Participant

Hello darkelf,

Please, find below an example which shows how to add blank row in jqxGrid:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5"
            ];
            for (var i = 0; i < 5; 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",
                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' }
                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                columnsresize: true,
                columns: [
                  { text: 'Name', dataField: 'firstname', width: 120 },
                  { text: 'Last Name', dataField: 'lastname', width: 120 },
                  { text: 'Product', editable: false, 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', cellsalign: 'right', cellsformat: 'c2' }
                ]
            });

            $("#addrowbutton").on('click', function (event) {               
                var commit = $("#jqxgrid").jqxGrid('addrow', null, {})
            });
        });
    </script>
</head>
<body>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
    </div>
    <div style="margin-top: 10px;">
    <input id="addrowbutton" type="button" value="Add Row" />
</div>
</body>
</html>

Best Regards,
Nadezhda

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

September 4, 2014 at 1:33 pm Problem with addrow #59139

darkelf

Participant

First of all thanks for your interesting. And sorry for my English.

Your code is working perfect. But my code is not like different for your code. I looking for mistake. But i cant find…

var commit = $(“#calismaGrid”).jqxGrid(‘addrow’, null, {})

Look like a master key. I use but nothing happened, not give an error or any message. Only before and after console.log message happen.

$(“#calismaGrid”).jqxGrid({
width: ‘100%’,
source: calismaDataAdapter,
columnsresize: true,
groupable: true,
editable: true,
editmode: ‘dblclick’,
showtoolbar: true,
toolbarheight: 30,
.
.
.

$(document).off(‘click’, ‘#addCalismaBtn’).on(‘click’, ‘#addCalismaBtn’,
function (event){
console.log(“before add happen.”);
var commit = $(“#calismaGrid”).jqxGrid(‘addrow’, null, {});
console.log(“after add happen.”);
}
);

I cant see any problem on my code. But my code has got a problem.

September 4, 2014 at 1:42 pm Problem with addrow #59140

darkelf

Participant

Very insteresting. I try to add another grid on same button. I was success.

$(document).off(‘click’, ‘#addCalismaBtn’).on(‘click’, ‘#addCalismaBtn’,
function (event){
// var commit = $(“#calismaGrid”).jqxGrid(‘addrow’, null, {});
var commit = $(“#gorevGrid”).jqxGrid(‘addrow’, null, {});
}
);

calismaGrid is not working, gorevGrid perfectly work. I’m looking for different two grid…

September 5, 2014 at 8:49 am Problem with addrow #59160

darkelf

Participant

I found my mistake;
I forgot a “,” sign when defining datafields on calismaDataSource.
.
.
.

{ name: ‘asama’, type: ‘string’ },
],
.
.

But error not view on the console. When delete “,” sign problem is fixed.
Thank for your interesting.

Author

Posts

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

You must be logged in to reply to this topic.