Nested grid add row

[deyavirupParticipant]

How can I add a row dynamically in a nested grid on click of a button?
I was trying this
$(“#addBtn”).on(‘click’, function () {
$(“#jqxgrid”).jqxGrid(‘addrow’, {}, {});
});
But got this error :
Unable to get property ‘constraints’ of undefined or null reference

[HristoParticipant]

Hello deyavirup,

In your code second parameter is incorrect it should be – $("#jqxgrid").jqxGrid('addrow', null, {}); (for empty row)
We have similar theme: http://www.jqwidgets.com/community/topic/add-row-to-nested-grid/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[deyavirupParticipant]

Hello Hristo,

I did the same as you have said but still getting the same error.
Can you tell how to set the data for the inner grid(constraints) here?

[HristoParticipant]

Hello deyavirup,

Please take a look this example:
https://www.jseditor.io/?key=jqwidgets-nested-grid-new-row

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[deyavirupParticipant]

Hello Hristo,

In your example I can’t find where a new row is added in the grid.
I have tried it doing like this
https://www.jseditor.io/?key=nested-grid-add-row-1

but its giving the above mentioned error.
Can you tell me where I am going wrong in my code?

[HristoParticipant]

Hello deyavirup,

Your example is not shared.
Could you make settings below:
– Login
– From menu Share select “Everyone”
– And save the project

About my example – when click on “Add row to nested grid”. This add new row (empty) in the end of nested grid.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[deyavirupParticipant]

Here is my code:

$(document).ready(function () {

var value=””;
var gridId = “”;
var currentDivID = “”;

var data = [
{
“ruleid”: “1001”,
“size”: “51”,
“ZScore”: “”,
“complexity”: “8”,
“constraints”: {
“constraint”: [
{
“varName”: “BirthWeight”,
“Min”: “2.500000”,
“Max”: “2.500000”
},
{
“varName”: “AgeMother”,
“Min”: “39.000000”,
“Max”: “39.000000”
},
{
“varName”: “AgeFather”,
“Min”: “35.000000”,
“Max”: “39.000000”
}
]
}
},
{
“ruleid”: “1002”,
“size”: “92”,
“ZScore”: “”,
“complexity”: “2”,
“constraints”: {
“constraint”: [
{
“varName”: “AgeFather”,
“Min”: “32.000000”,
“Max”: “45.000000”
},
{
“varName”: “Age AD Start (weeks)”,
“Min”: “14.000000”,
“Max”: “30.000000”
}
]
}
},
{
“ruleid”: “1003”,
“size”: “62”,
“ZScore”: “”,
“complexity”: “2”,
“constraints”: {
“constraint”: [
{
“varName”: “AgeFather”,
“Min”: “32.000000”,
“Max”: “45.000000”
},
{
“varName”: “Age AD Start (weeks)”,
“Min”: “14.000000”,
“Max”: “30.000000”
}
]
}
}
];
var source1 =
{
datafields: [
{ name: ‘ruleid’, type: ‘string’ },
{ name: ‘size’, type: ‘string’ },
{ name: ‘ZScore’, type: ‘string’ },
{ name: ‘complexity’, type: ‘string’ }
],
datatype: ‘json’,
/* sortcolumn: ‘ruleid’,
sortdirection: ‘asc’, */
localdata: data
};
var adapter = new $.jqx.dataAdapter(source1);
// create nested grid.
var initrowdetails = function (index, parentElement, gridElement, record) {
var id = record.uid.toString();
var grid = $($(parentElement).children()[0]);
var nestedSource =
{
datafields: [
{ name: ‘varName’, map: ‘varName’, type: ‘string’ },
{ name: ‘Min’, map: ‘Min’, type: ‘string’ },
{ name: ‘Max’, map: ‘Max’, type: ‘string’ }
],
datatype: ‘json’,
root: ‘constraint’,
theme: ‘darkblue’,
localdata: data[index].constraints
};
var nestedAdapter = new $.jqx.dataAdapter(nestedSource);
if (grid != null) {
grid.jqxGrid({
source: nestedAdapter, width: 600, height: 100,
columns: [
{ text: “varName”, datafield: “varName” },
{ text: “Min”, datafield: “Min” },
{ text: “Max”, datafield: “Max” }
]
});
}
};

var column1 = [
{ text: ‘ruleid’, datafield: ‘ruleid’, width: 150 },
{ text: ‘size’, datafield: ‘size’, width: 150 },
{ text: ‘ZScore’, datafield: ‘ZScore’, width: 150 },
{ text: ‘complexity’, datafield: ‘complexity’, }
];

$(“#jqxgrid”).jqxGrid(
{
width: 625,
height: 600,
source: source1,
theme: “lsjqwidget-custom”,
rowdetails: true,
rowsheight: 35,
initrowdetails: initrowdetails,
rowdetailstemplate: { rowdetails: “<div id=’grid’ class=’innergrid’ style=’margin: 10px;’></div>”, rowdetailsheight: 120, rowdetailshidden: false, theme: “lsjqwidget-custom”},
/*ready: function () {
$(“#jqxgrid”).jqxGrid(‘showrowdetails’, 0);
},*/
columns: column1
});

$(“#addRow”).click(function () {
//console.log(nestedGrids);
$(“#jqxgrid”).jqxGrid(‘addrow’, null, {} );
});
});

