jQWidgets Forums

Tagged: add, grid, jqxgrid, nested grids, nestedgrid, row, Subgrid

This topic contains 4 replies, has 2 voices, and was last updated by tamaraOnt 11 years, 7 months ago.

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

Author

Add Row to Nested Grid Posts

October 1, 2013 at 9:51 am Add Row to Nested Grid #29952

Member

I have a nested grid created without problem

I have a form with information and a button. I want to add this information to the “subgrid” when I press the button.
I know how to add a new row to the main grid, but not how to adding to the subgrid

Can you help me?

var arrayLineaPedido = {id:'temp1',idOrder:null,dateCreation:null,idSellType:1,_idSellType:"NUEVO",idProduct:1,_idProduct:"mi producto",quantity:10,idStatus:26,_idStatus:'NUEVA'};
$('#gridDetalle').jqxGrid('addrow', null, arrayLineaPedido);

October 2, 2013 at 7:13 am Add Row to Nested Grid #30022

Dimitar

Participant

Hello tamaraOnt,

The solution is to save the nested grids in an array when they are initialized. Here is an example in which the button adds an empty row to the nested grid which initialized first:

<!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.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/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";
            var url = "../sampledata/employees.xml";
            var source =
            {
                datafields: [
                    { name: 'FirstName' },
                    { name: 'LastName' },
                    { name: 'Title' },
                    { name: 'Address' },
                    { name: 'City' }
                ],
                root: "Employees",
                record: "Employee",
                id: 'EmployeeID',
                datatype: "xml",
                async: false,
                url: url
            };
            var employeesAdapter = new $.jqx.dataAdapter(source);
            var orderdetailsurl = "../sampledata/orderdetails.xml";
            var ordersSource =
            {
                datafields: [
                    { name: 'EmployeeID', type: 'string' },
                    { name: 'ShipName', type: 'string' },
                    { name: 'ShipAddress', type: 'string' },
                    { name: 'ShipCity', type: 'string' },
                    { name: 'ShipCountry', type: 'string' },
                    { name: 'ShippedDate', type: 'date' }
                ],
                root: "Orders",
                record: "Order",
                datatype: "xml",
                url: orderdetailsurl,
                async: false
            };
            var ordersDataAdapter = new $.jqx.dataAdapter(ordersSource, { autoBind: true });
            orders = ordersDataAdapter.records;
            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 filtergroup = new $.jqx.filter();
                var filter_or_operator = 1;
                var filtervalue = id;
                var filtercondition = 'equal';
                var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                // fill the orders depending on the id.
                var ordersbyid = [];
                for (var m = 0; m < orders.length; m++) {
                    var result = filter.evaluate(orders[m]["EmployeeID"]);
                    if (result)
                        ordersbyid.push(orders[m]);
                }
                var orderssource = { datafields: [
                    { name: 'EmployeeID', type: 'string' },
                    { name: 'ShipName', type: 'string' },
                    { name: 'ShipAddress', type: 'string' },
                    { name: 'ShipCity', type: 'string' },
                    { name: 'ShipCountry', type: 'string' },
                    { name: 'ShippedDate', type: 'date' }
                ],
                    id: 'OrderID',
                    localdata: ordersbyid
                }
                if (grid != null) {
                    grid.jqxGrid({ source: orderssource, theme: theme, width: 600, height: 200,
                        columns: [
                          { text: 'Ship Name', datafield: 'ShipName', width: 200 },
                          { text: 'Ship Address', datafield: 'ShipAddress', width: 200 },
                          { text: 'Ship City', datafield: 'ShipCity', width: 150 },
                          { text: 'Ship Country', datafield: 'ShipCountry', width: 150 },
                          { text: 'Shipped Date', datafield: 'ShippedDate', width: 200 }
                       ]
                    });
                }
            }
            var photorenderer = function (row, column, value) {
                var name = $('#jqxgrid').jqxGrid('getrowdata', row).FirstName;
                var imgurl = '../../images/' + name.toLowerCase() + '.png';
                var img = '<div style="background: white;"><img style="margin:2px; margin-left: 10px;" width="32" height="32" src="' + imgurl + '"></div>';
                return img;
            }
            var renderer = function (row, column, value) {
                return '<span style="margin-left: 4px; margin-top: 9px; float: left;">' + value + '</span>';
            }
            // creage jqxgrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                height: 365,
                source: source,
                theme: theme,
                rowdetails: true,
                rowsheight: 35,
                initrowdetails: initrowdetails,
                rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 220, rowdetailshidden: true },
                ready: function () {
                    $("#jqxgrid").jqxGrid('showrowdetails', 1);
                },
                columns: [
                      { text: 'Photo', width: 50, cellsrenderer: photorenderer },
                      { text: 'First Name', datafield: 'FirstName', width: 100, cellsrenderer: renderer },
                      { text: 'Last Name', datafield: 'LastName', width: 100, cellsrenderer: renderer },
                      { text: 'Title', datafield: 'Title', width: 180, cellsrenderer: renderer },
                      { text: 'Address', datafield: 'Address', width: 300, cellsrenderer: renderer },
                      { text: 'City', datafield: 'City', width: 170, cellsrenderer: renderer }
                  ]
            });
            $("#addRow").click(function () {
                nestedGrids[0].jqxGrid('addrow', null, {});
            });
        });
    </script>
</head>
<body class='default'>
    <button id="addRow">
        Add row to nested grid</button>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Dimitar

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

October 2, 2013 at 7:40 am Add Row to Nested Grid #30026

tamaraOnt

Member

Ok, but in my example the grid is empty, so the method initrowdetails has not been implemented yet.
The initrowdetails is executed when I desplegate one specific row

How can I manage that?

Thanks in advance

October 2, 2013 at 10:02 am Add Row to Nested Grid #30038

Dimitar

Participant

Hi tamaraOnt,

Until the initrowdetails function is called, there are no nested grids. You cannot add a new row in a grid that does not exist.

Best Regards,
Dimitar

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

October 2, 2013 at 2:40 pm Add Row to Nested Grid #30050

tamaraOnt

Member

I got the solution

First of all, I add the “main array” to the grid. Its means, that I add the array to the main row of the grid. Then, I force to show the details of that row, so that, the initrowdetails method is executed.

var arrayLineaPedido = {id:'temp1',idSellType:1,idProduct:3_idProduct:"super",quantity:3};
$('#gridDetalle').jqxGrid('addrow', null, arrayLineaPedido);  
var rows = $('#gridDetalle').jqxGrid('getrows');
$('#gridDetalle').jqxGrid('showrowdetails', rows.length-1);//tendria que ser el ultimo

So, in that way, I can add a row to the nestegrid as you said me

var linea = new Object();
linea["id"]=null;
linea['idOrderDetail']='temp1';
linea['idAttribute']=1;
linea['value']="un valor cualquiera";
linea['idType']=1;
nestedGrids[rows.length-1].jqxGrid('addrow', null, linea);

Thanks

Author

Posts

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

You must be logged in to reply to this topic.