<!DOCTYPE html>
<HTML>
<HEAD>
</HEAD>
<BODY>
<div id=”” style=”overflow:scroll; width: 49%; height: 650px; float: left; margin: 3px;”>

<button id=”addRow”>
Add row to nested grid
</button>
<div id=”jqxgrid” style=”float: left; margin: 3px;”>
</div>
</div>
</BODY>
</HTML>

Can you tell me where I am going wrong in this code?

[HristoParticipant]

Hello deyavirup,

Error message shows in initrowdetails function.
In this row localdata: data[index].constraints. Without .constraints it will work.
I make small changes in code below:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="../../libs/jqwidgets-ver3.9.0/jqwidgets/styles/jqx.base.css" rel="stylesheet" />
    <link href="../../libs/jqwidgets-ver3.9.0/jqwidgets/styles/jqx.darkblue.css" rel="stylesheet" />

    <script src="../../libs/jquery-1.11.3-dev.js"></script>

    <script src="../../libs/jqwidgets-ver3.9.0/jqwidgets/jqx-all.js"></script>

    <script>
        $(document).ready(function () {
            var value = "";
            var gridId = "";
            var currentDivID = "";
            var data = [
                {
                    "ruleid": "1001",
                    "size": "51",
                    "ZScore": "",
                    "complexity": "8",
                    "constraints": {
                        "constraint": [
                        {
                            "varName": "BirthWeight",
                            "Min": "2.500000",
                            "Max": "2.500000"
                        },
                        {
                            "varName": "AgeMother",
                            "Min": "39.000000",
                            "Max": "39.000000"
                        },
                        {
                            "varName": "AgeFather",
                            "Min": "35.000000",
                            "Max": "39.000000"
                        }
                        ]
                    }
                },
                {
                    "ruleid": "1002",
                    "size": "92",
                    "ZScore": "",
                    "complexity": "2",
                    "constraints": {
                        "constraint": [
                        {
                            "varName": "AgeFather",
                            "Min": "32.000000",
                            "Max": "45.000000"
                        },
                        {
                            "varName": "Age AD Start (weeks)",
                            "Min": "14.000000",
                            "Max": "30.000000"
                        }
                        ]
                    }
                },
                {
                    "ruleid": "1003",
                    "size": "62",
                    "ZScore": "",
                    "complexity": "2",
                    "constraints": {
                        "constraint": [
                        {
                            "varName": "AgeFather",
                            "Min": "32.000000",
                            "Max": "45.000000"
                        },
                        {
                            "varName": "Age AD Start (weeks)",
                            "Min": "14.000000",
                            "Max": "30.000000"
                        }
                        ]
                    }
                }
            ];
            var source1 =
            {
                datafields: [
                { name: 'ruleid', type: 'string' },
                { name: 'size', type: 'string' },
                { name: 'ZScore', type: 'string' },
                { name: 'complexity', type: 'string' }
                ],
                datatype: 'json',
                localdata: data
            };
            var adapter = new $.jqx.dataAdapter(source1);

            var nestedGrids = new Array();
            // create nested grid.
            var initrowdetails = function (index, parentElement, gridElement, record) {
                var id = record.uid.toString();
                var grid = $($(parentElement).children()[0]);
                nestedGrids.push(grid);
                var nestedSource =
                {
                    datafields: [
                    // not need to set (map: ...) because there are with same name
                    { name: 'varName', type: 'string' },
                    { name: 'Min', type: 'string' },
                    { name: 'Max', type: 'string' }
                    ],
                    datatype: 'json',
                    root: 'constraint',
                    theme: 'darkblue',
                    localdata: data[index]//.constraints
                };
                var nestedAdapter = new $.jqx.dataAdapter(nestedSource);
                if (grid != null) {
                    grid.jqxGrid({
                        source: nestedAdapter, width: 600, height: 100,
                        columns: [
                        { text: "varName", datafield: "varName" },
                        { text: "Min", datafield: "Min" },
                        { text: "Max", datafield: "Max" }
                        ]
                    });
                }
            };

            var column1 = [
                { text: 'ruleid', datafield: 'ruleid', width: 150 },
                { text: 'size', datafield: 'size', width: 150 },
                { text: 'ZScore', datafield: 'ZScore', width: 150 },
                { text: 'complexity', datafield: 'complexity', }
            ];

            $("#jqxgrid").jqxGrid(
            {
                width: 725,
                height: 800,
                source: source1,
                theme: "lsjqwidget-custom",
                rowdetails: true,
                rowsheight: 35,
                initrowdetails: initrowdetails,
                rowdetailstemplate: { rowdetails: "<div id='grid' class='innergrid' style='margin: 10px;'></div>", rowdetailsheight: 120, rowdetailshidden: false, theme: "lsjqwidget-custom" },
                columns: column1
            });

            // $("#addRow").click(function () {
            //     $("#jqxgrid").jqxGrid('addrow', null, {});
            // });

            // Add row in [first] Nested grid
            $("#add").click(function () {
                // Special in first nested grid
                nestedGrids[0].jqxGrid('addrow', null, {});
            });
        });
    </script>
</head>
<body>
    <div id="" style="overflow:scroll; width: 49%; height: 650px; float: left; margin: 3px;">
        <!-- <button id="addRow">
            Add row to grid
        </button> -->
        <button id="add">
            Add row to nested grid
        </button>
        <div id="jqxgrid" style="float: left; margin: 3px;">
        </div>
    </div>
</body>
</html>

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[deyavirupParticipant]

But I need this row localdata: data[index].constraints.
As I need to implement an on click function, where the data will be deleted from the innergrid and gets populated onto another grid.

[HristoParticipant]

Hello deyavirup,

Could you give us more detailed information.
We generate this view.
http://postimg.org/image/49njt5039/
Please take a look this example: http://jsfiddle.net/txhi/9v8eb5k2/
(this is used to create the picture above)

If you would like could read more about dataAdapter in this articles:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-datasources.htm
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdataadapter/jquery-data-adapter.htm
Especially about root and record this could be helpful to use second dataAdapter generated from same data.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[deyavirupParticipant]

Hi Hristo,

This is my entire code:
https://jsfiddle.net/5ad60wpy/

Now what I wanted/tried to do is that if I click on the add button, a row (having an outer row and an inner row inside it) will get populated in the #jqxgrid table.

Now the issue in this code is that if I don’t use .constraints, a row is getting populated but the below mentioned code functionality is not working

$(“.innergrid”).on(‘mouseenter’, function ()
{
currentDivID = this.id;
//alert(currentDivID);
value = “”;

$(“#”+currentDivID).on(‘rowselect’, function (event)
{
var row = event.args.rowindex;
//var datarow = $(“#grid2”).jqxGrid(‘getrowdata’, row);
value = $(“#”+currentDivID).jqxGrid(‘getrowdata’, row);
ROWSS = ROWSS + value;
var id = $(“#gamegrid2”).jqxGrid(‘getdatainformation’).rowscount;

DELETE_ROW_ID = $(“#”+currentDivID).jqxGrid(‘getrowid’, row);

//alert(value);
if(COUNTER <= 0)
{
$(“#gamegrid2”).jqxGrid(‘addrow’, id, value);

COUNTER = 1;
$(“#”+currentDivID).jqxGrid(‘deleterow’, DELETE_ROW_ID);
COUNTER = 0;
}

});

$(“#”+currentDivID).on(‘mouseup’, function (event)
{
$(“#”+currentDivID).jqxGrid(‘clearselection’);
});
});

It would be of great help, if you can point out where I am going wrong.

[HristoParticipant]

Hello deyavirup,

If Your issue is with how to get ‘constraints’.
Could you transform json data to like this:

{
   "ruleid": "1003",
   "size": "62",
   "ZScore": "",
   "complexity": "2",
   "constraint": [
      {
         "varName": "AgeFather",
         "Min": "32.000000",
         "Max": "45.000000"
      }, {
         "varName": "Age AD Start (weeks)",
         "Min": "14.000000",
         "Max": "30.000000"
      }
   ]
}

If you receive data from a server could use beforeLoadComplete in dataAdapter.
Could read more about this in arcticle below:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdataadapter/jquery-data-adapter.htm
and here:
http://www.jqwidgets.com/jquery-widgets-demo/documentation/jqxdataadapter/jqxdataadapter-api.htm

I noticed something wrong in this code.
Binding an event to ‘mouseenter’ event.
I speak about these lines below:

$(".innergrid").on('mouseenter', function () {
   currentDivID = this.id;
   //alert(currentDivID);
   value = "";

   $("#" + currentDivID).on('rowselect', function (event) {
   	var row = event.args.rowindex;
   	//var datarow = $("#grid2").jqxGrid('getrowdata', row);
   	value = $("#" + currentDivID).jqxGrid('getrowdata', row);
   	ROWSS = ROWSS + value;
   	var id = $("#gamegrid2").jqxGrid('getdatainformation').rowscount;

   	DELETE_ROW_ID = $("#" + currentDivID).jqxGrid('getrowid', row);

   	//alert(value);
   	if (COUNTER <= 0) {
      	$("#gamegrid2").jqxGrid('addrow', id, value);

      	COUNTER = 1;
      	$("#" + currentDivID).jqxGrid('deleterow', DELETE_ROW_ID);
           COUNTER = 0;
   	}
   });

   $("#" + currentDivID).on('mouseup', function (event) {
      $("#" + currentDivID).jqxGrid('clearselection');
   });
});

This ‘rowselect’ and ‘mouseup’ and will be invoke too many times and may result in an error.
This approach is incorrect.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts